HTML入門 | HTML基本要素 | HTMLテーブル(table)

Tags:

テーブル(table)とは、複数種類のデータ(data)を見やすく整理して表示する表を意味する。HTMLでは<table>タグを使用してこのようなテーブルを作成できる。

<table>タグは次のようなタグで構成される。

  1. <tr>タグはテーブル内の行を区切る。
  2. <th>タグは各列のタイトルを表し、すべての内容は自動的に太字で中央揃えになる。
  3. <td>タグはテーブルの行をそれぞれのセル(cell)に分ける。
<table>
  <tr>
    <th>분류</th>
    <th>항목</th>
  </tr>
  <tr>
    <td>과일</td>
    <td>사과</td>
  </tr>
  <tr>
    <td>채소</td>
    <td>당근</td>
  </tr>
</table>

コード実行

テーブルのスタイル(style)

CSSのborderプロパティを使用して、テーブルに枠線を表示できる。borderプロパティ値を別途指定しない場合、そのテーブルには常に空の枠線が表示される。

<style>
    table, th, td { border: 1px solid black }
</style>

コード実行

上の例でテーブルの枠線(border)が二重に表示される理由は、<table>タグ、<th>タグ、<td>タグがそれぞれ独自の枠線を持っているためである。

このように二重で表示される枠線を一重に設定するには、border-collapseプロパティを使用する。border-collapseプロパティ値をcollapseに設定すると、テーブルの枠線を一重で表示できる。

<style>
    table, th, td { border: 1px solid black; border-collapse: collapse }
</style>

コード実行

テーブルの列を結合する

colspan属性を使用すると、テーブルの列(column)を結合できる。

<table>
  <tr>
    <th>분류</th>
    <th colspan="2">항목</th>
  </tr>
  <tr>
    <td>과일</td>
    <td>사과</td>
    <td>배</td>
  </tr>
  <tr>
    <td>채소</td>
    <td>당근</td>
    <td>감자</td>
  </tr>
</table>

コード実行

テーブルの行を結合する

rowspan属性を使用すると、テーブルの行(row)を結合できる。

<table>
  <tr>
    <th>분류</th>
    <th>항목</th>
  </tr>
  <tr>
    <td rowspan="2">과일</td>
    <td>사과</td>
  </tr>
  <tr>
    <td>배</td>
  </tr>
  <tr>
    <td>채소</td>
    <td>감자</td>
  </tr>
</table>

コード実行

テーブルの列と行を結合する

colspan属性とrowspan属性を一緒に使用すると、より複雑なテーブルも表現できる。

<table>
  <tr>
    <th>분류</th>
    <th colspan="2">항목</th>
  </tr>
  <tr>
    <td rowspan="2">과일</td>
    <td>사과</td>
    <td>배</td>
  </tr>
  <tr>
    <td>포도</td>
    <td rowspan="2">토마토 감자</td>
  </tr>
  <tr>
    <td>채소</td>
    <td>당근</td>
  </tr>
</table>

コード実行

テーブルのキャプション(caption)を設定する

<caption>タグを使用すると、テーブル上部にタイトルや短い説明を付けられる。

<table style="width:100%">
  <caption>장바구니</caption>
  <tr>
    <th>분류</th>
    <th>항목</th>
  </tr>
  <tr>
    <td>과일</td>
    <td>사과</td>
  </tr>
  <tr>
    <td>채소</td>
    <td>당근</td>
  </tr>
</table>

コード実行