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