HTML テーブル

❮ 前章へ 次章へ ❯

HTML テーブルの例

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
Try it Yourself »

HTML テーブルの定義

HTML テーブルは、<table> タグで定義します。

各テーブルの行は、<tr> タグで定義します。テーブルの見出しは、 <th> タグで定義します。デフォルトで、テーブルの見出しは太字で中央揃えになります。 テーブルのデータ/セルは、<td> タグで定義します。

例

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Try it Yourself »

注： <td> 要素は、テーブルのデータ・コンテナです。
この要素には、あらゆる種類の HTML 要素（テキスト、画像、リスト、別なテーブルなど）を含めることができます。

HTML テーブル - ボーダーの追加

テーブルにボーダーを指定しない限り、ボーダー（罫線）は表示されません。

ボーダーは、CSS の border プロパティを使用して設定します：

例

<table border="1" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Try it Yourself ❯

テーブルとテーブルセルの両方にボーダーを定義することを忘れないでください。

HTML テーブル - ボーダーの折畳み

1 本のボーダーに折畳んだボーダーにしたい場合は、CSS border-collapse を追加します:

Example

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
Try it Yourself ❯

HTML テーブル - セル・パディングの追加

セル・パディングは、セル内のコンテンツとボーダー間のスペースを指定します。

パディングを指定しなければ、テーブルのセルはパディングなしで表示されます。

パディングを設定するには、CSS padding プロパティを使用します:

Example

th, td {
    padding: 15px;
}
Try it Yourself ❯

HTML テーブル - 左揃えの見出し

デフォルトでは、テーブルの見出は太字で中央揃えで表示されます。

テーブルの見出しを左揃えにしたい場合は、CSS text-align プロパティを使用します：

Example

th {
    text-align: left;
}

Try it Yourself ❯

HTML テーブル - ボーダー・スペーシングの追加

ボーダー・スペーシングはセル間のスペースを指定します。

テーブルにボーダー・スペーシングを設定するには、CSS border-spacing プロパティを使用します：

Example

table {
    border-spacing: 5px;
}
Try it Yourself ❯

ボーダーを折畳んだ HTML テーブルでは、border-spacing の効果はありません。

HTML テーブル - 複数の列を結合したテーブルセル

１つ以上の列を結合したセルを作るには、colspan 属性を使用します：

Example

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>
Try it Yourself ❯

HTML テーブル - 複数の行を結合したテーブルセル

１つ以上の行を結合したセルを作るには、rowspan 属性を使用します：

Example

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

Try it Yourself ❯

HTML テーブル - 表題の追加

テーブルに表題を追加するには、<caption> タグを使用します：

Example

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
Try it Yourself ❯

<caption> タグは、<table> タグの直後に挿入しなければなりません。

1 つのテーブルに特別なスタイル

特別なテーブルに特別なスタイルを定義するためには、テーブルに id 属性を追加します：

Example

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

これで、このテーブルに特別なスタイルを定義することができます：

table#t01 {
    width: 100%;
    background-color: #f1f1c1;
}
Try it Yourself ❯

さらにスタイルを追加します：

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}
Try it Yourself ❯

この章のまとめ

練習問題を自分でテストしてください！

Exercise 1 ❯  Exercise 2 ❯  Exercise 3 ❯  Exercise 4 ❯  Exercise 5 ❯  Exercise 6 ❯

HTML Table タグs

タグ 説明
<table> テーブルを定義する
<th> テーブルの見出しセルを定義する
<tr> テーブルの行を定義する
<td> テーブルのセルを定義する
<caption> テーブルの表題を定義する
<colgroup> フォーマットのためテーブルの1つ以上の列グループを指定する
<col> <colgroup> 要素内の各列の column プロパティを指定する
<thead> テーブルの見出し内容のグループ
<tbody> テーブルの本文内容のグループ
<tfoot> テーブルのフッター内容のグループ

❮ 前章へ 次章へ ❯