HTMLのtfoot-htmlチュートリアル-php.cn

HTMLのtfoot

PHPz

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

オリジナル

1098 人が閲覧しました

ご存知のとおり、HTML の tfoot は表形式のデータ表現に table と呼ばれる要素を使用します。これは、、などの要素で構成されます。、など。その中にはは、テーブル列の概要部分を表示するためのテーブル内の重要な要素の 1 つです。

タグは、、の後に配置する必要があります。テーブル内のタグ。このタグはの前に表示できます。または

の後にまたは要素。表内に複数のページが存在する場合、これらの要素は、ユーザーがページの下部に表のフッターを配置し、表の内容を個別にスクロールするのに役立ちます。

構文

を定義するための構文タグは次のとおりです:

<table>
<thead>
<tr>….</tr>
</thead>
<tbody>
<tr>….</tr>
<tr>….</tr>
</tbody>
<tfoot>
<tr>
<td>….</td>
</tr>
</tfoot>
</table>

ログイン後にコピー

上記の構文から、タグ内に囲まれたテキストはテーブルのフッターとして扱われます。タグには 1 つ以上のが含まれる場合があります。要素。

タグはさまざまな属性をサポートしています。1 つずつ見てみましょう:

align: この属性は、コンテンツを参照してテキストを整列させるのに役立ちます。

valign: これらの属性は、コンテンツをテキストの垂直方向の配置に揃えるのに役立ちます。

char: に関する重要な属性の 1 つ。タグは、ヘッダーセル内のテキストをその文字に合わせて配置するために使用されます。

Charoff: これは、char 属性の設定に使用されるもう 1 つの重要な属性です。このような種類の属性は数値形式で定義されます。

の位置を決めることができます。左揃え、セルの中央揃え、セルの右揃えなどの値を定義してタグを作成したり、テキストコンテンツの周囲に特定のスペース0020を挿入または両端揃えしたり、最小限のオフセットで特殊文字を使用してテキストコンテンツを配置するための char など

このタグは、次のようなさまざまな CSS プロパティで使用できます:

text-align: このプロパティは、テキストコンテンツを使用して、フッターのテキストを左、右、両端揃え、中央揃えに直接配置するのに役立ちます。

bgcolor: 表のセルをより魅力的にするために、このプロパティは列のセルの背景として色を設定するのに役立ちます。

font-style: 内に含まれるテキストにスタイルを与えることができます。タグ。フォントの値を通常、斜体、イニシャル、継承などとして設定できます。

font-size: ユーザーは、このスタイル設定プロパティを使用して、必要に応じてテキストをさまざまなサイズで表示できます。

font-weight: テキストを太字にするか斜体にするかを決定できます。

text-transform: このプロパティは、テキストの大文字化を表示したり、テキストの大文字と小文字を制御したりするのに役立ちます。

text-decoration: 内に含まれるテキストを装飾したい場合。タグを付けて、このプロパティを text-decoration line、text-decoration-style、text-decoration-color などに使用できるようにします。

text-shadow: このプロパティは、テキストに影を追加するのに役立ちます。

line-height: 指定された行の高さを設定すると便利です。

word-spacing: 単語間に特定のスペースを与えることが重要なプロパティの 1 つです。

HTML は tfoot でどのように動作しますか?

要素はと組み合わせて使用されます。そしてこれにより、ヘッダー、フッター、本文などのテーブルのすべての要素が定義されます。このタグは 1 つ以上のを使用します。内の要素要素なので、テーブルの内容の概要を表示するのに役立ちます。テーブルの一番下に置く必要があります。の主な働きは次のとおりです。タグは、大きなテーブルデータを維持するために使用されます。これにより、ユーザーはテーブルの内容を独立して表示できるようになり、より使いやすさを実感できるようになります。

がどのように正確に行われるかを示す一例を見てみましょう。 HTML で機能するタグ:

例:

<table>
<thead>
<tr>
<th>Emp_ID<th>
<th>Name<th>
<th>Designation<th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>John</td>
<td>Developer</td>
</tr>
<tr>
<td>112</td>
<td>Krishna</td>
<td>Tester</td>
</tr>
<tr>
<td>113</td>
<td>Danish</td>
<td>Project Manager</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Employee</td>
<td> 3 </td>
</tr>
</tfoot>
</table>

ログイン後にコピー

上記の例では、タグはテーブルの従業員の合計数を表示します。

HTML での tfoot の例

HTML での tfoot の例を以下に示します。

例 #1

ここでは、通常のを使用した Budget-2020b の例を示します。タグ:

コード:

<!DOCTYPE html>
<html>
<head>
<style>
thead {
background-color:cadetblue;
color: #fff;
}
tbody {
background-color: lightcyan;
}
table {
border-collapse: collapse;
border: 2px solid rgb(180, 180,180);
}
td,
th {
border: 1px solid rgb(200, 200, 200);
padding: 5px 5px;
}
td {
text-align: left;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Decreasing Prices</th>
<th >Increasing Prices</th>
</tr>
</thead>
<tbody>
<tr>
<td>SOYA PROTEIN</td>
<td>CONSUMERS HAVE TO SHELL MORE FOR CHEMICALS</td>
</tr>
<tr>
<td >SOYA FIBRE</td>
<td>AUTO PARTS</td>
</tr>
<tr>
<td >ALCOHOLIC BEVERAGES</td>
<td>FANS, TABLEWARE </td>
</tr>
<tr>
<td >SKIMMED MILK </td>
<td>KITCHENWARE PRICES TO </td>
</tr>
<tr>
<td >FUSE, CHEMICALS, PLASTICS</td>
<td>MEDICAL EQUIPMENT COSTLIER</td>
</tr>
<tr>
<td >LIGHTWEIGHT-COATED PAPER </td>
<td>FURNITURE </td>
</tr>
</tbody>
<tfoot>
<tr>
<th>CHEAPER PRODUCTS</th>
<th>EXPENSIVE PRODUCTS</th>
</tr>
</tfoot>
</table>
</body>
</html>

ログイン後にコピー

出力:

HTMLのtfoot

例 #2

ここではが定義されています。とすぐにタグを付けます。終了:

コード:

<!DOCTYPE html>
<html>
<head>
<title>HTML tfoot Tag</title>
<style>
table{
border-collapse: collapse;
}
thead,tfoot{
background-color:darkgoldenrod;
color:white;
padding:5px;
}
tbody{
background-color:azure;
padding:5px;
}
</style>
</head>
<body>
<h4>tfoot in HTML</h4>
<table border="1" >
<thead>
<tr>
<th>Subject</th>
<th>Marks</th>
<th>Grades</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Total Marks</th>
<th>647</th>
<th>A+ </th>
</tr>
</tfoot>
<tbody>
<tr>
<td>English</td>
<td>90</td>
<td>A+</td>
</tr>
<tr>
<td>Math</td>
<td>85</td>
<td>A</td>
</tr>
<tr>
<td>Science</td>
<td>80</td>
<td>A</td>
</tr>
<tr>
<td>History</td>
<td>75</td>
<td>B</td>
</tr>
<tr>
<td>Social Science</td>
<td>75</td>
<td>B</td>
</tr>
<tr>
<td>History</td>
<td>72</td>
<td>B</td>
</tr>
<tr>
<td>Geography</td>
<td>95</td>
<td>A+</td>
</tr>
<tr>
<td>Biology</td>
<td>75</td>
<td>B</td>
</tr>
</tbody>
</table>
</body>
</html>

ログイン後にコピー

出力:

HTMLのtfoot

Example #3

General Example on tfoot tag.

Code:

<!DOCTYPE html>
<title>tfoot tag</title>
<style>
table, td, th {
border: 1px solid black;
padding: 3px;
text-align: center;
}
table {
background-color:lightgray;
}
</style>
<table>
<thead>
<tr><th>Department</th><th>Number of People</th></tr>
</thead>
<tbody>
<tr>
<td>Principle</td>
<td>1</td>
</tr>
<tr>
<td>Supervisor</td>
<td> 4 </td>
</tr>
<tr>
<td>Teaching staff</td>
<td>200</td>
</tr>
<tr>
<td>Non-Teaching staff</td>
<td>20</td>
</tr>
<tr>
<td>Peon</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr><th>Total People</th><th>236</th></tr>
</tfoot></table></html>

ログイン後にコピー

Output:

HTMLのtfoot

Conclusion

From all the above information, we can say that is one of the important tags in the table, which helps to display the table summary at the bottom of the table. It’s always necessary to put tag at ends, so it will help the browser to render the table footer correctly.

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