はじめに

HTMLでテーブルを作成する際、列幅の指定等に使う <colgroup> と、データを格納する <tbody> の配置を適切に行わないとうまく反映されません。最近少し手こずったので、記事にして忘れないようにしたいと思います。

テーブルの正しい構造と自動補完の注意点

HTMLでテーブルを記述する際、<colgroup> で各列の幅やスタイルを指定できる。仕様に沿って正しい順序で記述しなければ、レイアウトがうまく設定されない。

以下のコードが適切な構造。

        <table>
            <colgroup> <!--列幅の指定--> </colgroup>
            <tbody>
                <!--テーブルの中身-->
            </tbody>
        </table>

このように、<table> タグ直後に <colgroup> を記述し、その後に <tbody> で中身を囲むのが正しい。

一方、次の例のように <tbody> の前に <colgroup> を記述せず、<tbody> 内に <colgroup> を配置してしまうと、スタイルが反映されなくなる。（ブラウザが自動補完してくれる可能性もあるのかも？）

        <table>
            <tbody>
            <colgroup> <!--列幅の指定--> </colgroup>
            <!--テーブルの中身-->
            </tbody>
        </table>

また、以下の例はテーブルの中身が <tbody> で囲われていない。ブラウザは自動補完機能により内部的に <tbody> を挿入する。が、その際に意図しない配置となることもあるかも。

        <table>
            <colgroup> <!--列幅の指定--> </colgroup>
            <!--テーブルの中身-->
        </table>

自動補完機能は記述ミスを補ってくれるありがたい仕組みだけど、開発者ツールなどで生成されたHTMLの構造を確認し、意図通りに <colgroup> と <tbody> が配置されているかどうかを確認した方がよいかも。

おわりに

最近、少し手こずってました。こうやってまとめる簡単なんですが、サーバーサイドでの動的な挿入など、コードが複雑になってしまっていました。自動補完されるのも知らなかったので勉強になりました。