実践で学ぶHTML／CSS　－WEBページに表（table）を追加する2

どうもhiroakiです。

今回はWEBページに表（table）を追加する方法を紹介します。ここではHTML言語を使用します。

前回tableの基本的な作り方と考え方をお伝えしたので、その続きを書きます。

hiroakies.hatenablog.com

▼こちらで全てのレッスンを確認できます。

hiroakies.hatenablog.com

補足説明

①まずは表の枠組みを作っていきましょう。下記のコードをコピペしましょう。

<table>
<caption>気ままに趣味旅行（表のキャプション部分）</caption>
<thead>
<tr>
<th>カテゴリ一蘭</th>
<th>内容</th>
<th>著者</th>
<td>ヘッダ部分</td>
</tr>
</thead>
<tbody>
<tr>
<th>HTML／CSS</th>
<td>HTML／CSSの基礎・応用について学びます</td>
<td rowspan="5">hiroaki（縦に５つ連結）他のtr部分で、連結に対応する4つ分のtdが抜けていますね。</td>
<td rowspan="5">ボディ部分</td>
</tr>
<tr>
<th>Python</th>
<td>Pythonの基礎・応用について学びます</td>
</tr>
<tr>
<th>読書</th>
<td>これまでに読んだ本について学んだこと等</td>
</tr>
<tr>
<th>映画（映像）</th>
<td>面白い映画や映像を紹介。感想みたいなものです</td>
</tr>
<tr>
<th>カフェ・レストラン</th>
<td>カフェ・レストランについてのレビューです</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>その他</th>
<td colspan="2">雑記とかもあります（横に２つ連結）tr内にtdがひとつ足りないのが確認できますね。</td>
<td>フッタ部分</td>
</tr>
</tfoot>
</table>

どうでしょうか。前回からの補足部分は赤字で示しています。colspanとrowspan属性を指定すると連結できます。見てもらうと分かりますが、連結した行列部分に対応する要素が<tr>要素の中にありません。

気ままに趣味旅行（表のキャプション部分）
カテゴリ一蘭	内容	著者	ヘッダ部分
HTML／CSS	HTML／CSSの基礎・応用について学びます	hiroaki（縦に５つ連結）他のtr部分で、連結に対応する4つ分のtdが抜けていますね。	ボディ部分
Python	Pythonの基礎・応用について学びます
読書	これまでに読んだ本について学んだこと等
映画（映像）	面白い映画や映像を紹介。感想みたいなものです
カフェ・レストラン	カフェ・レストランについてのレビューです
その他	雑記とかもあります（横に２つ連結）tr内にtdがひとつ足りないのが確認できますね。		フッタ部分

できましたか。たぶん、おおよそ分かってもらえたと思います。しかしこのままでは、ちょっと味気ないですね。

②次にレイアウトを整えます。これから、前回使わなかったCSSを使っていきますが、分からない人がいれば、こちらにまとめておりますので、少しさらっておいてください。HTML／CSSの基礎1 - 気ままに趣味旅行

テーブル（HTML）：

<table class="table-practice">
<caption>気ままに趣味旅行（表のキャプション部分）</caption>
<thead>
<tr>
<th>カテゴリ一蘭</th>
<th>内容</th>
<th>著者</th>
<td>ヘッダ部分</td>
</tr>
</thead>
<tbody>
<tr>
<th>HTML／CSS</th>
<td>HTML／CSSの基礎・応用について学びます</td>
<td rowspan="5"class="table-practice-rowspan1">hiroaki（縦に５つ連結）他のtr部分で、連結に対応する4つ分のtdが抜けていますね。</td>
<td rowspan="5">ボディ部分</td>
</tr>
<tr>
<th>Python</th>
<td>Pythonの基礎・応用について学びます</td>
</tr>
<tr>
<th>読書</th>
<td>これまでに読んだ本について学んだこと等</td>
</tr>
<tr>
<th>映画（映像）</th>
<td>面白い映画や映像を紹介。感想みたいなものです</td>
</tr>
<tr>
<th>カフェ・レストラン</th>
<td>カフェ・レストランについてのレビューです</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>その他</th>
<td colspan="2">雑記とかもあります（横に２つ連結）tr内にtdがひとつ足りないのが確認できますね。</td>
<td>フッタ部分</td>
</tr>
</tfoot>
</table>

CSS:

.table-practice{font-size:20px;
text-align:center;}
.table-practice th{background: black;
color: white;
padding:10px;
width:150px;}
.table-practice td {padding:5px;
background: #838389;
color:white;}
.table-practice-rowspan1{width:70px;}

見出し（th）以外は初期設定が左寄せとなっています。text-alignプロパティでcenterに指定します。

気ままに趣味旅行（表のキャプション部分）
カテゴリ一蘭	内容	著者	ヘッダ部分
HTML／CSS	HTML／CSSの基礎・応用について学びます	hiroaki（縦に５つ連結）他のtr部分で、連結に対応する4つ分のtdが抜けていますね。	ボディ部分
Python	Pythonの基礎・応用について学びます
読書	これまでに読んだ本について学んだこと等
映画（映像）	面白い映画や映像を紹介。感想みたいなものです
カフェ・レストラン	カフェ・レストランについてのレビューです
その他	雑記とかもあります（横に２つ連結）tr内にtdがひとつ足りないのが確認できますね。		フッタ部分

コードをそのまま試しているで「んんん？なんで、表のth要素のbackground-colorが黒くならないの？？？」と思った方。HTMLのclass="table-practice"をid="table-practice"に変え、CSSの.table-practiceを#table-practiceに変えてみてください。例のように変わると思います。

③こういう表も作れます。