HTML <table> 表要素
Baseline
広く利用可能
*
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
* この機能の一部は、対応レベルが異なる場合があります。
<table> は HTML の要素で、表形式のデータ、つまり、行と列の組み合わせによるセルに含まれたデータによる二次元の表で表現される情報です。
試してみましょう
<table>
<caption>
フロントエンドウェブ開発者コース 2021
</caption>
<thead>
<tr>
<th scope="col">名前</th>
<th scope="col">関心分野</th>
<th scope="col">年齢</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Chris</th>
<td>HTML 表</td>
<td>22</td>
</tr>
<tr>
<th scope="row">Dennis</th>
<td>ウェブアクセシビリティ</td>
<td>45</td>
</tr>
<tr>
<th scope="row">Sarah</th>
<td>JavaScript フレームワーク</td>
<td>29</td>
</tr>
<tr>
<th scope="row">Karen</th>
<td>ウェブパフォーマンス</td>
<td>36</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="2">平均年齢</th>
<td>33</td>
</tr>
</tfoot>
</table>
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
caption {
caption-side: bottom;
padding: 10px;
font-weight: bold;
}
thead,
tfoot {
background-color: rgb(228 240 245);
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
td:last-of-type {
text-align: center;
}
tbody > tr:nth-of-type(even) {
background-color: rgb(237 238 242);
}
tfoot th {
text-align: right;
}
tfoot td {
font-weight: bold;
}
属性
この要素にはグローバル属性があります。
非推奨の属性
以下の属性は非推奨であり、使用すべきではありません。 以下の文書は、既存のコードを更新する際の参考情報として、また歴史的な関心のみを目的として記載されています。
align-
親要素内のテーブルの水平方向の配置を指定します。 列挙値として、
left、center、rightがあります。 この属性は非推奨であるため、代わりに CSS のmargin-inline-startおよびmargin-inline-endプロパティを使用してください。 bgcolor-
表の背景色を定義します。値は HTML 色です。値は 6 桁の 16 進 RGB コードで、その前に
#が付きます。定義済みの色キーワードのうちのどちらかを使用することもできます。それ以外の CSS の<color>値には対応していません。この属性は非推奨であるため、代わりに CSS のbackground-colorプロパティを使用してください。 border-
表を囲む枠のサイズを非負の整数（ピクセル単位）で定義します。
0に設定すると、frame属性は無効になります。この属性は非推奨であるため、代わりに CSS の プロパティのborderを使用してください。 cellpadding