##1. はじめに
HTMLの学習内容は広大なので、本記事では
「テーブル」
を記載する。
##2. テーブルの概要
###テーブルとは？
表を作成するタグで、身近なもので例えるとExcelで作成する表のこと。
タグは<table>で表記。
横一行の記載法として<table>〜</table>内に<tr>〜</tr>で記載。
<tr>〜</tr>タグ中に<th>〜</th>や<td>〜</td>でセル（列）を定義。
##3. テーブル作成の例
【サンプル】
<table border="1">
<tr>
<td>山田</td>
<td>太郎</td>
</tr>
<td>田中</td>
<td>花子</td>
</tr>
</table>
###table
:::note
テーブル全体のエリア（テーブルの親要素）
:::
###tr
:::note
"table row"の略
:::
:::note
テーブルの一行を定義。行は横方向。
:::
###td
:::note
"table data"の略。
:::
:::note
テーブルのデータが入るセルを定義。
:::
【テーブルタグのイメージ図】
【表示例】
##4.ヘッダーのあるテーブル
:::note info
・thタグで表記する。
・適用された文字は太字になる。
:::
【サンプル】
<table border="1">
<tr>
<th>性</th>
<th>名</th>
</tr>
<tr>
<td>山田</td>
<td>太郎</td>
</tr>
<tr>
<td>田中</td>
<td>花子</td>
</tr>
</table>
【表示例】
##5.thead・tbody・tfoot
:::note info
・thead:テーブルのヘッダー行を定義。
・tbody:テーブルのボディ部分（本体部分）を定義。
・tfoot:テーブルのフッター部分を定義。
:::
【サンプル】
<table border="1">
<thead>
<tr>
<th>ヘッダー１</th>
<th>ヘッダー２</th>
</tr>
</thead>
<tbody>
<tr>
<td>ボディー１</td>
<td>ボディー２</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>フッター１</td>
<td>フッター２</td>
</tr>
</tfoot>
</table>
【表示例】
【thead・tbody・tfootの使用目的】
・文章構造を正確に表現できる。
・CSSでスタイルを当てやすい。
##6.キャプション
###キャプションとは？
:::note info
テーブルのタイトルのこと。
:::
【サンプル】
<table border="1">
<caption>キャプション</caption>
<tr>
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
</tr>
</table>
【表示例】
【注意点】
caption要素は、table要素の子要素として配置しなくてはならない。
##7.セルの結合
〜横方向に結合（行）〜
colspan属性を使用
【サンプル】
<table border="1">
<caption>行方向（横方向）に結合</caption>
<tr>
<th colspan="3">セルを結合</th>
</tr>
<tr>
<td>コンテンツ１</td>
<td>コンテンツ２</td>
<td>コンテンツ３</td>
</tr>
</table>
※colspan属性の"3"という数字は、横方向に結合させるセルの個数
【表示例】
〜縦方向に結合（列）〜
rowspan属性を使用
【サンプル】
<table border="1">
<caption> 列方向（縦方向）に結合</caption>
<tr>
<td rowspan="3">セルを結合</td>
<td>コンテンツ１</td>
</tr>
<tr>
<td>コンテンツ２</td>
</tr>
<tr>
<td>コンテンツ３</td>
</tr>
</table>
※rowspan属性の"3"という数字は、縦方向に結合させるセルの個数
【表示例】
##8. おわりに
次項:HTMLの主なタグと用途(4) 「フォーム」に続く。