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を実装する2つの方法

テスト: Chrome v80.0.3987.122 は正常です方法は2つあります。通常のラベルの位...

phpmyadmin を使用して MySQL 権限を設定する方法

目次ステップ 1: root ユーザーとしてログインします。ステップ 2: 新しいデータ テーブルを...

CentOS7.8 に mysql 8.0.20 をインストールするための詳細なチュートリアル

1. MySQLソフトウェアをインストールするMySQL 公式 Yum リポジトリ、MySQL バー...

ins タグと del タグの属性と使用法

insとdel は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、また...

Docker で MySQL クラスターを構築する方法の例

Docker の基本的な手順:アップデートパッケージ yum -y アップデートDocker仮想マシ...

あなたをエキスパートに見せるための 13 個の JavaScript ワンライナー

目次1. ランダムなブール値( true / false )を取得する2. 指定された日付が営業日で...

Vueはシンプルなショッピングカートの例を実装します

この記事では、Vueの具体的なコードを共有して、簡単なショッピングカートを実装します。具体的な内容は...

Vue プロジェクト @change 複数のパラメータを使用して複数のイベントを渡す

まず、変更イベントは 1 つだけです。 changelevel() //値を選択選択を変更して行の値...

Springboot プロジェクトに動的にパラメータを渡すための Docker の実装方法

背景最近、Docker 初心者の友人から、毎回プロジェクト構成ファイルにハードコーディングしてサービ...

startup.bat をダブルクリックすると Tomcat がクラッシュする問題の解決方法の詳細な説明

Tomcat を学習したばかりのプログラマーにとって、これはよくある間違いです。 1. 環境変数の問...

CSS3 @mediaの基本的な使い方のまとめ

//文法: @media mediatype and | not | only (メディア機能) ...

Vue2.0/3.0 での provide と inject の使用例

目次1. provide/inject の用途は何ですか? 2. provide/injectの使い...

1つの記事でNavicat for MySQLの基本を理解する

目次1. データベース操作2. データ型3. バックアップとリカバリ3. 操作4. 上級5. 知識補...

Linux (Ubuntu 18.04) に Anaconda をインストールする詳細な手順

Anaconda は、大規模なデータ処理、予測分析、科学計算のための最も人気のある Python デ...

webpack-dev-server のコア概念とケースの詳細な説明

webpack-dev-server コアコンセプトWebpack の ContentBase と ...