tbodyタグの魔法はテーブルコンテンツの表示を高速化します

tbodyタグの魔法はテーブルコンテンツの表示を高速化します
他の人のウェブページを保存して見たことがあると思いますが、特にdwで開くと、多くのウェブページに<tbody>タグが追加されていることがわかります。dwでは黄色で非常に目立ちますが、<tbody>とは何でしょうか?
TBODY タグを使用して行内のテーブルのダウンロードを制御し、Web ページ上の他のコンテンツ (画像など) よりも先にコンテンツをダウンロードできるようにします。これにより、他のユーザーは Web ページの実質的なコンテンツを、それほど待たずに最初に見ることができます。行をダウンロードする必要がある場所に <tbody> と </tbody> を追加します。例:

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

<テーブル>
<t本文>
<tr><td>フェイオウ島</td></tr>
<tr><td>フェイオウ島</td></tr>
</tbody>
<t本文>
<tr><td>フェイオウ島</td></tr>
<tr><td>フェイオウ島</td></tr>
</tbody>
</テーブル>


tbodyタグの使用

IE によって独自に導入され、HTML3.0 仕様でサポートされているテーブル属性は次のとおりです。
<THEAD> - テーブルヘッダーを指定します
<TBODY> - テーブル本体を指定します
<TFOOT> - 表のフッターを指定します
<COLGROUP> - 列の配置をグループ化するために使用されます
<COL> - 個々の列の配置を指定するために使用します
以下は私が作成した例です。かなり複雑なので、見てみてください。これらのプロパティの主な用途は、SCRIPT 駆動型の動的効果に反映されます。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<ヘッド>
<TITLE> 新しいドキュメント </TITLE>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312">
</HEAD>
<本文BGCOLOR="#FFFFFF">
<表の境界フレーム=hsides RULES=cols>
<COL ALIGN=左>
<COLGROUP SPAN=3 ALIGN=中央 VALIGN=中央>
<THEAD BGCOLOR="#FF0000">
<キャプション配置=center><FONT SIZE=+1><B>
比較表の一部
</キャプション>
<TR>
<TD><B>要素<B></TD><TD><B>インターネット エクスプローラー</B></TD>
<TD><B>ネットスケープ</B></TD><TD><B>モザイク</B></TD>
</TR>
</ヘッド>
<TBODY BGCOLOR="#33CCFF">
<TR>
<TD><B></TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR>
<TD>&lt;ベース...&gt;</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR>
<TD> ...HREF</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR>
<TD> ...ターゲット</TD><TD>X</TD><TD>X</TD><TD></TD>
</TR>
<TR>
<TD>&lt;BASEFONT ...&gt;</TD><TD>X</TD><TD>X</TD><TD></TD>
</TR>
<TR>
<TD VALIGN=top> ...サイズ</TD><TD>X
<フォントサイズ=-1>
(表示のみ
フォント
サイズ=使用済み

</FONT></TD><TD VALIGN=top>X</TD>
<TD></TD>
</TR>
<TR>
<TD> ...FACE</TD><TD>X</TD><TD></TD><TD></TD>
</TR>
<TR>
<TD VALIGN=top>&lt;BGSOUND ...&gt;</TD><TD VALIGN=top>X</TD>
バツ
<FONT SIZE=-1>(スポーンします
プレーヤー

.mid ファイル)
</TR>
</TBODY>
<TFOOT BGCOLOR="#6699CC">
<TR>
<TD> ...</TD><TD>[...</TD><TD>...]</TD><TD>...</TD>
</TR>
<キャプション配置=下><フォントサイズ=+1><B>
これは &lt;TFOOT&gt; コンテンツです</B></FONT>
</キャプション>
</TFOOT>
</表>
</本文>
</HTML>

tbody はテーブルのコントロールを強化すると言われていますが、多くの実験を行った結果、役に立たないことがわかりました。
=================================
1. DW は tbody コードをまったく生成しません 2. DW は tbody コードをまったく認識しません
=================================
tbody コードが手動で記述されていない場合は、IE5 で Web ページを開いてファイルとして保存した場合にのみ、保存したファイル内のテーブルによって tbody コードが生成されます。 (テーブルに tbody コードがまったく含まれていない場合でも、名前を付けて保存すると IE5 によってコードが生成されます) テーブルを作成し、IE で開いて名前を付けて保存し、保存したファイルのコードを確認することができます。 (これはやりすぎだ!!!)
=================================
IE5+のみがtbodyを認識できると想定できます。
=================================
FP が tbody を生成できるかどうかはわかりません。使っていません。

<<:  ARMアーキテクチャにおける関数呼び出しプロセスの簡単な分析

>>:  ウェブページのグリッドデザインを考える

推薦する

docker runの--rmオプションの使用方法

Docker コンテナが終了しても、デバッグを容易にし、ユーザー データを保持するために、デフォルト...

JavaScript/TypeScript で同時リクエスト制御を実装するためのサンプルコード

シナリオリクエストが 10 件あるが、同時リクエストの最大数は 5 件で、リクエスト結果が必要である...

MySQLの基本操作を詳しく解説(第2部)

序文この記事には1. データベースのいくつかの主要な制約2. テーブル間の関係制約:主キー制約: 機...

理論: 2年間のユーザーエクスペリエンス

<br />国内のウェブサイトが本格的に普及し、ユーザーエクスペリエンスに重点が置かれる...

Excel エクスポートは docker 環境では常に失敗する

Excel のエクスポートは、docker 環境では常に失敗します。最も直接的な原因は、中国語フォン...

Vue ベースの Excel 解析とエクスポートの詳細な説明

目次序文基本的な紹介コードの実装基本構造アップロード分析Excel にエクスポート基本構造Excel...

IE6/7 における a.getAttribute(href,2) 問題の分析と解決

簡単な説明<br />IE6および7では、一般的なaタグ(HTMLで記述され、DOM操作...

丸い角や鋭い角を表現するために、絵の代わりに文字を使用する研究

Google Gmail ページから撮った次のスクリーンショットをご覧ください (同じ場所からスクリ...

Vue3 コンポジション API でロジックの再利用を実装する方法

Composition API はロジック再利用手順を実装します。ロジックコードを関数に抽出します。...

WeChatアプレットが連携メニューを実現

最近はコース設計を実現するために、フロントエンドも少しやっています。今日はいくつかの機能を実現するた...

CSS3の新しいセレクタの例

構造(位置)擬似クラスセレクタ(CSS3) :first-child : 指定されたセレクタは、親要...

JavaScript の onblur および onfocus イベントの詳細な説明

HTML ページでは、ボタンやテキスト ボックスなどの視覚要素にフォーカスを設定したり、フォーカスを...

Nginx アップロードファイルのサイズを変更する簡単な方法

オリジナルリンク: https://vien.tech/article/138序文私は、マークダウン...

MySQL は正常に起動するがポートをリッスンしない場合の解決策

問題の説明MySQL が正常に起動しました。以下に示すように、 ps -ef |grep mysql...