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

どうもhiroakiです。

今回はWEBページに表（table）を追加する方法を紹介します。

ここではHTML言語を使用します。

※はてなブログで書く場合を想定しますので、CSSは用いません。

本当にCSSは使えないのか？詳しい方がいらっしゃればお教えください。

さて先日、下記の記事を書きました。 

hiroakies.hatenablog.com

記事の中で、「色は16進数で表現する」として下の表を用意しました。

今回これと同様のものを作れるようにしたいと思います。

簡単なのでぜひ覚えてくださいね。

完成イメージ

作り方

①まずは記事編集欄の「HTML編集」へ移動してください。コードを書きましょう。

②次に表を作るうえで、基本的なことを理解してもらいます。

下記コードを追加してみてください。

1. <table>
2.     <tr></tr>
3.     <tr></tr>
4. </table> 

ちなみに、これだけでは表になりません。

説明していきます。

<table>は表全体の枠組みを作るものです。必ず</table>で締めくくってくださいね。

<tr>はTable Raw（表の列）の略です。tableタグでは列をひとつずつ連結して、表を作っていきます。なので縦に連結していくと覚えてください。

さきほどのコードは下のようなイメージになります。

tr

tr

 ③次に先ほど作ったコードに<th>タグと<td>タグを追加していきます。下記を参考に、コードを追加してください。

1. <table>
2.     <tr>
3.      <th></th>
4.      <th></th>
5.     </tr>
6.     <tr>
7.      <th></th>
8.      <td></td>
9.     </tr>
10. </table>

下記のものができれば成功です。プレビュー画面で確認してみてください。

解説します。

<th>はTable Header（表の見出し）の略です。特になくても構いませんが、プレビューを見ても分かる通り、薄い影がつき分かりやすいですね。

<td>はTable Data（表のデータ）の略です。ここにデータを入力していきます。

ここでは、１つの列（tr）にそれぞれ２つのタグを追加しています。そのため、２列２行の表になります。タグの数を増やせば１列ごとに行数が増えていきます。試しに増やしてみてください。また、<th>タグや<td>タグに「<th>あいう</th>」などと入力してみてください。うまく表示されれば成功です。

これで表の大まかな概念については終了です。

表が作れるだけでも、WEBページで色々なことを効果的に伝えられるので便利ですね。

③次に、<thead>と<tbody>タグを追加していきます。

1. <table>
2.  <thead>
3.   <tr>
4.     <th></th>
5.     <th></th>
6.    </tr>
7.  </thead>
8.  <tbody>
9.   <tr>
10.    <th></th>
11.    <td></td>
12.   </tr>
13.  </tbody>
14. </table>

どうでしょうか。見た目は変わりませんね(笑)

しかし、これも意外と重要なんです。

解説します。

<thead>はヘッダを示します。

<tbody>はボディを示します。

今回は出てきませんが、<tfoot>タブもあります。フッタを示します。

これらは表の行をグループ化するタグです。<tr>は列でしたね。行ごとにまとめて扱うことができるわけです。

タグを分けることで、ブラウザがヘッダとフッタを先読みして表示したり、ヘッダとフッタを固定したままボディ部分だけをスクロールさせたりすることもできます。

④次に、ページの初めで示した「完成イメージ」をもう一度確認してください。

先ほど作ったコードに書き込んでいきます。表を４列３行へ、それから文字を追加してください。どうですか？似たような表は作れましたか？

ここは確認の意味でも自力でやってみましょう。

⑤最後になります。ここでは細かいレイアウトを変更していきます。赤字の部分を追加しましょう。

1. <table style="font-size: 130%;">
2. <thead style="border: solid; border-bottom: none;">
3. <tr>
4. <th>色</th>
5. <th>10進数</th>
6. <th>16進数</th>
7. </tr>
8. </thead>
9. <tbody style="border: solid; border-top: none;">
10. <tr>
11. <th>Red</th>
12. <td>0~255</td>
13. <td>00~FF</td>
14. </tr>
15. <tr>
16. <th>Green</th>
17. <td>0~255</td>
18. <td>00~FF</td>
19. </tr>
20. <tr>
21. <th>Blue</th>
22. <td>0~255</td>
23. <td>00~FF</td>
24. </tr>
25. </tbody>
26. </table>

では、style属性について説明します。

style属性は「style=""」で記述します。「""」内に様々な属性を追加すれば、表のレイアウトが作れます。

最初にfont-sizeを指定します。これはなくてもいいですが、見やすくなるように文字を拡大します。「~px」とピクセルでも大きさを指定できますが、パソコンとスマートフォンのUIの横幅が異なるため、「~%」で指定するのがおススメです。

borderは「border:線の型 線の太さ 色;」の形で指定します。このうち、全てを指定しなくてもいいや、という場合は上記のように線の型だけ指定したり、太さだけ指定したりして使います。完成イメージの場合はsolid（１重線）だけを指定します。

borderの指定だけだと、<thead>と<tbody>の間に線が入ってしまうので、<thead>の下と<tbody>の上の線をnoneと指定して消します。

また記述の際は、セミコロン（;）を忘れないようにしてください。

以上で完成です。コードは自分で書いてみるとしっくりきますので、ここで書いたことを自分でも試してみてください。

ご質問やご指摘は下記コメント欄へお願いします。

次回以降は、最後に説明したレイアウトについて補足説明したいと思います。 

では。