【HTML】tableの割り当てを工夫したい...!

2022年4月9日 2022年4月9日

どーも！

たかぽんです！

今回は最近ふとこれどうやるんだ？ってなったものについて書いていきます...!

さて、それでは早速いってみます...!

1 tableで一部のみ項目分けしないようにしたかった
2 うまくできたパターン！
3 うまくいかなかったパターン
4 応用パターン！
5 まとめ

tableで一部のみ項目分けしないようにしたかった

さて、まず筆者が何をしたかったのか？ですが...

HTMLにてtable要素を使用して、以下のような感じで配置したかったんですね...

普通は全ての行・列が対応して区画分けされてしまい、うまくいかないんですが...

解決策と応用についてしらべたので、書いていきますね...!

また、今回使用するコードは以下、codepenのHTML枠にそのまま（styleも含め）コピペして動作の確認が可能です。

合わせて動作も確認してみてください...!

Code Penで試してみる！

うまくできたパターン！

さて、結論はさっさとお伝えしていきます...!

上記ができたパターンが以下です。(検証のための区切り用のstyleも混ぜています。）

<style>
table, th, td {
  border:1px solid black;
}
</style>

<table>
  <thead>
  <tr>
    <th>カラム1</th>
    <th>カラム2</th>
    <th>カラム3</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>item1</td>
    <td>item2</td>
    <td>item3</td>
  </tr>
  <tr>
    <td colspan="3">文章........</td>
  </tr>
  </tbody>
</table>

はい、三行目に値するtr要素を見ていただければわかりますが、colspan属性を使用することでセルを結合した状態を作り出すことが可能なようです。

今回だと、tdに指定することで、3つ分のセルを結合したtdができるイメージでしょうか。

うまくいかなかったパターン

応用に移る前に筆者が手元で試してた例をいくつか置いておきます...w

こうしてもうまくいかん！ってことを反面教師としてご利用ください...w

(3行目のtrのみ変化するので、コードはそこのみ表記します）

td一つパターン

  <tr>
    <td>文章........</td>
  </tr>

枠は左側のカラムにあわせ、一つのみ。

td3つパターン

  <tr>
    <td>文章........</td>
    <td></td>
    <td></td>
  </tr>

それはそう。

colspan + から枠パターン

  <tr>
    <td colspan="3">文章........</td>
    <td></td>
    <td></td>
  </tr>

colspanだけで十分なのにさらにから枠二つ追加したパターン。

無理くり右にスペース作ってカラム用意される...

応用パターン！

さて、お恥ずかしい失敗例もみせたので、もう少し深掘りして知識つけておきます...w

colspanを2にしてみる

  <tr>
    <td colspan="2">文章........</td>
  </tr>

枠を二つ分結合するので、左から二つ分の一つの枠ができる。

三つ目は特になし。

colspanを2で、カラム3にも枠を作る

 <tr>
    <td colspan="2">文章........</td>
    <td>item4</td>
  </tr>

いい感じ...!

後ろ側に2つ分の結合した枠を持ってくる

<tr>
  <td>item4</td>
  <td colspan="2">文章........</td>
</tr>

仕組みが理解できてきた...

縦方向も混ぜてみる

ここから、上の行のtrも混ざります。

<tr>
  <td rowspan="2">item1</td>
  <td>item2</td>
  <td>item3</td>
</tr>
<tr>
  <td colspan="2">文章........</td>
</tr>

ちょっと挙動が複雑だけど、おそらくitem1の列を縦に結合し、次のtrで指定せずともtdが一つある想定になっている。

もし、以下のように後半のtrの方に合わせて3列分(colで結合した2列含む）あるとうまくいかなかった。

<tr>
  <td rowspan="2">item1</td>
  <td>item2</td>
  <td>item3</td>
</tr>
<tr>
  <td>item4</td>
  <td colspan="2">文章........</td>
</tr>

item1で列分, item4で一列分, 文章...で本当は2列分あるはずだが、全体の長さに収まらないので、colspanで縮小できる部分が縮小されていると思われる。

ロマンを求めすぎたパターン（おまけ）

<tr>
  <td>item1</td>
  <td rowspan="3">item2item2item2</td>
  <td>item3</td>
</tr>
<tr>
  <td colspan="3">item4item4item4</td>
</tr>
<tr>
  <td>item5</td>
  <td>item6</td>
</tr>