HTMLテーブルの基本構成

HTMLのテーブルは<table>要素で定義されます。テーブルは行(<tr>)で構成され、各行はセル(<td>)に分割されます。tdは"table data"の略で、セル内に配置されるコンテンツを表します。セルにはテキスト、画像、リスト、段落、フォームなど様々な要素を含めることができます。

基本的なテーブル実装例

<table style="border: 1px solid black">
    <tr>
        <td style="border: 1px solid black">1行目1列目</td>
        <td style="border: 1px solid black">1行目2列目</td>
    </tr>
    <tr>
        <td style="border: 1px solid black">2行目1列目</td>
        <td style="border: 1px solid black">2行目2列目</td>
    </tr>
</table>

テーブルの枠線設定

デフォルトではテーブルに枠線は表示されません。枠線を表示する場合はCSSのborderプロパティを使用します。

テーブルヘッダーの実装

テーブルのヘッダーセルは<th>要素で定義します。多くのブラウザではヘッダーセルを太字で中央揃えで表示します。

<table style="border: 1px solid black">
    <tr>
        <th style="border: 1px solid black">項目A</th>
        <th style="border: 1px solid black">項目B</th>
    </tr>
    <tr>
        <td style="border: 1px solid black">データA1</td>
        <td style="border: 1px solid black">データB1</td>
    </tr>
</table>

主要なテーブル関連要素