JINMUSOFTWARE

JINMUSOFTWARE

Tableタグのまとめ

公開日: / 最終更新日: / カテゴリ: HTML / 投稿者: yoshida

tableタグが苦手だったので調べてみました。

テーブルを構成する基本のタグ

<table>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>物1</td>
    <td>物2</td>
    <td>物3</td>
  </tr>
</table>
table
列1 列2 列3
物1 物2 物3

全ての行はtrタグに包まれていますね。

thタグは見出しです。

tdタグは内容物、データですね。

thタグの考察

thタグは行でも列でも指定できる

thタグを先頭行に置いたり、各行の先頭に置いたりできます。

table1
列1 列2 列3
物1 物2 物3
物1 物2 物3
table2
列1 列2 列3
物1 物2 物3
物1 物2 物3

thタグは行と列に同時に指定しも良い

table1
列1 列2 列3
物1 物2 物3
物1 物2 物3

要素に線を引く

thタグ、tdタグにborderを引いてみました。

th, td
列1 列2 列3
物1 物2 物3
物1 物2 物3 
<style>
.border1 th, .border1 td{
  border:1px solid #505050d0;
}
</style>

tableタグにもborderを引いてみる

table, th, td
列1 列2 列3
物1 物2 物3
物1 物2 物3

trタグに線は引きませんでした。borderプロパティの効果は無いようです。

tr
列1 列2 列3
物1 物2 物3
物1 物2 物3

ただし、border-collapse: collapse; のプロパティを与えるとborderが有効になります。

trタグには、background-colorは効きました。タグごとに、条件ごとに、有効なプロパティがあります。

Captionタグ

お題を付加できます。表の場合何等かの方法で表題を用意するのがユーザに優しいと考えます。

ただし、figure要素の唯一の子孫がtable要素の場合はfigcaptionを使用する。

2022年8月14日のテスト結果でございます。
氏名国語算数電子
橋本327698
相沢788313
小倉327698
47.378.369.7
  • captionの配置は、caption-sideプロパティで、テーブルの上か下に配置できる。
  • captionの幅はテーブルの長さに依存する。captionの幅がtable要素の幅より短い場合は折り返される。このときcaption要素に折り返し禁止の処置をすると、table要素の幅が合わせて伸長する。

Table要素には、head, body, footer の概念がある

theadタグ、tbodyタグ、tfootタグのことです。

tbody は、明確に記述しなくとも、ブラウザが自動生成している。ブラウザのウェブ開発ツールとかデベロッパーツールから確認できる

使用方法としては、thead固定してtbodyスクロールする、リーダでtbodyだけ読み上げる、などの使い道を想像します。

<style>
.table345 thead {background-color:#a0f1a8c3;}
.table345 tfoot {background-color:#e3e3e3d0;}
.table345{font-size:0.9rem;}
</style>

<table class="table345">
<caption>thead, tfootに配色した表</caption>
<thead>
    <tr>
        <th>氏名</th>
        <th>国語</th>
        <th>算数</th>
        <th>電子</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th>橋本</th>
        <td>32</td>
        <td>76</td>
        <td>98</td>
    </tr>
    <tr>
        <th>相沢</th>
        <td>78</td>
        <td>83</td>
        <td>13</td>
    </tr>
    <tr>
        <th>小倉</th>
        <td>32</td>
        <td>76</td>
        <td>98</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td></td>
        <td>47.3</td>
        <td>78.3</td>
        <td>69.7</td>
    </tr>
</tfoot>
</table>
thead, tfootに配色した表
氏名国語算数電子
橋本327698
相沢788313
小倉327698
47.378.369.7

colgroupタグとcolタグ

列のグループ化を指定します。

colgroupタグ内のcolタグで列をグループ化します。今回はクラスを割り当てて配色しています。

<table class="">
<caption>2022年8月テスト結果</caption>
<colgroup>
    <col />
    <col span="3" class="bunkei" />
    <col span="3" class="risukei" />
</colgroup>
<thead>
<tr>
    <td></td>
    <th scope="col">国語</th>
    <th scope="col">哲学</th>
    <th scope="col">社会</th>
    <th scope="col">算数</th>
    <th scope="col">電子</th>
    <th scope="col">物理</th>
</tr>
</thead>
<tbody>
<tr>
    <th scope="row">橋本</th>
    <td>84</td>
    <td>48</td>
    <td>57</td>
    <td>87</td>
    <td>12</td>
    <td>92</td>
</tr>
<tr>
    <th scope="row">相沢</th>
    <td>86</td>
    <td>88</td>
    <td>42</td>
    <td>42</td>
    <td>22</td>
    <td>32</td>
</tr>
<tr>
    <th scope="row">小倉</th>
    <td>78</td>
    <td>64</td>
    <td>82</td>
    <td>78</td>
    <td>50</td>
    <td>78</td>
</tr>
</tbody>
<tfoot>
<tr>
    <th scope="row">ave</th>
    <td>82.7</td>
    <td>66.7</td>
    <td>60.3</td>
    <td>69.0</td>
    <td>28.0</td>
    <td>67.3</td>
</tr>
</tfoot>
</table>
2022年8月テスト結果
国語 哲学 社会 算数 電子 物理
橋本 84 48 57 87 12 92
相沢 86 88 42 42 22 32
小倉 78 64 82 78 50 78
ave 82.7 66.7 60.3 69.0 28.0 67.3

もう一つの列グループの指定方法。colタグとは同時には指定できない。

<colgroup span="1"></colgroup>
<colgroup span="3" class="bunkei"></colgroup>
<colgroup span="3" class="risukei"></colgroup>

colタグを使用したほうが確認しやすいかなと感じます。

table-layoutプロパティ

tableのレイアウトに使用されるアルゴリズムを選択する。tableタグに指定するプロパティ。

「auto」は、中身の幅に合うように調整される。

「fixed」は、最初のセルの幅の割合によって決まる。次の行の中身があふれる可能性がある。1行目が読み込まれた時点でレンダリング可能となる。