HTML thead タグの定義と使用法の詳細な紹介

HTML thead タグの定義と使用法の詳細な紹介

コードをコピー
コードは次のとおりです。

<thead> <!– 最初の 2 行をヘッダー領域として扱います–>
<tr>
<td rowspan=”2″></td>
<td rowspan=”2″></td>
<td rowspan=”2″></td>
<td colspan=”3″></td>
<td スコープ=”col” 列スパン=”2″ 行スパン=”2″></td>
</tr>
</thead>

このコード内のコメント <thead> <!– 最初の 2 行をヘッダー領域として扱う –> で、最初の 2 行がヘッダー領域として扱われると書かれているのはなぜでしょうか。thead 要素自体がデフォルトで 2 行になっているということでしょうか。それとも何か他の理由があるのでしょうか?
また、scope="col" はスコープを列にロックすることを意味しますか?これをやる意味は何ですか?
これは rowspan="2" と組み合わせる必要があります。thead は単にテーブル ヘッダーを表します。

HTML <thead> タグ<br />定義と使用法:
<thead> タグはテーブル ヘッダーを定義します。このタグは、HTML テーブルのヘッダー コンテンツをグループ化するために使用されます。
thead 要素は、tbody 要素および tfoot 要素と組み合わせて使用​​する必要があります。
tbody 要素は HTML テーブル内の本文コンテンツをグループ化するために使用され、tfoot 要素は HTML テーブル内のキャプション (フッター) コンテンツをグループ化するために使用されます。
注意: thead、tfoot、tbody 要素を使用する場合は、すべてを使用する必要があります。これらは thead、tfoot、tbody の順序で表示されるため、ブラウザはすべてのデータを受信する前にフッターをレンダリングできます。これらのタグはテーブル要素内で使用する必要があります。
ヒント: デフォルトでは、これらの要素はテーブルのレイアウトに影響しません。ただし、CSS を使用してこれらの要素によってテーブルの外観を変更することができます。
詳細な説明:
thead、tfoot、tbody 要素を使用すると、テーブル内の行をグループ化できます。テーブルを作成するときは、ヘッダー行、データを含むいくつかの行、および下部の合計行が必要になるでしょう。この分割により、ブラウザはテーブル ヘッダーとフッターとは独立してテーブル本体のスクロールをサポートできるようになります。長いフォームを印刷する場合、テーブル データを含む各ページにテーブル ヘッダーとフッターが印刷されることがあります。
例: thead、tbody、tfoot 要素を含む HTML テーブル:

コードをコピー
コードは次のとおりです。

<表の境界線="1">
<頭>
<tr>
<th>月</th>
<th>貯蓄</th>
</tr>
</thead>
<tfoot>
<tr>
<td>合計</td>
<td>180ドル</td>
</tr>
</tfoot>
<t本文>
<tr>
<td>1月</td>
<td>100ドル</td>
</tr>
<tr>
<td>2月</td>
<td>80ドル</td>
</tr>
</tbody>
</テーブル>

<<:  ウェブページ作成のテスト問題を全て解けますか?

>>:  GaussDB for MySQL パフォーマンス最適化の詳細な説明

推薦する

Ubuntu 16.04 に nvidia ドライバー + CUDA + cuDNN をインストールする詳細なチュートリアル

準備1. GPUがCUDAをサポートしているかどうかを確認するlspci | grep -i nvi...

WeChatアプレットコンポーネントライフサイクルの落とし穴の記録

通常、コンポーネントのライフサイクルは、ビジネス ロジックが始まる場所です。ビジネスシナリオが複雑で...

MySQLの制限を使用して大規模なページングの問題を解決する方法

序文日常の開発では、MySQL を使用してページングを実装する場合、常に MySQL 制限構文を使用...

JS で美しい条件式を書く方法についての簡単な説明

目次複数の条件文複数属性オブジェクトスイッチステートメントを置き換えるデフォルトパラメータとデストラ...

vue + Electron でデスクトップ アプリケーションを作成するためのサンプル コード

1.vueパッケージングここでは、vueネイティブパッケージングコマンドを使用してvueプロジェクト...

uniapp WeChatミニプログラムのグローバル共有を実装するためのサンプルコード

目次グローバル共有コンテンツファイルを作成するファイルをインポートしてグローバルに登録するページ共有...

js でショッピングモールのシミュレーションを実現

HTML、CSS、JSフロントエンドを学習中の皆さん、今回はショッピングモールの事例の実装をシェアし...

Linux で独自の Nexus プライベート サーバーを構築する方法

この記事では、Linuxサーバー上でDockerを使用してNexusプライベートサーバーを構築する方...

Linux での rpm、yum、ソースコードの 3 つのインストール方法の詳細な紹介

第1章 ソースコードのインストールRPM パッケージは特定のシステムとプラットフォームに応じて指定さ...

ローカルの Windows リモート デスクトップから Alibaba Cloud Ubuntu 16.04 サーバーに接続する方法

ローカル Windows リモート デスクトップが Alibaba Cloud Ubuntu 16....

CSS で平均レイアウトを実現するためにネガティブ マージン テクノロジーを使用する方法

通常、IE ブラウザでの CSS の互換性の問題を解決するために、フロート レイアウトが使用されます...

MySQL msiバージョンのダウンロードとインストールの初心者向けの詳細なグラフィックチュートリアル

目次1. MySQL msiバージョンをダウンロードする2. インストール3. 環境変数を設定する1...

mysql 8.0.16 winx64.zip インストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.16 winx64.zipのインストールと設定方法の具体的なコード...

CSS3のbox-shadowプロパティの使い方の詳細な例

CSS には多くの属性があります。特に複数の値を設定する必要がある属性は、長期間使用しないと忘れられ...

nginxカスタム変数と組み込み定義済み変数の使用

概要Nginx では変数を使用して設定を簡素化し、設定の柔軟性を向上させることができます。すべての変...