HTML入門③ Tableの書き方

はじめに

HTMLで表を記述する方法についてまとめます。

まとめ

タグ・属性	機能
<table>	テーブルを作成する
<tr>	行を追加する
<td>	行にデータを追加する
<th>	行の見出しを追加する
colspan	列方向にセルを結合する
rowspan	行方向にセルを結合する
<thead>	ヘッダとしてグループ化する
<tbody>	ボディとしてグループ化する
<tfoot>	フッターとしてグループ化する

サンプル①

<table>タグを使って、表を作成します。<table>タグの内部に、上記のタグにより要素を追加します。

<tr>タグで行を追加していきます。先頭行には、<th>タグで見出しを追加します。

表内部のデータ要素については、<td>タグを使用して追加していきます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Taro Yamada</td>
      <td>20</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jiro Suzuki</td>
      <td>18</td>
    </tr>
  </table>
</body>
</html>

サンプル②

適当な表のサンプルを記載します。

<thead>, <tbody>, <tfoot>でヘッダ、ボディ、フッターを区別します。

<th>タグでは、scope属性で見出しの対象範囲が列方向であることを指定しています。

rowspan, colspan属性で、行方向と列方向にセルを結合することが可能です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style2.css">
  <title>Document</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th scope="col"></th>
        <th scope="col">Price</th>
        <th scope="col">Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Apple</td>
        <td>10</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Orange</td>
        <td colspan="2">2</td>
      </tr>
      <tr>
        <td>Banana</td>
        <td rowspan="2">3</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Grape</td>
        <td>4</td>
      </tr>
    </tbody>
    <tfoot>
      <td>Total</td>
      <td>15</td>
      <td>12</td>
    </tfoot>
  </table>
</body>
</html>