yucatio@システムエンジニア

趣味で作ったものいろいろ

htmlのテーブルに使われるタグが覚えられないと思ったときに読む記事

こんにちは。htmlのtable関連タグが覚えられないブログ主です。特に<tr><td>がごちゃごちゃです。が、それぞれの何の英単語の略であるかを覚えたところ、ごちゃごちゃにならずにすみました。今回はそれぞれ何の英語の略なのかと、日本語訳を紹介します。

テーブルの略語タグの略さない名称と日本語での解説

タグ名 何の略か 解説
tr Table Row テーブルの横の行。"row"は"横の行"のこと。
th Table Head テーブルの見出し。"head"は"頭"の意味もありますが、ここでは"見出し"の意味です。
td Table Data テーブルの(個々の)データ。

f:id:yucatio:20200104173533p:plain

rowspanとcolspan

テーブルのセルを結合するrowspanとcolspanも覚えにくいですね。colspanは"column span"の略です。

横の行のことを"row"といい、縦の列を"column"といいます。"row"は"人が並んだ列"の意味もあります。横のイメージですね。"column"は"柱"という意味があります。こちらは縦のイメージですね。

"span"は、"長いスパンで考える"などで使われる"スパン"です。"期間"という意味でも使われますが、htmlの属性では、"(端から端までの)全長"という意味で使用されています。が、全長だと長い方をさす方が多いので、ここでは"太さ"という略語をあてます。

例えば、rowspan="2"であれば、行の太さが2なので、縦に連結されます。

また、colspan="3"であれば、列の太さが3なので、横に連結されます。

f:id:yucatio:20200104173218p:plain

上記テーブルのソースコードはこちらです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>テーブルタグ確認</title>
    <style type="text/css">
      table {border-collapse: collapse; margin: 40px 20px;}
      th, td {border:1px solid #333; padding: 3px 5px;}
      td.number {text-align:right;}
      thead {background-color: #7fbfff; color: #fff;}
      tfoot {background-color: #eee;}
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>品名</th><th>単価</th><th>数量</th><th>金額</th><th>消費税</th>
        </tr>
      </thead>
        <tr>
          <td>鉛筆</td><td class="number">30</td><td class="number">12</td><td class="number">360</td><td rowspan="2" class="number">10%</td>
        </tr>
        <tr>
          <td>消しゴム</td><td class="number">50</td><td class="number">6</td><td class="number">300</td>
        </tr>
      <tbody>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">合計</td><td class="number">660</td><td></td>
        </tr>
        <tr>
          <td colspan="3">消費税</td><td class="number">66</td><td></td>
        </tr>
        <tr>
          <td colspan="3">合計</td><td class="number">726</td><td></td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

あとがき

htmlのタグや属性には他にも英語を略したものが使われているので、調べてみると覚えやすくなると思います。