HTMLにおける表作成<table>タグ

表について

↓表の例

名前	年齢	趣味
佐藤	34	囲碁
石塚	30	料理
ちはる	1	お絵かき

↓表のコード

<table width="200">　※表全体の幅を２００ピクセルに設定

　<thead style="text-align: center;">　※表見出しを中央寄せに設定
　　<tr bgcolor="yellow">　※表見出しの背景を黄色に設定
　　　<th scope="col" width="30%">名前</th>　※幅を全体の３０％に設定
　　　<th scope="col" width="20%">年齢</th>　※　　　　　２０％
　　　<th scope="col" width="50%">趣味</th>　※　　　　　５０％
　　</tr>
　</thead>

　<tbody style="text-align: center;">
　　<tr>
　　　<td>佐藤</td>
　　　<td>34</td>
　　　<td>囲碁</td>
　　</tr>

　　<tr>
　　　<td>石塚</td>
　　　<td>30</td>
　　　<td>料理</td>
　　</tr>

　　<tr>
　　　<td>ちはる</td>
　　　<td>1</td>
　　　<td>お絵かき</td>
　　</tr>
　</tbody>

</table> 

この表は<table><thead><tbody><tr><th><td>要素から成り立っている

　<table>：「表全体」を表す

　<thead>：「見出し行全体」を表す

　　　　　　例の中の（名前、年齢、趣味）が当てはまる

　<tbody>：「表の本体」を表す

　　　　　　例の中の（佐藤、３４、囲碁、石塚、、、お絵かき）が当てはまる

　<tr>：表の「行」を表す

　　　　例の中では、（佐藤、３４、囲碁）（石塚、３０、料理）（ちはる、１、お絵かき）がそれぞれ１グループとして当てはまる

　<th>：表の「見出しセル」を表す

　　　　例の中では、（名前）（年齢）（趣味）が当てはまる

　<td>：表の「セル」を表す

　　　　例の中では、（佐藤）（３４）（囲碁）（石塚）（３０）...全て１つのセルとして当てはまる

　※scope=""は見出しに指定する属性で、対象がどのセルを指すのかを示す

　col：縦方向、row：横方向

また今回では使われていないが

　<tfoot>：「表のフッター」を表す

　　　　　列ごとの合計などを計算する際などに使われる

表の装飾

表は、好きな形や色に装飾することができる

今回の例では「横幅」「セルの色」「中央寄せ」を使っている

他にも「枠線」「縦幅」「余白」「セルの結合」など様々な手法がある