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

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

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

チャレンジ内容

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




使用するファイル

・チャレンジフォルダの中の「start」フォルダに入っている、「index.html」に記述していきましょう。




進め方

01.テーブルを作成するのに必要なタグを記述していこう

・<table>タグを記述します。
・テーブルのコンテンツ部分を作成するための<tbody>タグを書きます。
・テーブルの項目名となる<th>タグを書きます。
・説明となる部分の<td>タグを書きます。
・行を示すための<tr>タグで<th>、<td>タグを囲みます。



02.テーブルの行をコピー&ペーストで増やして文字の修正をしよう

・1行目の<tr>タグをコピーして、2行目、3行目を作成していきます。
・3行目の文章は、こちらをを使ってください。



本社
〒000-0000
京都市京都ダミー町00-00


東京オフィス
〒000-0000
東京都東京ダミー町00-00


Head Office
〒000-0000
00-00 dummy-cho Kyoto-shi, Kyoto<br><br>


Tokyo Office
〒000-0000
00-00 dummy-cho Tokyo-to, Tokyo






・3行目の所在地の部分は、「本社」「東京オフィス」を太字にしたいので<b>タグで囲みます。
・必要な場所に<br>タグを入れて改行させましょう。





03.表を作るボックスの横幅をしていしよう

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




このような手順で進めて、企業概要ページ作りにチャレンジしましょう。