HTML＋CSS テーブルに関するテクニック
HTML+CSSでテーブルを作成する際に役立ててください。
colとrowの役割
col側は、excelでいう行を意味し、rowは列を意味する。captionは見出しの名称。あとあとcssでcaption-side: top などを指定することができるため、利用するメリットはある。
【htmlの例】
<able>
<caption>クレープ生地の材料</caption>
<thread>
<tr>
<th scope="col">食材</th>
<th scope="col">量</th>
<th scope="col">下準備</th>
</tr>
</thread>
<tbody>
<tr>
<th scope="row">小麦粉</th>
<td>100g</td>
<td>ふるいにかけておく<td>
</tr>
<tr>
<th scope="row">たまご</th>
<td>1個</td>
<td>常温に戻し溶いておく<td>
</tr>
<tr>
<th scope="row">牛乳</th>
<td>00cc</td>
<td>冷蔵庫から早めに出しておく<td>
</tr>
</tbody>
</table>
【CSS側】
table {
width:650px;
border:solid 1px #666666;
border-collapse:collapse;
background-color:#fff;
}
th {
border: solid 1px #666666;
text-align: left;
padding: 10px;
background-color:#dddddd;
}
td {
border:solid 1px #666666;
padding:10px;
vertical-align:top;
}
実際の画面
ChatGPTによると【HTMLでcol、row、captionなど書いても書かなくても表示上は問題ないHTML要素をあえて書く理由はいくつかある】、とのことだ。
1. 意味づけ（セマンティクス）
HTMLは見た目だけでなく、「意味」を持たせるための言語でもあります。例えば：
caption を使えば、「この表は何についてのものか」を明示できます。
col や colgroup を使えば、「この列はグループ化されている」という構造的な意味が伝わります。
→ 人間にも機械にも意味が伝わるHTMLになる。
. アクセシビリティ（特にスクリーンリーダー対応）
視覚に頼らずWebを利用するユーザーにとって、セマンティックな要素は非常に重要です。
caption があることで、スクリーンリーダーが「これは○○の表です」と説明してくれます。
scope="col" などを使えば、行と列の見出しを正確に読み上げてくれます。
→ すべての人に優しいWebを作れる。
3. スタイルやスクリプトとの連携
col 要素にスタイルを適用すれば、列ごとに一括でスタイルを変えることができます。
JavaScriptで構造的にデータを操作する際にも、row, colgroup, caption などがあると便利です。
→ 管理しやすく、拡張性が高いコードになる。
4. 保守性・可読性
開発者が見たときに「この表は何のデータなのか」「どういう構造なのか」が一目でわかるようになります。
→ チーム開発や後々の改修がしやすくなる。