表の直感的な印象は、整然と配置された複数のセルから構成される要素であり、行と列が明確に見えるということです。これは、Excel のデータ処理と統計のステータスに基づいて、Web ページ上のテーブルの意味を理解することができます。
テーブルの使用は非常に簡単ですが、各グリッドのテーブルによって示される最終状態が希望どおりでない場合があります。たとえば、一部のグリッドに改行がある場合、改行のせいで表全体が非常に見苦しくなります。特にデータの表示に使用されるテーブルの場合、幅の割り当ては非常に重要なトピックです。グリッドの各列が表示するデータのテーブルの合計幅を慎重に計算する必要がある場合があります。
これは、テーブルのレイアウトに独自の特性があり、特定の原則に従って計算によって実際のレイアウトが決定されるためです。次に、この記事では実際のテーブル テストの例を使用して、テーブルが独自のレイアウトをどのように計算するかを調べます。
最初の声明
この記事では、テーブルを適用する最も一般的な方法のみに焦点を当てており、すべての状況をリストしているわけではありません。一部のテーブルの概念はブラウザによって解釈が異なりますが、レイアウトの計算は基本的に同じです (相違点がある場合は、個別に説明します)。
同時に、テーブルは border-collapse:collapse と border-spacing:0; を設定します。これは、テーブルを適用する最も一般的な方法でもあり、Normalize.css はこの部分を初期化定義として使用します。
2 つのアルゴリズム
要素で定義された css 属性 table-layout は、レイアウト計算でテーブルに適用されるアルゴリズムを決定します。これには、自動と固定の 2 つの値があります。通常の状況では、デフォルト値の auto が使用されます。
これら 2 つのアルゴリズムの違いは、テーブルの幅レイアウトがテーブル内のデータ内容に関連しているかどうかです。この記事では、これら 2 つの値におけるテーブルのレイアウト計算の原理について説明します。
自動テーブルレイアウト - 自動
自動テーブル レイアウトの特徴は、テーブルの幅レイアウトがテーブル内のすべてのデータ コンテンツに関連していることです。最終的な幅レイアウトを決定するには、テーブルのすべてのコンテンツを取得して、それをまとめて表示する必要があります。
この観点から見ると、重要なポイントは「コンテンツ関連」です。テーブルで固定幅 (ここでは 500px) が定義されているが、すべてのセルの幅が定義されていない場合はどうなるでしょうか (CSS で定義された幅についてのみ説明します)。結果を見てみましょう:
上表の空白部分はスペースで表記しています。比較すると、次の点がわかります:
列 2 と列 3 は同じ幅です。
最初の列の幅と後続の列の幅の比率は 2:1 のようです。
ボーダーとパディングを含む、すべての列の合計幅は、テーブルで定義された幅と等しくなります。
各セルには幅が定義されていないため、幅のレイアウトは特定のコンテンツ データ (テキスト情報) によって完全に決定されます。このような結果をどう説明すればよいでしょうか?まず、このロジックを直感的に推測できます:
ステップ 1、各列から最も多くのテキスト内容 (行の折り返しを除いたテキストの幅が最も広いものとして理解されます) を「代表」として選択します。
ステップ 2、各列の「代表」の幅を比較し、幅の比例関係に従って、ボーダーとパディングを含むテーブルの合計幅をそれらに割り当てます。
上記のロジックを参照して、前の表を見直してみましょう。先ほど、幅の比率が 2:1 であるように見えると言われましたが、これは 2:1 である可能性があります。パディングなしのバージョンを見てみましょう:
フロントエンド デバッグ ツールを使用して、上のセルの幅を詳しく見てみると、このテーブルが以前とは異なっており、比率が 2:1 に非常に近いことがわかります (はい、この小さな点です。は境界線が原因ですが、境界線では列を区別できません)。
幅の比率の関係を分析するときに、コンテンツの幅、パディング、ボーダーが考慮されることがわかります。これは、これが文字数の尺度ではなく、改行なしで文字が占めることができる幅の尺度であることも示しています (ここでの 2:1 は、中国語の文字の幅が等しいという事実から来ています)。当然のことながら、パディングを使用するのは単にテーブルをより美しくするためです:)。
幅の定義がある場合はどうなりますか?以下は、いくつかのセルの幅定義を示す表です:
対応する HTML コードは次のとおりです:
XML/HTML コードコンテンツをクリップボードにコピー
- <テーブル クラス="exhibit_table" >
- <tr>
-
<番目>一二 番目>
-
< 番目の スタイル="幅: 200px;"> 番目>
-
<番目> 番目>
- tr>
-
<tr>
-
<td style="width: 5px;"> td>
-
<td>td>
-
<td> td>
- tr>
-
<tr>
-
<td> td>
- <td style="width: 70px;"> td>
-
<td>一二三四td>
- tr>
-
テーブル>
上の表では次の点がわかります:
幅 5 ピクセルのセルの実際の幅は 13 ピクセルで、これはちょうど漢字 1 文字の幅です。同じ列に漢字があるセルは、最小セル幅の形式でテキストを配置します。行が変更されます）。
幅が 200px に設定されているセルは、同じ列に幅 70px の定義がありますが、実際の幅は 200px です。
3 番目の列には正確な幅が定義されておらず、列 1 と 2 を割り当てた後、最終的にテーブルの残りの幅全体が取得されます。
これは、幅定義のある列と幅定義のない列が存在する場合に次のように推論されます。
定義されたセルの幅が、その内容の最小配置幅 (非折り返し配置とは異なり、セル内にできるだけ多くの行を配置するときにセルに必要な幅) より小さい場合、セルが配置されている列に応じて、コンテンツは可能な限り最小の配置で表示されます。
同じ列内のセルの内容の幅 (行の折り返しなし、この言葉は後でこれを意味します) が列内の最大幅の定義より小さい場合、列の実際の幅は幅の定義と等しくなります。
幅定義のない列の場合、テーブルはまず幅定義のある列に幅を割り当て、次にそれらの列に幅を割り当てます (繰り返しますが、それらの間の比率はコンテンツの幅によって異なります)。
幅定義のない先頭の列はケース 1 と見なされます。ここの一部の列には幅定義がありますが、一部の列には幅定義がありません。これはケース 2 と見なされます。以下はケース 3、つまりすべての列に幅定義がある場合です:
対応する HTML コード:
XML/HTML コードコンテンツをクリップボードにコピー
-
<テーブル クラス="exhibit_table exhibit_table_with_no_padding">
-
<tr>
-
< 番目の スタイル="幅: 50px;"> 番目>
-
< 番目の スタイル="幅: 50px;"> 番目>
-
< 番目の スタイル="幅: 100px;"> 番目>
-
tr>
-
<tr>
-
<td> td>
-
<td> td>
-
<td> td>
- tr>
-
<tr>
-
<td> td>
-
<td> td>
-
<td> td>
-
tr>
-
テーブル>
上の表ではパディングが削除されているため、値は幅によって明確に定義でき、これら 3 つの列の幅の比率は 2:1:1 です。ここにはもう 1 つの条件があります。それは、セル内のコンテンツの幅が幅の定義値を超えないことです。テストの結果、IE7 以下では、コンテンツが幅の定義値を超えた場合、他のブラウザとは動作が異なります。
このテーブルの例から、すべての列に幅定義があり、これらの幅定義の値の合計がテーブルの幅より小さい場合、テーブルは引き続きその列に対応する幅を割り当て続けることがわかります。幅定義値には、幅に比例して残りの幅も割り当てられます。
上記は、自動テーブル レイアウトが定義されており、テーブル自体が固定幅である場合の 3 つの状況の分析です。テーブル自体が幅を定義しない場合は、テーブルの包含ブロック (詳細) に関連する状況がさらに多くなります。将来、適切な機会があれば、それについて説明します。という記事スペースは限られています…）。
テーブルレイアウトの修正 - 修正済み
固定テーブル レイアウトの特徴は、テーブルの幅レイアウトがテーブル内のデータの内容とは無関係であることです。テーブルの最初の行の情報を受け取って最終的な幅レイアウトを決定するだけで済みます。表示を開始します。
固定テーブル レイアウトは「コンテンツに依存しない」もので、「最初の行」が強調されます。次の表の例を参照してください:
対応する HTML コード:
XML/HTML コードコンテンツをクリップボードにコピー
-
<テーブル クラス="exhibit_table exhibit_table_fixed">
-
<tr>
-
< 番目の スタイル="幅: 50px;">番目>
-
<番目>一二 番目>
-
<番目>一二三四 番目>
-
tr>
-
<tr>
-
<td>艾丝蒂尔・布莱特< /td>
-
<td 幅="1000px; "> td>
-
<td> td>
- tr>
-
<tr>
-
<td style="width: 5px;"> td>
-
<td> td>
-
<td> td>
-
tr>
-
テーブル>
固定テーブル レイアウトのロジックは非常に単純で、次のように表現されます。
最初の行の情報のみを取得し、最初の行以降のすべてのセルの内容と幅の定義を無視します。
最初の行で、セルに幅の定義がある場合は、最初に必要な幅を割り当て、次に残りの幅は幅定義のないセルに均等に配分されます
最初の行のセルの幅の配分によって表の幅のレイアウトが決まり、最初の行以降の内容はレイアウトを変更しません。
固定テーブル レイアウトを使用する場合、テーブル要素の幅を定義する必要があることに注意することも重要です。幅が定義されていない場合 (つまり、自動のデフォルト値)、ブラウザは代わりに自動テーブル レイアウトを使用します。 。
終了ステートメント
テーブルに関連して、実際には
、、、 などの要素がありますが、最も一般的な使用法ではこれらは必要ありません。実際、これらはテーブルのレイアウト計算でも考慮されます。セルの結合の状況と合わせて、テーブル レイアウトの計算がいかに複雑であるかが想像できるでしょう。
W3C 文書には、テーブル レイアウト計算 (自動テーブル レイアウト) がまだ仕様になっていないと記載されています。 W3C によるテーブル レイアウト計算の説明については、「テーブル幅アルゴリズム」を参照してください。
結論
実際、テーブル レイアウトの計算原理に関する限り、そのような詳細な推論を行うことはあまり現実的ではありません。このような機会はあまりありませんが、細部を詰める際に参考にしていただければと思います。
ただし、この記事の内容に基づいて、より有意義な結論を導き出すことができます。テーブルが幅を定義し、すべてのセルが幅を定義していない場合、自動レイアウト テーブルはすべてのデータが幅を定義しないように最善を尽くします。改行が外観に影響を与える状況が発生した場合は、幅の割り当てを自分でやり直すのではなく、データを合理化するかマージンを減らす必要があることを意味します。
今回、このような実測と推論をしてみたのですが、一度に系統立てて説明するよりも、具体的な状況を噛み砕いて説明した方が分かりやすいのかもしれません。中国語の練習とみなされますか？
声明：この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
