HTMLで表を作る thとtdとtr│プログラミング独学

表の基本形

表(テーブル)を表示するにはtable要素を使います。表の中のセル(1マス)を表すには、th要素またはtd要素を使います。th要素は表の見出し入るセルを、td要素はデータが入るセルを意味します。tr要素は横１列分を意味します。

コード　table.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset=utf-8>
</head>

<body>
  <table border="1">
  <tr>
      <th>順位</th><th>品種</th><th>特徴</th>
   </tr>
   <tr>
      <td>1</td><td>スコティッシュフォールド</td><td>耳と丸い姿</td>
   </tr>
   <tr>
     <td>2</td> <td>アメリカンショートヘア</td><td>人懐っこい</td>
   </tr>
   <tr>
      <td>3</td> <td>マンチカン</td><td>短い足</td>
   </tr>
   <tr>
      <td colspan="3">
          アニコム会社　猫の人気ランキング
      </td> 
   </tr>
</table>
</body>

表示結果

順位	品種	特徴
1	スコティッシュフォールド	耳と丸い姿
2	アメリカンショートヘア	人懐っこい
3	マンチカン	短い足
アニコム会社　猫の人気ランキング

colspan属性を指定すると、セルが横方向に結合されます。colspan属性の値には、結合したいセルの個数を指定します。

<thead> <tbody> <tfoot>の各タグでtr要素を囲むと、囲った範囲が縦にグループ化され、それぞれ表のヘッダー、本体、フッター部分を意味します。
また、captionは表のタイトルを意味し、開始タグ<table>の直後に配置します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset=utf-8>
<html lang="ja">
</head>

<body>
  <table border="1">
　　<caption>猫の人気ベスト3</caption>
<thead>
  <tr>
      <th>順位</th><th>品種</th><th>特徴</th>
   </tr>
</thead>
<body>
   <tr>
      <td>1</td><td>スコティッシュフォールド</td><td>耳と丸い姿</td>
   </tr>
   <tr>
     <td>2</td> <td>アメリカンショートヘア</td><td>人懐っこい</td>
   </tr>
   <tr>
      <td>3</td> <td>マンチカン</td><td>短い足</td>
   </tr>
</tbody>
<tfoot>
   <tr>
      <td colspan="3">
          アニコム会社　猫の人気ランキング
      </td> 
   </tr>
</tfoot>
</table>
</body>

猫の人気ベスト3
順位	品種	特徴
1	スコティッシュフォールド	耳と丸い姿
2	アメリカンショートヘア	人懐っこい
3	マンチカン	短い足
アニコム会社　猫の人気ランキング