HTMLスキル - 第5章 チャレンジ

テーブルタグを使って、企業概要ページを作ろう!(解説)

テーブルタグを使って、企業概要ページを作ろう!

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

テーブルに関するタグを利用して、企業概要の表を作ってみよう。



チャレンジ内容

・テーブルを作るのに必要なタグを記述できるかどうか
・<tr><th><td>のタグを理解しているかどうか
・ボックスの大きさを揃えることができるかどうか




テーブルで企業概要ページを作ってみよう


まずは、テーブルを作るのに必要な<table>タグを記述し、その中にテーブルのコンテンツ部分を作成するための<tbody>タグを書きましょう。


<!-- ここにテーブルを記述 -->
<table>
<tbody>
</tbody>
</table>



次に、テーブルの項目名となる<th>タグと、その説明となる部分を<td>タグで作っていきましょう。
<td>の部分の記述ができたら、<th>タグと<td>タグを一行として定義するための<tr>タグで囲んでください。



<!-- ここにテーブルを記述 -->
<table>
<tbody>
<tr>
<th>会社名</th>
<td>NEST株式会社</td>
<td>NEST Corporation</td>
</tr>
</tbody>


一度保存してブラウザで見てみましょう。
一行目の表ができました。
では一行目の<tr>タグをコピー&ペーストで貼付けて、行の追加をし、中身の文字だけを修正していきたいと思います。



所在地の部分は、「本社」「東京オフィス」を太字にしたいので<b>タグで囲みます。
また、改行も必要なので、<br>タグも記述していきましょう。



<tbody>

<tr>
<th>会社名</th>
<td>NEST株式会社</td>
<td>NEST Corporation</td>
</tr>


<tr>
<th>設立日</th>
<td>2014年7月12日</td>
<td>July 12, 2014</td>
</tr>


<tr>
<th>所在地</th>
<td>
<b>本社</b><br>
〒000-0000<br>
京都市京都ダミー町00-00<br><br>
<b>東京オフィス</b><br>
〒000-0000<br>
東京都東京ダミー町00-00
</td>
<td>
<b>Head Office</b><br>
〒000-0000<br>
00-00 dummy-cho Kyoto-shi, Kyoto<br><br>
<b>Tokyo Office</b><br>
〒000-0000<br>
00-00 dummy-cho Tokyo-to, Tokyo
</td>
</tr>

</tbody>



一度保存してブラウザで見てみましょう。
3行の表ができ、改行なども上手くできました。
最後に縦のボックスの大きさを揃えて、見やすくしましょう。


<col>タグで表の幅を揃えて見やすくしよう


<table>タグの中に<colgroup>タグを入力します。
その中に<col>タグで1つ1つのセルの横幅の設定をしましょう。


<colgroup>
<col width="280">
<col width="320">
<col width="320">
</colgroup>



これで、このような企業概要ページの表が完成です。