HTML での表の幅と高さの調整の問題を解決する 3 つの方法

Web サイトを作成するときに、多くのプログラマーはテーブルを整列できないという問題に遭遇します。では、HTML でテーブルのセルの幅と高さを設定するにはどうすればよいでしょうか。 HTMLで表の幅と高さの配置を設定する3つの方法をまとめてみましょう。

プログラマが Web ページを作成しているとき、テーブルの幅がずれているという問題に遭遇することがよくあります。 HTML の table タグ table の高さと幅の設定の詳細を確認しましたが、次のように要約します。

1, table の幅と高さの設定とその機能: テーブルの高さの設定は実際には最小値を設定します。つまり、テーブルの内容または行の高さの合計がこの設定値を超えると、テーブルの高さの値は自動的に拡張されます。テーブルがこの値に達しない場合は、自動的にこの値まで拡張されます。テーブルに設定される幅の値は、通常、テーブル幅の最大値であり、内部コンテンツの幅がそれを超えても変更できません。 (内部コンテンツが画像の場合、テーブルの幅を変更できます。)

2. trタグの幅と高さの設定とその機能: trタグの幅の設定最初の点からわかるように、テーブルの幅は変更できず、当然 tr タグは機能しません。したがって、tr の高さ設定についてのみ議論できます。tr の高さ設定は、複数の tr 間の設定に関連します。複数の tr に特定の高さの値が設定されている場合、各 tr の高さは設定値に比例して全体の高さの値に割り当てられます。ここでは合計の高さの値を記載します。複数の TRS が特定の高さの値を設定していない場合、合計の高さの値は均等に分散されます。一部の TR に特定の値が設定されており、一部の TR にデフォルトとして特定の値が設定されていない場合は、まず各 TR の基本的なニーズを確認し、次に特定の値が設定された残りの TR を満たしてから、すべての TR を満たします。特定の値が設定されていない場合。最後のケースでは、合計幅が tr の合計設定値に対して十分でない状況も考慮する必要があります。十分でない場合は、テーブルの高さが自動的に満たされます。ここに延長されました。次に高さを設定した tr を考え、最後に高さを設定していない tr を考えます。

3.

td タグの幅と高さの設定とその機能 : td タグの幅と高さはすべて有効です。まず td の幅を見てみましょう。特定の td の幅は、列内の各 td の幅に関係します。これが最も混乱する点です。ここで、特定の TD の幅を全体的な観点から把握する必要があります。この幅の設定からその幅を決定することはできません。各列の幅を把握すると、扱いやすくなります。このとき、各 TD 間の幅の配分は、2 番目の記事の各 tr の高さ配分ルールに基づいています。1 つの違いは、デフォルトでは、各 TD の幅が均等に配分されるのではなく、実際の比率に応じて配分されることです。コンテンツを配布します。 td の高さの設定を見てみましょう。これは比較的単純ですが、各 td の高さは、その行内の各 td の高さを決定する行の最大の高さに依存します。各行の高さの割り当ての原理は同じです。もう 1 つ注意すべき点は、td の高さと tr の高さの関係です。まず、コンテンツのニーズに基づいて、一方に設定値があり、もう一方に設定値がない場合は、どちらか大きい値が使用されるかが決定されます。設定値がある場合は、その設定値が使用されます。

1、従来の方法を使用します。

 <table width="400"> 
<tr> 
<td width="100"></td> 
<td width="100"></td> 
<td width="100"></td> 
<td width="100"></td> 
</tr> 
<table>

2、css を使用します。

<style>
.td{width:100px;}
</style>
<table width="400"> 
<tr> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
</tr> 
<table>

上記 2 つの方法で考えられる問題は、コンテンツが次の値を超えている場合です。画像の幅が100より大きい場合は自然に拡大して表の幅を自動調整します

3、cssを使って位置を揃えます

<style>
.td{width:100px;overflow:hidden}
</style>
<table width="400"> 
<tr> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
<td class="td"></td> 
</tr> 
<table>

このようにして余分な部分を厳密に制御する必要がある場合は、overflow の属性値をscrollまたはautoに設定すると、このメソッドを使用できます。オーバーフローの属性値をスクロールまたは自動に設定します。調整する場合はスクロール バーを使用します。

上記は、HTML におけるテーブルの幅と高さの配置の問題を解決する 3 つの方法の完全な紹介です。HTML チュートリアルについて詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がHTML での表の幅と高さの調整の問題を解決する 3 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。