HTMLのテーブルレイアウトの実用的な使い方を解説

テーブルを使用する場合

Webページの全体的なレイアウトにテーブルを使うことは、もはや一般的ではありません。しかし、フォームの入力やデータの表示など、特定のデザインに直面した場合には、テーブルが最も適切な選択となることがあります。

テーブルというと、複数のセルを行と列がはっきり見えるように整然と並べた要素というのが直感的なイメージだろう。これはExcelを連想させるものであり、Webページにおける表の意義は、Excelがデータ処理や統計学に位置づけられることで理解できるだろう。

簡単に言えば、行と列という概念で複数の要素が配置されていることが直感的に感じられると、表はとても使いやすくなるのです。caniuse.comでテーブルを適用した例として。

テーブルレイアウト計算

テーブルを使うのは簡単ですが、テーブルが各セルの状態をレンダリングしてしまうことがあり、それはあなたの望むものとは違うかもしれません。例えば、あるセルが改行されると、その改行のために表全体が非常に見苦しくなってしまうのです。特にデータの提示に使われるテーブルでは、幅の割り振りは重要なテーマで、提示される可能性のあるデータの列ごとにテーブルの総幅を微調整する必要があるかもしれません。

なぜなら、テーブルにはレイアウト上の特徴があり、計算上では一定の原則に従って実際のレイアウトが決定されるからです。次に、テーブルがどのように独自のレイアウトを計算するのか、実際のテーブルのテスト例を用いて探っていきます。
初期宣言

この記事では、テーブルの適用方法として最も一般的なものだけを取り上げており、すべてのケースを列挙するわけではありません。テーブルの概念の中には、ブラウザによって解析が異なるものがありますが、レイアウトの計算方法は基本的に同じです（違いがある場合は、別途記載しています）。

次に使用するテストテーブルは、このような外観で表示されます（内容はZero Tracksから引用しています）。

また、テーブルは border-collapse:collapse; と border-spacing:0; に設定されています。これもテーブルを適用する際の最も一般的な方法であり、Normalize.cssではこの部分を初期化定義として使用しています。
2つのアルゴリズム

cssプロパティtable-layoutは、<table>要素で定義され、レイアウトが計算されるときにテーブルに適用されるアルゴリズムを決定します。これは、autoとfixedの2つの値を持っています。一般的には、デフォルトの値であるautoが使用されます。

この2つのアルゴリズムの違いは、テーブルの幅のレイアウトがテーブル内のデータ内容に関係しているかどうかです。この記事では、この2つの値を別々にとった場合のテーブルのレイアウトの計算原理について説明します。
テーブルの自動レイアウト-auto

自動テーブルレイアウトは、テーブル内のすべてのデータコンテンツに関連するテーブル幅のレイアウトを特徴とし、最終的な幅のレイアウトを決定する前にすべてのテーブルコンテンツを取得し、それを一緒に表示する必要があります。

つまり、ポイントは "コンテンツ依存"です。もし、テーブルに固定幅（この場合は500px）が定義されていて、すべてのセルに幅が定義されていない（cssで定義された幅だけ）場合はどうでしょうか？結果をご覧ください。

この上の表では、空白部分を&nbsp;スペースで表記しています。比較すると、次のようになる。

    2列目と3列目は同じ幅です。
    1列目の幅とそれ以降の列の幅の比率は2:1になるようです。
    ボーダーとインナーマージンを加えると、すべての列の幅を合計したものがテーブル定義の幅に等しくなります。

各セルの幅は定義されていませんので、幅のレイアウトはすべて特定のコンテンツデータ（テキスト情報）によって決定されます。このような結果をどう解釈すればよいのでしょうか。というロジックを直感的に推測することから始めることができます。

    ステップ1では、最も多くのテキストを持つ列（改行せずにテキストが占める幅が最も広い列と理解する）を、各列から「代表」quot;representative"として選択します。
    手順2：各列の"代表"の幅を比較し、その幅に比例して、枠や余白を含む表の全幅に割り当てる。

上記の理屈を踏まえた上で、先ほどの表を振り返ってみると、何か見えてきませんか？幅の比率が2:1になっているようだと書いてありますが、これはどうでしょう？余白を取り除いたバージョンを見てみましょう。

フロントエンドデバッグツールで上のセルの幅を具体的に見てみると、テーブルが以前とは異なり、比率が2：1に非常に近くなっていることがわかります（そう、ボーダーのせいでまだ少し残っていますが、ボーダーがなければ列を区別する方法はありません）。

このように、幅と比率の関係を分析する際には、コンテンツの幅と内側の余白、そしてボーダーが考慮されていることがおわかりいただけると思います。このことからも、文字数ではなく、テキストが改行せずに占めることのできる幅が重要であることがわかります（ここでいう2：1とは、漢字が等幅であることに由来しています）。内余白の使用は、当然ながら見栄えの良い表を作るためだけです :)。

幅の定義がある場合はどうなるのでしょうか？ここでは、いくつかのセルに幅が定義されている表を示します。

その対応するhtmlコードは

この上の表から、次のことがわかります。

    幅が5pxに設定されているセルは、実際には漢字1文字分の幅である13pxで描画され、同じ列の漢字のあるセルは、セル幅が最小になるように（つまり改行するように）配置されています。
    幅が200pxに設定されているセルは、同じ列で幅70pxという別の定義があるにもかかわらず、実際には幅200pxでレンダリングされます。
    列3は、正確な幅の定義を持っていませんが、列1と2が割り当てられた後、テーブルの残りの幅を完全に取得することになります。

このことから推察すると、幅が定義されている列とされていない列の両方が存在する場合、「幅が定義されている列は、幅が定義されていない列とされている。

    セル定義の幅がその内容の最小整列幅（セル内で可能な限り多くの行を改行せずに整列させたときに必要な幅）より小さい場合、そのセルが配置されている列はすべてその内容を最小整列で描画することになります。
    同じ列のセルの内容がその列の最大幅の定義より小さい場合、その列の実際の幅はその幅の定義と同じになる（改行しない形で、この言葉は後で意味を持つ）。
    幅の定義がない列は、幅の定義がある列に割り当てられた後、まずテーブルによって幅が割り当てられる（ここでも、両者の比率はコンテンツの幅に依存する）。

一番上の幅の定義がないものはケース1、幅の定義がある列とない列があり、これはケース2と見ることができます。ここでは、すべてのカラムに幅の定義がある場合、ケース3として見ることができます。

対応するhtmlコードです。

上の表では、内側の余白が取り除かれているので、この3列の幅の比率は、幅の定義値で2：1：1であることがよくわかる。ここでもう一つ条件がある。それは、セル内のコンテンツの幅が幅の定義値を超えないことである。テストしたところ、IE7以下のブラウザでは、コンテンツが幅の定義値を超えると、他のブラウザとは異なる動作をすることがわかりました。

この表の例からわかるように、すべての列に幅の定義があり、それらの幅の定義値の合計が表の幅より小さい場合、表はそれらの幅の定義値に対応する幅を割り当てた後、残りの幅も、それらの幅に比例して割り当て続けます。

以上、テーブルレイアウトが自動で行われ、テーブル自体の幅が固定で定義されている場合の3つのケースを分析しました。表自体が幅を定義していない場合は、もっと多くのケースがあり、それらは表の含むブロック（詳細）に関連しているので、適切な機会（いわゆる記事スペースが限られている...）があれば後ほど説明します。
テーブルのレイアウトを修正しました。

固定テーブルレイアウトの特徴は、テーブル内のデータ内容に依存せず、テーブルの最初の行の情報を受け取るだけで最終的な幅のレイアウトを決定し、表示を開始することです。

固定テーブルレイアウトは、コンテンツに依存せず、1行目を強調したレイアウトです。次のテーブルの例を見てください。

対応するhtmlコードです。

固定テーブルレイアウトのロジックはもっとシンプルで、次のように表現されます。

    最初の行の情報のみを取り、最初の行以降のすべてのセルの内容を無視し、幅の定義も無視する。
    最初の行で、セルに幅の定義がある場合、まず必要な幅を割り当て、残りの幅を幅の定義がないセルに均等に割り当てる。
    最初の行のセルの幅の割り当てがテーブルの幅のレイアウトを決定し、最初の行以降のものはレイアウトを再び変更することはない。

また、固定テーブルレイアウトを使用する場合、テーブル要素の幅を定義する必要があり、その幅が定義されていない場合（すなわち、自動デフォルト）、ブラウザは代わりに自動テーブルレイアウトを使用することに注意してください。
宣言の終了

テーブル関連では、実は <colgroup>, <thead>, <tfoot>, <caption> などの要素がありますが、これは最も一般的な使い方では必要ないだけのものです。実際、これらは表のレイアウト計算にも考慮されています。さらに、セルのマージもあるため、テーブルのレイアウト計算が実際にどれほど複雑であるか、想像がつくでしょう。

W3Cのドキュメントでは、テーブルレイアウトの計算（自動テーブルレイアウト）はまだ主流ではないことに言及しています。W3Cのテーブルレイアウト計算については、Table width algorithmsを参照してください。
結論

テーブルレイアウトの計算原理について、ここまで細かく推論するのはあまり現実的ではありません。ただ、その可能性は低いですが、細かい作業をする必要があるときに参照できる情報として持っておくと便利です。

しかし、この記事の内容については、より意味のある結論が導き出されます。テーブルが幅を定義し、すべてのセルが幅を定義しない場合、自動レイアウトのテーブルはすべてのデータをできるだけ改行しないようにし、もし改行が美観に影響する状況に遭遇したら、もう一度自分で幅指定をやり直すのではなく、データを効率化するか余白を少なくしなければならないことを意味するのです。

今回、このような実戦的なテストや外挿を行うことで、体系的に一度に全てを表現するのではなく、おそらく一種の言語訓練として、特定の状況に応じて分解してから説明した方が理解しやすいように感じられますが、いかがでしょうか？