この記事では、HTML のさまざまなテーブル属性の概要を紹介します (コード付き)。困っている人はぜひ参考にしてください。
ここでは、将来の便宜のために、主にテーブルのいくつかの属性と単純なスタイルを要約して記録します。
1.この属性は境界線のスタイルを制御しませんが、table 要素には tr、th、td、tbody、tfoot、colgroup 要素を含めることができます 2、
に使用されます。テーブルの行を定義します。 HTML テーブルは行指向であるため、各行は table、thead、tbody、および tfoot 要素内で使用できます。tr 要素には、その align 要素、bgcolor 要素、および th 要素を含めることができます。他の属性は廃止されました。属性を設定したい場合は、CSS 設定を使用してください
3,
はテーブルのセルを定義するために使用され、colspan、rowspan、および headers のローカル属性で使用できます
( 1)colspan: 列のスパン、この属性はセルがまたがることができる列の数を指定します。この属性の値は整数である必要があります。
(2) rowspan: 行のスパン、この属性はセルがまたがる行の数を指定します。セルは複数にまたがることができます。この属性の値は整数である必要があります (3)headers: この属性の値は 1 つ以上のセルの ID 属性値であり、セルを列ヘッダーに関連付け、スクリーン リーダーで使用できます。 ⚠️: 各テーブルには上記の 3 つの要素が含まれている必要があります簡単な例
<!DOCTYPE html><html>
<body>
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
</body></html></p>
<p></p> 結果は次のとおりです。 <p></p>
<p>中古タイトル セルを定義するため、データとその説明を効果的に区別します </p>
<p> これは <<span style="color: #ff0000">td<strong>> 要素と同じローカル属性を持ちますが、この 2 つは次の違いがあります: </p>
<p></p>
<p class="cnblogs_code"><th> ; はヘッダー タグで、通常は最初の行または最初の列に配置されます。 <th> のテキストはデフォルトで太字になりますが、<td> はセルの特定のデータを示すデータ マークです </p>
<p></p>
<p></p> 5. ;thead><p><img src="https://img.php.cn/upload/article/000/000/009/2ac2324be3decdfc293a5dbb2e9c15f4-0.png" alt="" style="max-width:90%" style="max-width:90%"></p> テーブルのヘッダー、テーブルヘッダーのラッパーを定義するために使用されます。 1 つ以上の行を定義できます。これらの行は table 要素の列ラベルです。thead 要素がない場合、すべての tr はテーブルの本体に属しているとみなされます。テーブルの本体 <p><strong>7, <tfoot></strong></p>
<p> マークされたテーブル </p>
<p>⚠️ のフッターを定義するために使用されます: <strong></strong><strong></strong><tr>タグ内 </p>
<ol class=" list-paddingleft-2">
<li><p><thead> タグは、<table> タグ内のどこに配置されても、それぞれテーブルの先頭と末尾に設定されます。 <tfoot> は <tbody<tr> の前または後に指定できます。 html5 より前では、<tfoot> 要素は <tbody> 要素の後に配置する必要があります</p></li>
<li>。 8. <colgroup><p></p>
</li> は、テーブルの列グループを定義するために使用されます。これを使用して、特定の列にスタイルを適用することもできます。もちろん、ローカル属性の span で後述の Col 要素を使用することもできます。 <colgroup> で表されます。列グループがまたがる列の数。デフォルトは 1 つの列です。つまり、<colgroup> の代わりに 1 つ以上の <col> 要素を含めることができます。グループを定義するために、span 属性を直接設定します</ol>
<p>; <col> にはローカル属性も含まれます<strong></strong>; <col> は、<colgroup> の列を表します。グループ。このタグを使用して、列のグループとグループの単一の列にスタイルを適用します</p>
<p></p>10、<caption><p></p>
<p> テーブルのタイトルを定義するために使用され、各テーブルには <caption> 要素を 1 つだけ含めることができます。 <strong> </strong>簡単な例: </p>
<p></p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html><html>
<head>
<style>
thead th,tfoot th {
text-align: left;
background: grey;
color: white }
tbody th {
text-align: right;
background: lightgrey;
color: grey }
/* tbody td {
background: greenyellow;
} */
#colgroup1 {
background-color: blueviolet }
#col3 {
background-color: yellow;
font-size: small }
</style>
</head>
<body>
<table>
<colgroup id="colgroup1">
<col id="collAnd2" span="2"/>
<col id="col3"/>
</colgroup>
<colgroup id="colgroup2" span="2"></colgroup>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th colspan="2">Size & Votes</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Rank Footer</th>
<th>Name Footer</th>
<th>Color Footer</th>
<th colspan="2">Size And Votes Footer</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Favorite:</th>
<td>XML</td>
<td>CSS</td>
<td>Java</td>
<td>IOS</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Web</td>
<td>HTML5</td>
<td>CS</td>
<td>460</td>
</tr>
</tbody>
</table>
</body></html>コードを表示
効果は次のとおりです:
以上がHTML のさまざまなテーブル属性の概要 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
