やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

HTML文書をつくる11 データ構造 テーブル(table, caption, thead, tfoot, tbody, colgroup, col, tr, th, td)

 表をつくる。

要素一覧

要素 概要
<table> 二次元の表をつくる。
<caption> 表キャプション
<thead> 表のヘッダ部分であることを示す
<tfoot> 表のフッタ部分であることを示す
<tbody> 表のボディ部分であることを示す
<colgroup> 列のグループ
<col>
<tr>
<th> 見出しセル
<td> データセル

HTMLを書いてみる

一行目を見出しセルにする

<table>
    <tr>
        <th>見出し1</th>
        <th>見出し2</th>
    </tr>
    <tr>
        <td>データ1</td>
        <td>データ2</td>
    </tr>
</table>
見出し1 見出し2
データ1 データ2

一列目を見出しセルにする

<table>
    <tr>
        <th>見出し1</th>
        <td>データ1</td>
    </tr>
    <tr>
        <th>見出し2</th>
        <td>データ2</td>
    </tr>
</table>
見出し1 データ1
見出し2 データ2

上辺と左辺を見出しセルにする

<table>
    <tr>
        <th>見出し11</th>
        <th>見出し12</th>
        <th>見出し13</th>
    </tr>
    <tr>
        <th>見出し21</th>
        <td>データ22</td>
        <td>データ23</td>
    </tr>
    <tr>
        <th>見出し31</th>
        <td>データ32</td>
        <td>データ33</td>
    </tr>
</table>
見出し11 見出し12 見出し13
見出し21 データ22 データ23
見出し31 データ32 データ33

全部盛り

<table>
    <caption>表1 <strong>なんかの表</strong></caption>

    <colgroup span=2 bgcolor=#FFFF00></colgroup>
    <colgroup>
        <col bgcolor=#00FFFF></col>
        <col span=2 bgcolor=#00FF00></col>
    </colgroup>

    <thead>
        <tr>
            <th>見出し1</th>
            <th>見出し2</th>
            <th>見出し3</th>
            <th>見出し4</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>データ1</td>
            <td>データ2</td>
            <td>データ3</td>
            <td>データ4</td>
        </tr>
    </tbody>

    <tfoot>
        <tr><th colspan=4>Powered by ytyaru</th></tr>
    </tfoot>
</table>
表1 なんかの表
見出し1 見出し2 見出し3 見出し4
データ1 データ2 データ3 データ4
Powered by ytyaru

所感

 <colgroup><col>はあるのに<rowgroup><row>はない。このことから、ヘッダは横にあるものであって、縦にあるのは想定外ということかと読み取れる。でもそれでは縦と横の両方にヘッダがあるマトリクス図はどうするんだ? 書けないことはない。ただ所定の位置に<th>を書けばいいだけ。でも縦のヘッダはグループ化できない。モヤモヤする。

対象環境

$ uname -a
Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux