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

推薦する

...

CSSは2つの要素をブレンドする効果(スティッキー効果)を実現します。

数年前、Taobaoのモバイル版の左下隅に面白い丸いボタンがあったことを覚えています。それをクリック...

docker イメージのプル速度が遅い問題の解決策

現在、Docker には中国向けの公式ミラーがあります。詳細については、https://www.do...

要素を中央に配置するための配置方法 (Web ページ レイアウトのヒント)

ブラウザウィンドウの中央に要素を配置する方法まず、コード ブロックを示します。すでにコードを理解して...

Linux で Oracle データベースをバックアップするためのスケジュールされたタスクの設定に関するチュートリアル

1. データベースの文字セットを確認するデータベースの文字セットは、Linux で設定された環境変数...

Zabbix パスワードをリセットする方法 (ワンステップ)

問題の説明長い間アカウントパスワードを入力して Zabbix にログインしていないため、管理者パスワ...

jQueryはシンプルなカルーセル効果を実装します

みなさんこんにちは。今日はカルーセルの実装についてお話しします。私が作成したカルーセルの効果は次のと...

CSS3 フィルターの違いと応用の詳しい説明:ドロップシャドウフィルターとボックスシャドウ

標準 CSS3 を使用して要素の影の効果を実現するには、2 つの手順があります。1 つ目は一般的なb...

VMwareがLinuxシステムをインストールして起動した後に黒い画面が表示される問題を解決する

1. 設置環境1. HUAWEI mate x CPU i5 82500u、8g メモリ、独立グラフ...

Centos7.3 で mysql5.7.18 をインストールして初期パスワードを変更する方法

この記事では、Centos7.3でのmysql5.7.18のインストールと初期パスワードの変更につい...

CSS3 フィルターを使用して PNG 画像の色を変更するサンプル コード

この方法は、CSS3のdrop-shadow filterを使用して、png画像の不透明部分に任意の...

Vueカスタム命令とその使用方法の詳細な説明

目次1. 指令とは何ですか? Vue でよく使われる組み込みの v ディレクティブv-if と v-...

Linux で MySQL のデフォルト エンコーディングを変更する方法

開発プロセス中に、MySQL データベースを復元した後にデータベース データに文字化けが発生した場合...

MySQL で誕生日から年齢を計算する複数の方法

以前はMySQLをあまり使用していなかったため、MySQLの機能にあまり詳しくありませんでした。この...

MySQL実行計画を学ぶ

目次1. 実施計画の概要2. 実行計画の実践id:選択タイプ:テーブル:タイプ:可能なキー:鍵:キー...