HTMLテーブル

HTMLテーブルを使用すると、Web開発者はデータを行と列に配置できます。

例

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

HTMLテーブルを定義する

HTMLのテーブルは、行と列内のテーブルセルで構成されます

例

単純なHTMLテーブル：

<table>
<tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
</tr>
<tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
</tr>
</table>

テーブルセル

各テーブルセルは、 <td>と</td>タグで定義されます。

td テーブルデータを表します。

<td>との間のすべてが</td>テーブルセルのコンテンツです。

例

<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>

注：テーブルデータ要素は、テーブルのデータコンテナです。
あらゆる種類のHTML要素を含めることができます。テキスト、画像、リスト、その他の表など。

テーブル行

各テーブル行はaで始まり、タグ<tr>で終わります。</tr>

tr テーブル行を表します。

例

<table>
<tr>
<td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
</tr>
<tr>
<td>16</td>
    <td>14</td>
    <td>10</td>
</tr>
</table>

テーブルには必要な数の行を含めることができますが、各行のセルの数が同じであることを確認してください。

注：行のセル数が他の行より少ない場合や多い場合があります。これについては、後の章で学習します。

テーブルヘッダー

セルをヘッダーにしたい場合があります。その場合は、 <th>タグの代わりにタグを使用します<td>。

例

最初の行をテーブルヘッダーとします。

<table>
<tr>
<th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
</tr>
<tr>
<td>16</td>
    <td>14</td>
    <td>10</td>
</tr>
</table>

デフォルトでは、<th>要素のテキストは太字で中央に配置されていますが、CSSを使用して変更できます。

HTML演習