Tableタグのまとめ
![](https://www.jinmusoftware.com/wp-content/uploads/2022/08/934228ccc0e0abb56d9c4073610fe955.png)
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>
列1 | 列2 | 列3 |
---|---|---|
物1 | 物2 | 物3 |
全ての行はtrタグに包まれていますね。
thタグは見出しです。
tdタグは内容物、データですね。
thタグの考察
thタグは行でも列でも指定できる
thタグを先頭行に置いたり、各行の先頭に置いたりできます。
列1 | 列2 | 列3 |
---|---|---|
物1 | 物2 | 物3 |
物1 | 物2 | 物3 |
列1 | 列2 | 列3 |
---|---|---|
物1 | 物2 | 物3 |
物1 | 物2 | 物3 |
thタグは行と列に同時に指定しも良い
列1 | 列2 | 列3 |
---|---|---|
物1 | 物2 | 物3 |
物1 | 物2 | 物3 |
要素に線を引く
thタグ、tdタグにborderを引いてみました。
列1 | 列2 | 列3 |
---|---|---|
物1 | 物2 | 物3 |
物1 | 物2 | 物3 |
<style>
.border1 th, .border1 td{
border:1px solid #505050d0;
}
</style>
tableタグにもborderを引いてみる
列1 | 列2 | 列3 |
---|---|---|
物1 | 物2 | 物3 |
物1 | 物2 | 物3 |
trタグに線は引きませんでした。borderプロパティの効果は無いようです。
列1 | 列2 | 列3 |
---|---|---|
物1 | 物2 | 物3 |
物1 | 物2 | 物3 |
ただし、border-collapse: collapse;
のプロパティを与えるとborderが有効になります。
trタグには、background-colorは効きました。タグごとに、条件ごとに、有効なプロパティがあります。
Captionタグ
お題を付加できます。表の場合何等かの方法で表題を用意するのがユーザに優しいと考えます。
ただし、figure要素の唯一の子孫がtable要素の場合はfigcaptionを使用する。
氏名 | 国語 | 算数 | 電子 |
---|---|---|---|
橋本 | 32 | 76 | 98 |
相沢 | 78 | 83 | 13 |
小倉 | 32 | 76 | 98 |
47.3 | 78.3 | 69.7 |
- captionの配置は、caption-sideプロパティで、テーブルの上か下に配置できる。
- captionの幅はテーブルの長さに依存する。captionの幅がtable要素の幅より短い場合は折り返される。このときcaption要素に折り返し禁止の処置をすると、table要素の幅が合わせて伸長する。
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>
氏名 | 国語 | 算数 | 電子 |
---|---|---|---|
橋本 | 32 | 76 | 98 |
相沢 | 78 | 83 | 13 |
小倉 | 32 | 76 | 98 |
47.3 | 78.3 | 69.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>
国語 | 哲学 | 社会 | 算数 | 電子 | 物理 | |
---|---|---|---|---|---|---|
橋本 | 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行目が読み込まれた時点でレンダリング可能となる。