こんにちは。htmlのtable関連タグが覚えられないブログ主です。特に<tr>
と<td>
がごちゃごちゃです。が、それぞれの何の英単語の略であるかを覚えたところ、ごちゃごちゃにならずにすみました。今回はそれぞれ何の英語の略なのかと、日本語訳を紹介します。
テーブルの略語タグの略さない名称と日本語での解説
タグ名 | 何の略か | 解説 |
---|---|---|
tr | Table Row | テーブルの横の行。"row"は"横の行"のこと。 |
th | Table Head | テーブルの見出し。"head"は"頭"の意味もありますが、ここでは"見出し"の意味です。 |
td | Table Data | テーブルの(個々の)データ。 |
rowspanとcolspan
テーブルのセルを結合するrowspanとcolspanも覚えにくいですね。colspanは"column span"の略です。
横の行のことを"row"といい、縦の列を"column"といいます。"row"は"人が並んだ列"の意味もあります。横のイメージですね。"column"は"柱"という意味があります。こちらは縦のイメージですね。
"span"は、"長いスパンで考える"などで使われる"スパン"です。"期間"という意味でも使われますが、htmlの属性では、"(端から端までの)全長"という意味で使用されています。が、全長だと長い方をさす方が多いので、ここでは"太さ"という略語をあてます。
例えば、rowspan="2"
であれば、行の太さが2なので、縦に連結されます。
また、colspan="3"
であれば、列の太さが3なので、横に連結されます。
上記テーブルのソースコードはこちらです。
<!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のタグや属性には他にも英語を略したものが使われているので、調べてみると覚えやすくなると思います。