HTMLテーブルレイアウトの実践徹底解説_HTML/Xhtml_Webページ制作-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLテーブルレイアウトの実践徹底解説_HTML/Xhtml_Webページ制作

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:36 PM

html シート

フォームはいつ使用されますか

現在、テーブル

は Web ページ全体のレイアウトに使用されなくなりました。ただし、フォーム入力やデータ表示など、特定のデザインに直面した場合には、テーブルが最も適切な選択となる場合があります。

表の直感的な印象は、整然と配置された複数のセルから構成される要素であり、行と列が明確に見えるということです。これは、Excel のデータ処理と統計のステータスに基づいて、Web ページ上のテーブルの意味を理解することができます。

簡単に言うと、複数の要素が行と列に配置されていることが直感的にわかる場合、表を使用すると非常に簡単になります。 caniuse.com の申請フォームの例:
2015728173924594.png (470×175)

テーブルレイアウト計算

テーブルの使用は非常に簡単ですが、各グリッドのテーブルによって示される最終状態が希望どおりでない場合があります。たとえば、一部のグリッドに改行がある場合、改行のせいで表全体が非常に見苦しくなります。特にデータの表示に使用されるテーブルの場合、幅の割り当ては非常に重要なトピックです。グリッドの各列が表示するデータのテーブルの合計幅を慎重に計算する必要がある場合があります。

これは、テーブルのレイアウトに独自の特性があり、特定の原則に従って計算によって実際のレイアウトが決定されるためです。次に、この記事では実際のテーブルテストの例を使用して、テーブルが独自のレイアウトをどのように計算するかを調べます。
最初の声明

この記事では、テーブルを適用する最も一般的な方法のみに焦点を当てており、すべての状況をリストしているわけではありません。一部のテーブルの概念はブラウザによって解釈が異なりますが、レイアウトの計算は基本的に同じです (相違点がある場合は、個別に説明します)。

次に使用されるテストフォームは次のように表示されます (内容は Zero Track から取得されます):
2015728173942365.jpg (535×183)

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

要素で定義された css 属性 table-layout は、レイアウト計算でテーブルに適用されるアルゴリズムを決定します。これには、自動と固定の 2 つの値があります。通常の状況では、デフォルト値の auto が使用されます。

これら 2 つのアルゴリズムの違いは、テーブルの幅レイアウトがテーブル内のデータ内容に関連しているかどうかです。この記事では、これら 2 つの値におけるテーブルのレイアウト計算の原理について説明します。
自動テーブルレイアウト - 自動

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

この観点から見ると、重要なポイントは「コンテンツ関連」です。テーブルで固定幅 (ここでは 500px) が定義されているが、すべてのセルの幅が定義されていない場合はどうなるでしょうか (CSS で定義された幅についてのみ説明します)。結果を見てみましょう:
2015728174002286.jpg (538×116)

上表の空白部分はスペースで表記しています。比較すると、次の点がわかります:

列 2 と列 3 は同じ幅です。
最初の列の幅と後続の列の幅の比率は 2:1 のようです。
ボーダーとパディングを含む、すべての列の合計幅は、テーブルで定義された幅と等しくなります。

各セルには幅が定義されていないため、幅のレイアウトは特定のコンテンツデータ (テキスト情報) によって完全に決定されます。このような結果をどう説明すればよいでしょうか?まず、このロジックを直感的に推測できます:

ステップ 1、各列から最も多くのテキスト内容 (行の折り返しを除いたテキストの幅が最も広いものとして理解されます) を「代表」として選択します。
ステップ 2、各列の「代表」の幅を比較し、幅の比例関係に従って、ボーダーとパディングを含むテーブルの合計幅をそれらに割り当てます。

上記のロジックを参照して、前の表を見直してみましょう。先ほど、幅の比率が 2:1 であるように見えると言われましたが、これは 2:1 である可能性があります。パディングなしのバージョンを見てみましょう:
2015728174128545.jpg (558×87)

フロントエンドデバッグツールを使用して、上のセルの幅を詳しく見てみると、このテーブルが以前とは異なっており、比率が 2:1 に非常に近いことがわかります (はい、この小さな点です。は境界線が原因ですが、境界線では列を区別できません)。

幅の比率の関係を分析するときに、コンテンツの幅、パディング、ボーダーが考慮されることがわかります。これは、これが文字数の尺度ではなく、改行なしで文字が占めることができる幅の尺度であることも示しています (ここでの 2:1 は、中国語の文字の幅が等しいという事実から来ています)。当然のことながら、パディングを使用するのは単にテーブルをより美しくするためです:)。

幅の定義がある場合はどうなりますか?以下は、いくつかのセルの幅定義を示す表です:
2015728174212099.jpg (553×142)

対応する 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、つまりすべての列に幅定義がある場合です:
2015728174233994.jpg (549×98)

対応する 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 つの状況の分析です。テーブル自体が幅を定義しない場合は、テーブルの包含ブロック (詳細) に関連する状況がさらに多くなります。将来、適切な機会があれば、それについて説明します。という記事スペースは限られています…）。
テーブルレイアウトの修正 - 修正済み

固定テーブルレイアウトの特徴は、テーブルの幅レイアウトがテーブル内のデータの内容とは無関係であることです。テーブルの最初の行の情報を受け取って最終的な幅レイアウトを決定するだけで済みます。表示を開始します。

固定テーブルレイアウトは「コンテンツに依存しない」もので、「最初の行」が強調されます。次の表の例を参照してください:
2015728174250768.jpg (551×165)

対応する 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>
テーブル>

固定テーブルレイアウトのロジックは非常に単純で、次のように表現されます。

最初の行の情報のみを取得し、最初の行以降のすべてのセルの内容と幅の定義を無視します。
最初の行で、セルに幅の定義がある場合は、最初に必要な幅を割り当て、次に残りの幅は幅定義のないセルに均等に配分されます
最初の行のセルの幅の配分によって表の幅のレイアウトが決まり、最初の行以降の内容はレイアウトを変更しません。

固定テーブルレイアウトを使用する場合、テーブル要素の幅を定義する必要があることに注意することも重要です。幅が定義されていない場合 (つまり、自動のデフォルト値)、ブラウザは代わりに自動テーブルレイアウトを使用します。。
終了ステートメント

テーブルに関連して、実際には

、、、