どーも！
たかぽんです！
今回は最近ふとこれどうやるんだ？ってなったものについて書いていきます...!
さて、それでは早速いってみます...!
目次
tableで一部のみ項目分けしないようにしたかった
さて、まず筆者が何をしたかったのか？ですが...
HTMLにてtable要素を使用して、以下のような感じで配置したかったんですね...
普通は全ての行・列が対応して区画分けされてしまい、うまくいかないんですが...
解決策と応用についてしらべたので、書いていきますね...!
また、今回使用するコードは以下、codepenのHTML枠にそのまま（styleも含め）コピペして動作の確認が可能です。
合わせて動作も確認してみてください...!
うまくできたパターン！
さて、結論はさっさとお伝えしていきます...!
上記ができたパターンが以下です。(検証のための区切り用の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>厨二心が抑えられなかったので十字結合してみた。
縦方向の3マス結合、横方向の3マス結合が重なって表示されて使い物にはならなそうだった。
ちなみに、横方向３マス結合の文章起点はカラム1の二行目(item4...）縦方向3マスの結合の文章起点は中央のカラム2の2行目(item2...)。
結合時、縦と横で衝突はしないほうがよさそう...
まとめ
というわけで...!
今回はHTMLのテーブルの扱いについて少し深掘りしてみました...!
HTMLでテーブルを結合すればいい感じに配置を工夫できそうでしたね...!
そもそもそう言うケースになかなか出会わなかったので全然知りませんでした...
今後はできることがわかったので大きな一歩を踏み出せました...!
ぜひみなさんも必要になったら試してみてください！