HTMLのtfoot

ご存知のとおり、HTML の tfoot は表形式のデータ表現に table と呼ばれる要素を使用します。これは、

、 などの要素で構成されます。 、 など。その中には は、テーブル列の概要部分を表示するためのテーブル内の重要な要素の 1 つです。

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

構文

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

….….….

….

上記の構文から、

タグ内に囲まれたテキストはテーブルのフッターとして扱われます。タグには 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 で機能するタグ:

例:

Emp_ID		Name		Designation
111	John	Developer
112	Krishna	Tester
113	Danish	Project Manager
Total Employee	3

上記の例では、

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

HTML での tfoot の例

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

例 #1

ここでは、通常の

を使用した Budget-2020b の例を示します。タグ:

コード:

<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>

Decreasing Prices	Increasing Prices
SOYA PROTEIN	CONSUMERS HAVE TO SHELL MORE FOR CHEMICALS
SOYA FIBRE	AUTO PARTS
ALCOHOLIC BEVERAGES	FANS, TABLEWARE
SKIMMED MILK	KITCHENWARE PRICES TO
FUSE, CHEMICALS, PLASTICS	MEDICAL EQUIPMENT COSTLIER
LIGHTWEIGHT-COATED PAPER	FURNITURE
CHEAPER PRODUCTS	EXPENSIVE PRODUCTS

出力:

例 #2

ここでは

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

コード:

<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>


<h4 id="tfoot-in-HTML">tfoot in HTML</h4>

Subject	Marks	Grades
Total Marks	647	A+
English	90	A+
Math	85	A
Science	80	A
History	75	B
Social Science	75	B
History	72	B
Geography	95	A+
Biology	75	B

出力:

Example #3

General Example on tfoot tag.

Code:

<title>tfoot tag</title>
<style>
table, td, th {
border: 1px solid black;
padding: 3px;
text-align: center;
}
table {
background-color:lightgray;
}
</style>

Department	Number of People
Principle	1
Supervisor	4
Teaching staff	200
Non-Teaching staff	20
Peon	15
Total People	236

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