HTML テーブルのレイアウト-htmlチュートリアル-php.cn

HTML テーブルのレイアウト

PHPz

リリース： 2024-09-04 16:54:32

オリジナル

671 人が閲覧しました

HTML ドキュメント内のテーブルのレイアウトは、width プロパティを使用して設定でき、プロセス内でテーブルの幅を変更せずに制限できるため、コンテンツがセル内にどれだけ長く入っているか、ブラウザの表示に関係なく固定されます。設定は。または、table-layout として知られる HTML プロパティを使用することもできます。

table-layout プロパティは、テーブル、テーブルのセルと列をレイアウトする際にブラウザが使用する一連の命令を定義するのに役立ちます。

つまり、テーブルレイアウトプロパティには、テーブルをレイアウトするためにブラウザに与えられるアルゴリズムが含まれていると言えます。テーブルレイアウトプロパティにはさまざまな値を設定できますが、それは完全にユーザーの選択によって決まります。 table-layout プロパティを使用しない場合、ブラウザーはいくつかのルールを自動的に適用し、セルと列のレイアウト方法を定義します。これらのルールは、table-layout プロパティの値が「auto」に設定されている場合にも適用されます。

構文:

以下は、table-layout プロパティの簡単な構文です。

ObjectName
{
table-layout: auto|fixed|initial|inherit;
}

ログイン後にコピー

HTML テーブルレイアウトの値

テーブルレイアウトプロパティに使用される値は、上で説明したように、プログラマのデザインと好みの選択に完全に依存し、変化します。以下は、table-layout プロパティと一緒に使用できる値です。

1.自動

「auto」は、table-layout プロパティの「デフォルト」値です。つまり、プログラマが table-layout プロパティを定義しなくても、ブラウザはテーブルとテーブルのセルと列のレイアウトを定義するために「自動」制約を使用します。表と表のセルの幅はセル内の内容によって異なります。つまり、表の幅はセル内の最大の内容に応じて調整され、維持されることはありません。

以下は、値として「auto」を使用した table-layout を示す例です。

例

この例では、テーブルの幅が 100% で、テーブルレイアウトの値が「auto」に設定されているテーブルを示しています。

コード:

<body>
<h2>The <code>table-layout</code> property demo</h2>
<table>
<thead>
<tr>
<th>table-layout demo</th>
<th>table-layout demo</th>
<th>table-layout demo</th>
<th>table-layout demo</th>
</tr>
</thead>
<tbody>
<tr>
<td>This text is much bigger content for the demo. Adding more text here. More text being added here.</td>
<td>table-layout demo</td>
<td>table-layout demo</td>
<td>table-layout demo</td>
</tr>
<tr>
<td>table-layout demo</td>
<td>table-layout demo</td>
<td>table-layout demo</td>
<td>table-layout demo</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>table-layout demo</td>
<td>table-layout demo</td>
<td>table-layout demo</td>
<td>table-layout demo</td>
</tr>
</tfoot>
</table>
</body>

ログイン後にコピー

出力:

HTML テーブルのレイアウト

表の幅はセルの内容に応じて調整されており、最初の列は 2 行目最初のセルの大きな内容に応じて調整されていることに注意してください。一方、他の列には同じ内容が含まれるため、均等に分割されます。

2.修正されました

その名前が示すように、「固定」値は、col 要素 (存在する場合) の事前定義された幅とテーブルの幅に従って、テーブルとその列の幅を定義します。値が「固定」であるこのプロパティは、テーブルのセルの最初の行の幅によって決定することもできます。セルの残りの幅は重要ではなく、テーブルの幅に影響を与えません。

テーブルの幅に「auto」(デフォルト値) の代わりに何らかの値を指定する必要があります。以下の例では、幅は 100% に設定されています。

例 #1

上記で作成したものと同じテーブルを使用しますが、table-layout を「固定」値に設定し、テーブル幅を 100% に設定します。プログラムで定義されている CSS 値は次のとおりです。HTML コードは同じです。

コード:

table {
width: 100%;
margin: 10px auto;
table-layout: fixed;
}

ログイン後にコピー

出力:

HTML テーブルのレイアウト

注 #1: コンテンツに応じて「auto」プロパティ値を使用する場合のように、コンテンツはテーブルの幅を決定しません。「固定」値を使用すると、ブラウザはプログラマによって定義された幅 (存在する場合) を使用します。そうでない場合、セル内のコンテンツの長さに関係なく、列の幅は均等に分割されます。以下は、table-layout:fixed プロパティを使用したもう 1 つの例です。 注 #2: 幅が 100% に設定されているため、テーブルはコンテナー全体に広がり、列の幅を均等に分割します。

例 2

この例は、table-layout を固定プロパティとして使用する際に、セルの固定幅がどのように重要であり、その影響があるかを示しています。

ここでは、表示の違いを誇張するために、デモの目的で最初のセルの幅を 400px に設定します。ここで、他のすべてのセルが同じ内容を持っているため、プロパティ値「fixed」が他のセルに影響を与えないことに注目してください。

HTML テーブルのレイアウト

例 #3

次に、以下の例を見てください。この表は上記と同じですが、他のセルの 1 つにはるかに大きなコンテンツがあり、幅が 250px に設定されています。

プロパティが auto に設定されているかどうかに注意してください。

table {
width: 100%;
margin: 10px auto;
table-layout: auto;
}

ログイン後にコピー

出力:

HTML テーブルのレイアウト

ただし、ここで「fixed」プロパティが使用されると、それに応じてテーブルが切り替わります。

table {
width: 100%;
margin: 10px auto;
table-layout: fixed;
}

ログイン後にコピー

It does not touch the fixed width of the first cell.

HTML テーブルのレイアウト

Divides the rest of the table equally, no matter the content.[Text Wrapping Break]

There are two more values that are Global Values.

initial: This value when used, sets the property to the default initial value.
inherit: You can also inherit a table layout design or property from a parent element.

Since when we use the ‘fixed’ table layout algorithm or layout method, your complete table gets rendered as soon as the browser receives the table’s first row and analyzes it. If the table is really large, users will only be able to see the table’s top row if the ‘fixed’ layout method is used which puts up a good effect on users, giving them the impression that the table is getting loaded faster.

以上がHTML テーブルのレイアウトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。