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 タグ付きイーサネット カードを使用する方法

推薦する

HTML 要素の高さ、offsetHeight、clientHeight、scrollTop などの詳細な説明。

要素に関するいくつかの属性フロントエンドの日常的な開発では、一部のページのプロパティを取得または監視...

背景画像の配置におけるbackground-position属性の自己理解

最近、プロジェクトではラベルやボタンなどの断片的な画像をたくさん使用する必要があります。また、CSS...

mysqladmin を使用して MySQL インスタンスの現在の TPS と QPS を取得する方法

mysqladmin は管理と操作を行う公式の mysql クライアント プログラムです。MySQL...

MySQL の日付と時刻の加算と減算のサンプル コード

目次1.MySQLは時間間隔を加算または減算します2. 日付を減算する最近、MySQL を見直してい...

Gitlab-ci を使用してリモート マシンに継続的にデプロイする方法 (詳細なチュートリアル)

簡単に言うと、今日は Gitlab-CI を使用してリモート サーバーに自動的にデプロイする方法につ...

ウェブページヘッダーの最適化の提案

ロゴの最適化: 1.ロゴ画像はできるだけ小さくしてください。 2. 一般的には背景として配置されます...

CSS スタイルをプログラムで処理するためのサンプル コード

プログラム的アプローチの利点1. スタイルの分散を避けるためのグローバルコントロール2. シンプルな...

VUE 入門 イベント処理の学習

目次1. 関数バインディング2. パラメータと$eventを使用する3. 1つのイベントに複数の関数...

HTML ウェブページ画像タグ

画像タグ <IMG> を挿入します。今日私たちが目にするカラフルなウェブページはすべて、...

Nginx での Frp による https への強制リダイレクト設定の詳細な説明

自宅のルーターが300Mの帯域幅を80Mに強制的に減らしたため、3205Uソフトルーターを購入しまし...

Navicatは機能ソリューション共有を作成できません

初めて MySQL FUNCTION を書いたとき、エラーが何度も発生しました。 Err] 1064...

MySQL マスタースレーブ同期における server-id の例の詳細な説明

序文MySQL クラスターを構築する場合、当然のことながら、データの一貫性を確保するために、データベ...

docker を使用して kafka プロジェクトをデプロイする Centos6 方法の分析

この記事では、Docker を使用して Centos6 に Kafka プロジェクトをデプロイする方...

nginxでイメージサーバーを構築する手順の詳しい説明(ルートとエイリアスの違い)

インストール手順は省略します( yum -y install nginx;を使用して直接インストール...

MySql でデータの重複挿入を回避する 3 つの方法

序文MySql で主キーの競合または一意キーの競合が発生した場合、挿入方法に応じてエラーを回避するた...