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 パフォーマンス最適化の詳細な説明

推薦する

div の高さをブラウザの高さに合わせて調整する方法

この古くからある疑問は、数え切れないほどのフロントエンド開発者やバックエンドプログラマーを悩ませてき...

ショートビデオ(Douyin)の透かし除去ツールの実装コード

目次1. まず最初のリンクを取得する2. ブラウザでこのリンクを開いてください3. アドレスを開くと...

Flask と Vue のフロントエンドとバックエンドを分離したプロジェクト展開のサンプル コード

以前、プロジェクトを開発しました。バックエンドのインターフェースを書くために Flask フレームワ...

リモートログインとポート公開を防ぐためのLinuxサーバー構成IPホワイトリスト

序文ブロガーが使用しているサーバーは Alibaba Cloud から購入したものです。実際、Ali...

MySQL で単一のフィールド内の複数の値を分割および結合する方法

複数の値を組み合わせて表示これで、図1から図2に示す要件が揃いました。 どうやってやるんですか?次の...

jsBridgeの動作メカニズムを1つの記事で学ぶ

目次js 呼び出しメソッドアンドロイド1.jsはネイティブを呼び出す2. ネイティブコールjs iO...

VMware Workstation 仮想マシンのインストール操作方法

仮想マシンは非常に便利なテストソフトウェアです。ハードウェアに損傷を与えることなく、さまざまなテスト...

MySQLの共有ロックと排他ロックの使用例の分析

この記事では、例を使用して MySQL の共有ロックと排他ロックの使用方法を説明します。ご参考までに...

ウェブページの読み込み進捗状況バーの詳細な説明(推奨)

(Web ページの読み込み中に、コンテンツが多すぎて読み込みと待機が続くことがあります。このとき、...

ウェブサイトの画像にグレー効果を加える3つの方法

私はグレースケールの画像の方が芸術的に見えると思うので、いつもグレースケールの画像を好んで使っていま...

Reactの3つの主要属性におけるpropsの使用の詳細な説明

目次クラスコンポーネント機能コンポーネントプロパティは読み取り専用ですコンポーネント間通信前回は状態...

WeChatアプレットでのwxsファイルの素晴らしい使い方をいくつか紹介します

目次序文応用フィルタードラッグファイル間での参照の受け渡しwxsはjsロジック層にパラメータを渡しま...

ZooKeeper をベースにした Hadoop 高可用性クラスタの構築のチュートリアル図

目次1. 高可用性の概要1.1 可用性の高い全体アーキテクチャ1.2 QJMに基づく共有ストレージシ...

プロセスのすべての情報を表示するLinuxメソッドの例

サーバー上にタスク プロセスがあります。 ps -ef | grep task を使用して表示すると...