HTML 入門

基本的なタグをマスターしよう

表を配置する

ここでは表を配置してみよう．まず，配置したい表全体を <table> ... </table> で囲います．次に表の行を <tr> ... </tr> で配置します．各行に複数の列を <td> ... </td> で，（ただし，見出し行については <th> ... </th> で）配置します．もちろんすべての行で列の数が一致するように注意してください．

index.html（抜粋）コピー
<table border=1>
  <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  <tr><td>12</td><td>123</td><td>12345678</td></tr>
  <tr><td>123</td><td>123456</td><td>12345678</td></tr>
</table>

セルを連結（結合）するには colspan を指定します．

index.html（抜粋）コピー
<table border=1>
  <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  <tr><td>12</td><td>123</td><td>12345678</td></tr>
  <tr><td colspan="2">セルの連結</td><td>12345678</td></tr>
</table>

表をヘッダー，ボディ，フッターの3つに分けて定義することもできます．このとき，ボディはヘッダーの直後に記述することに注意しよう．また，<tbody> 要素を利用する場合，ヘッダー行でもなく，フッター行でもない行（<tr> 要素）は必ず <tbody> 要素の中に置かなければなりません．つまり，<tbody> 要素を利用する場合，<table> 要素の直接の子として <tr> 要素を置くことができないことに注意してください．

index.html（抜粋）コピー
<table border=1>
  <thead>
    <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  </thead>
  <tbody>
    <tr><td>12</td><td>123</td><td>12345678</td></tr>
    <tr><td>123</td><td>123456</td><td>12345678</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">フッター</td></tr>
  </tfoot>
</table>

セルに色をつけるには，<td style="background-color:lime;"> のように指定します．また，<tr style="background-color:skyblue;"> のように記述すれば，行全体に色を付けることもできます．

index.html（抜粋）コピー
<table border=1>
  <tr style="background-color:skyblue;">
    <th>abc</th>
    <th>def</th>
    <th>ghi</th>
  </tr>
  <tr>
    <td>12</td>
    <td>123</td>
    <td style="background-color:lime;">12345678</td>
  </tr>
  <tr>
    <td>123</td>
    <td>123456</td>
    <td>12345678</td>
  </tr>
</table>

しかしながら，このページで用いたような border を使った罫線の指定方法は現在では非推奨となっており，後で説明する HTML Validation によってエラーが表示されます．次の通り border を省略すれば，罫線は表示されなくなります．現在は HTML ファイルの <table> タグ内で border を指定せず，後で説明する スタイルシートを使って罫線の太さや色つけなどをすることが推奨されています．

index.html（抜粋）コピー
<table>
  <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  <tr><td>12</td><td>123</td><td>12345678</td></tr>
  <tr><td>123</td><td>123456</td><td>12345678</td></tr>
</table>

目次に戻る