アジェンダ

HTMLのタグ
- table
- tr
- td
- thead
- tbody
- tfoot
HTMLの属性
- border
- colspan
実践

HTMLのタグ

table

テーブルであることを示すタグ。

tr

テーブルのうち、ひとつ分の行であることを示すタグ。
table recordのtr。

td

テーブルのうち、ひとつ分のセルであることを示すタグ。
table dataのtd。

thead

テーブルのヘッダーであることを示すタグ。

tbody

テーブルの内容であることを示すタグ。

tfoot

テーブルのフッターであることを示すタグ。

※thead,tbody,tfootを使用することで、"theadとtfootを固定し、tbodyの箇所だけスクロールする"のようなことができる。

htmlの属性

border

枠線の太さを指定するのに用いる属性。
HTML5では1のみ指定できる。

※HTML Living Standardによると、border属性は廃止された。

参考 : HTML Living Standard - とほほのWWW入門

colspan

同じ行の、複数のセルを結合させるのに用いる属性。
値には結合させるセルの個数を記載する。

実践

上記のタグ・属性を用いて、以下のindex.htmlを作成した。

index.html

<!DOCTYPE html>

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>外部ファイル</title>
  </head>
  <body>
    <h1>外部ファイルに関するタグと属性のまとめ</h1>
    <hr>
    <p>今後HTMLを書いていく際、どのタグにどの属性を書くのかわからなくなる予感がしたため、表でまとめた。
      <table border="1">
        <thead>
        <!-- 一行目. -->
        <tr>
          <td></td>
          <td>img</td>
          <td>link</td>
          <td>script</td>
          <td>iframe</td>
        </tr>
        </thead>
        <tbody>
          <!-- 二行目. -->
          <tr>
            <td>type</td>
            <td></td>
            <td>〇</td>
            <td>〇</td>
            <td></td>
          </tr>
          <!-- 三行目. -->
          <tr>
            <td>title</td>
            <td>〇</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <!-- 四行目. -->
          <tr>
            <td>rel</td>
            <td></td>
            <td>〇</td>
            <td></td>
            <td></td>
          </tr>
          <!-- 五行目. -->
          <tr>
            <td>href</td>
            <td></td>
            <td>〇</td>
            <td></td>
            <td></td>
          </tr>
          <!-- 六行目. -->
          <tr>
            <td>src</td>
            <td>〇</td>
            <td></td>
            <td>△</td>
            <td>〇</td>
          </tr>
          <!-- 七行目. -->
          <tr>
            <td>alt</td>
            <td>〇</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
        <tfoot>
          <!-- 八行目. -->
          <tr>
            <td colspan="5">以上。</td>
          </tr>
        </tfoot>
      </table>
    </p>
  </body>
</html>

これをWebブラウザに表示させるとこんな感じ。

前回作った表を再現することができた。
しかし、thead,tbody,tfootの効果は確認できなかった。

おわりに

今回は表に関する内容だった。
うまくコメントをつけないと、表が大きくなった際にコードの可読性が低くなってしまいそうだ。

次回 >> ☆まだ☆

参考

6-1 行とセル（HTMLのテーブル）
6-2 テーブルのヘッダーとフッター（HTMLのテーブル）