MB-Support

パソコン初心者のサポートページ

表の作り方 テーブル table tr th td

 ホームページに表を書くには、テーブルタグを挿入します。パーツは表示を示す table タグ、横一行を示す tr タグ、表の見出しとして強調表示する th タグ、セル(一マス)を示す td タグを使います。セルや行が多くなった場合、終了タグの入力忘れに注意しましょう。


表を作成するには テーブルタグ <table> 〜 </table> を入力します。 セルを作成するには <table> 〜 </table> の中に <td> 〜 </td> を入力します。 <table> 〜 </table> だけでは、何も表示されません。 セル ( <td> 〜 </td> ) を作成してはじめて表になります。 <td> 〜 </td> を囲む <tr> 〜 </tr> は、1 行である事を示します。 border(ボーダー) を 1 以上に指定しないと、枠線が表示されないので表としての見る事ができません。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1">
  <tr>
   <td> 
    ホームズの思い出
   </td>
  </tr>
 </table>
</body>
</html>

ブラウザ


セルを増やす <td>〜</td>

セルを増やすには、<table><tr> 〜 </tr></table> の中に <td> 〜 </td> を連続して入力します。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1">
  <tr>
   <td>ホームズの思い出</td>
   <td>ホームズの事件簿</td>
   <td>最後のあいさつ</td>
  </tr>
 </table>
</body>
</html>

ブラウザ


行を増やす <tr> 〜 </tr>

<tr> 〜 </tr> で 1 行を表すので、<tr> 〜 </tr> を必要なだけ増やす。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1">
  <tr>
   <td>ホームズの思い出</td>
   <td>ホームズの事件簿</td>
   <td>最後のあいさつ</td>
  </tr>
  <tr>
   <td>1.白銀号事件</td>
   <td>1.高名の依頼人</td>
   <td>1.ウィステリア荘</td>
  </tr>
 </table>
</body>
</html>

ブラウザ


見出しを設定する <th> 〜 </th>

見出しの部分は、<td> 〜 </td> の代わりに <th>〜</th>で囲みます。 <th>〜</th> で囲んだ部分は、文字が太字になり、中央に表示されます。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1">
  <tr>
   <th>ホームズの思い出</th>
   <th>ホームズの事件簿</th>
   <th>最後のあいさつ</th>
  </tr>
  <tr>
   <td>1.白銀号事件</td>
   <td>1.高名の依頼人</td>
   <td>1.ウィステリア荘</td>
  </tr>
 </table>
</body>
</html>

ブラウザ


空白のセルを作る

行を増やした場合、先頭のセルの数だけ <td> 〜 </td> を入力する必要があります。下の例では、3 列のセルが絶対になります。 もし、空白のセルを作りたいのであれば、<td> 〜 </td> の間に全角スペースを入力します。半角スペースでは駄目です。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1">
  <tr>
   <th>ホームズの思い出</th>
   <th>ホームズの事件簿</th>
   <th>最後のあいさつ</th>
  </tr>
  <tr>
   <td>1.白銀号事件</td>
   <td>1.高名の依頼人</td>
   <td>1.ウィステリア荘</td>
  </tr>
  <tr>
   <td>2.〜事件</td>
   <td> </td>
   <td>2.〜事件</td>
  </tr>
 </table>
</body>
</html>

ブラウザ

しかし、時にはセルを 1 つにまとめたり、行をまたいでセルを 1 つにまとめたりしたい場合もあるでしょう。 その場合は、縦の仕切り線を破る colspan=" またがるセルの数" や、横の仕切り線を破る rowspan=" またがるセルの数" を入力します。 その方法は以下を参照します。

複雑な表の作り方 colspan rowspan




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項