HTML テーブル タグ チュートリアル (47): ネストされたテーブル

HTML テーブル タグ チュートリアル (47): ネストされたテーブル
<br />このページでは、テーブルをネストすることで組版を実現しています。つまり、1 つのテーブルを別のテーブル内にネストすることができます。理由は次のとおりです。
まず、Web ページのレイアウトは非常に複雑になるため、全体的なレイアウトを制御するには外部テーブルが必要になります。この時点で、マスター テーブルを通じて内部レイアウトの詳細も実装すると、行の高さと列の幅に競合が発生しやすくなり、テーブルの作成が困難になります。
次に、ブラウザが Web ページを解析するときに、テーブル構造全体をダウンロードした後にのみテーブルを表示します。ネストがないと、テーブルは非常に複雑になり、訪問者は Web ページのコンテンツが表示されるまでに長い時間待たなければなりません。
これらの理由から、ネストされたテーブルが導入されました。メイン テーブルは全体のレイアウトを担当し、ネストされたテーブルは各サブ列のレイアウトを担当し、メイン テーブルの対応する位置に挿入されます。こうすることで、誰もが自分の義務を遂行でき、対立も起こりません。 ファイル例: 10-47.htm
テーブルをネストします。
01 <!-- -------------------------------- -->
02 <!-- ファイル例: 10-47.htm -->
03 <!-- ファイルの説明: ネストされたテーブル -->
04 <!-- -------------------------------- -->
05 <html>
06 <ヘッド>
07 <title>ネストされたテーブル</title>
08 </head>
09 <本文>
10 <テーブル border=3 width=400 height=100 bordercolor=#336699 align="Center">
11 <tr>
12 <td colspan=2 align="Center">
13 <表の境界線=1 幅=100% 境界線の色=赤>
14 <tr>
15 マクロメディアウェブデザイナー
16 </tr>
17 <tr>
18 <td align="Center">Web デザイン ソフトウェア</td>
19 </tr>
20 </表E>

21 </td>
22 </tr>
23 <tr>
24 <td>Web グラフィック ソフトウェア</td><td>Fireworks</td>
25 </tr>
26 <tr>
27 <td>Web ページ作成ソフトウェア</td><td>Dreamweaver</td>
28 </tr>
29 <tr>
30 <td>Webアニメーションソフトウェア</td><TD>Flash</td>
31 </tr>
32 </表>
33 </body>
34 </html> ファイルの説明を見ると、13 行目から 20 行目がネストされたテーブルであることが分かります。

<<:  VUE uni-app でよく使用される API についての簡単な説明

>>:  CentOS/RHEL システムで VLAN タグ付きイーサネット カードを使用する方法

推薦する

純粋な CSS 流星群の背景サンプルコード

GitHubアドレス、気に入ったらスターを付けてくださいプラグインのプレビューチュートリアルコード表...

MySQLはgroup_concat()関数に基づいて複数のデータ行を結合します

非常に便利な機能group_concat() について、マニュアルには次のように記載されています: ...

CSSスタイルは、テキストが長すぎる場合に省略記号を表示する問題を解決します

1. CSSスタイルは、テキストが長すぎる場合に省略記号を表示する問題を解決します1. 一般的なスタ...

jQueryはフェードインとフェードアウト効果を実現します

jQuery を使用してフェードインとフェードアウト効果を完成させる前に、まずいくつかのコードを理解...

WeChatアプレットがログインインターフェースを実装

WeChatアプレットのログインインターフェースは参考までに実装されています。具体的な内容は次のとお...

行の高さと垂直方向の配置についての深い理解

いくつかの概念行ボックス: インライン ボックスを囲むボックス。1 つ以上の行ボックスが積み重ねられ...

MySQL (5.6 以下) の JSON 解析の詳細な例

MySQL(5.6以下)はjsonを解析します #json 解析関数 DELIMITER $$ `j...

Vue プロジェクトのパッケージ化と最適化の実装手順

目次Vueプロジェクトのパッケージ化、起動、最適化Vueプロジェクトのパッケージ化プロジェクトホステ...

JavaScriptオブジェクトをマージするさまざまな方法の詳細な説明

目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...

2つのLinuxサーバー間でファイルとフォルダを転送する手順

今日、私はプロジェクトの移行の問題に取り組んでいましたが、突然、大量の写真をどうやって移動したらよい...

Vue のデータ応答性に関する詳細な理解

目次1. ES 構文のゲッターとセッター2. ES構文でのdefineProperty 3. Vue...

JavaScript で最も高速なループはどれですか?

どの for ループまたは反復子がニーズに適しているかを知ることで、アプリケーションのパフォーマンス...

CentOS 8 インストール図 (超詳細なチュートリアル)

CentOS 8 が正式にリリースされました! CentOS は Red Hat の再配布ポリシー...

webpack -v エラー解決

背景webpackのバージョンを確認したいのですが、webpack -vを実行するとエラーが報告され...

Linux プラットフォームでの Zabbix エージェントのインストールと設定方法

ここでは、Linux プラットフォームでの Zabbix エージェントのインストールと構成について簡...