コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML のネストされたテーブル

HTML のネストされたテーブル

WBOY
リリース： 2024-09-04 16:49:12
オリジナル
863 人が閲覧しました

「ネストされたテーブル」は、HTML コーディングでテーブルを使用する際の最も重要な概念の 1 つです。ネストされたテーブル、つまり「テーブル内のテーブル」は、より大きく複雑なテーブルを作成するときに使用される概念です。複雑で大きなテーブルのほとんどには、コーディングをより適切に制御するために、メイン テーブル内にテーブルのネストが含まれている場合があります。ネストされたテーブルを使用すると、美しく興味深い外観やビジュアルを作成できますが、ルーズエンド エラーが発生する可能性があります。

確かに、ネストされたテーブルを使い始めると、テーブル内にテーブルを作成する際にコーディング、保守、処理が必要なタグや要素がすべて必要になるため、扱いが難しくなります。しかし、このような概念を理解し、その複雑さに少し踏み込むと、その中でタグを操作するのがはるかに簡単になります。

テーブル内にテーブルを作成するには?

、、
などのテーブル タグを使用してネストされたテーブルを作成するだけで、別のテーブル内にテーブルを作成できます。テーブルをネストすると複雑さのレベルが高くなる可能性があるため、ネストしたテーブルの開始と終了は同じセル内で行うようにしてください。ネストされたテーブルを任意のレベルまで作成できます。同じセル内に内部テーブルを作成することを忘れないでください。

以下はネストされたテーブルの解釈です。以下の画像は、表の 5 レベルのネストを示しています。表の色は「青」が最外側、またはネストされた表が白、赤、黄、緑の色で表されたコンテナ表です。

HTML のネストされたテーブル

今回は、ネストされたテーブルの別の例を段階的に作成してみます。

  • まず、メインテーブル、つまりネストを開始するためのコンテナが必要です。
  • 次に、どの行、列、またはセルに別のテーブルを存在させるかを決定します。決めたら次のステップへ
まったく新しいテーブルが作成される要素です。階層的に進むと、….
….


  • 内部のネストされたテーブルは、
    • を閉じるためのすべての標準ルールに従って完全に閉じる必要があります。そして

    以上がHTML のネストされたテーブルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    関連ラベル：
    html html5 HTML Tutorial HTML Properties HTML tags
    ソース：php
    前の記事：HTML の枠線のない表 次の記事：HTMLの表の境界線
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...
    から 2024-04-16 09:34:16
    0
    0
    4687
    ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
    から 2024-04-06 21:58:04
    0
    1
    800
    CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
    から 2024-04-06 20:22:15
    0
    1
    454
    livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
    から 2024-04-06 20:02:10
    0
    2
    543
    文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド 次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...
    から 2024-04-06 17:40:41
    0
    2
    410
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート

    (ネストされたテーブルはここにあります)
    要素。
  • ネストされたテーブルの書式設定は HTML の他の要素と同じくらい簡単で、同様です。

    • 上記の例には、メイン コンテナ、2 つの列を持つテーブル、および 2 行 2 列のネストされたテーブルがありました。

    次に、ネストされたテーブルの以下の例を見てください。上記でネストのレベルの解釈として説明したものを、以下のコーディングを通じてそのような例を作成してみます。

    コード:

    <body>
<table border="10" bordercolor = "#0B1941">
<tr>
<td>
<table border="10" bordercolor = "#F8F3F3">
<tr>
<td>
<table border="10" bordercolor = "#C74D4F">
<tr>
<td>
<table border="10" bordercolor = "#DCE127">
<tr>
<td>
<table border="10" bordercolor = "#3CAB16">
<tr> <td> </td> </tr>
</table> </td> </tr>
</table> </td> </tr>
</table> </td> </tr>
</table> </td> </tr>
</table>
    ログイン後にコピー

    上記のコードは、異なる色で区別されたテーブルの 5 レベルのネストを示す次の表示を出力します。テーブルが相互に内部に配置されている、つまり、次のようにネストされている様子を観察します。

    HTML のネストされたテーブル

    プログラマーがウェブページ全体のフォーマットにテーブルを使用する場合、テーブル内のネストの概念は視覚的にさらに興味深いものになります。このテーブルは、プログラマーがネストする他のテーブルや他の HTML 要素と同じようにフォーマットできます。

    HTML のネストされたテーブルの例

    以下に挙げる例を示します:

    例 #1

    以下のネストされたテーブルの例を観察してください。メイン テーブル内のテーブルが 1 つだけです。メインテーブルとその中のネストされたテーブルを区別するために、テーブルの異なる境界線の半径と境界線の色を使用しました。

    コード:

    <body>
<table border="5px" bordercolor="#8707B0">
<tr>
<td>Left side of the main table</td>
<td>
<table border="5px" bordercolor="#F35557">
<h4 align="center">Nested Table</h4>
<tr>
<td>nested table C1</td>
<td>nested table C2</td>
</tr>
<tr>
<td>nested table</td>
<td>nested table</td>
</tr>
</table>
</td>
</tr>
</table>
    ログイン後にコピー

    出力:

    HTML のネストされたテーブル

    注: メインコンテナテーブル内のテーブルのネスト。メインテーブル内のネストされたテーブルは、赤色の枠線が付いているテーブルです。     		に追加されます。コンテナテーブルの要素。

    例 #2

    次のコードは、メイン コンテナ テーブル内のネストされたテーブル内の他の HTML 要素のネストを示します。

    コード:

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> NestedTables </title>
</head>
<body>
<caption title="Container Table"> Container Table </caption>
<table border="5px" bordercolor = "red">
<tr>
<td >
<table>
<tr> <th colspan="2"> Nested Table 2 </th> </tr>
<tr> <th> Column 1 </th> <th> Column 2 </th> </tr>
<tr> <td> Our First Table </td>
<td> Nested Within </td> </tr>
</table>
</td>
<td>
<table >
<tr> <th> Nested Table 2 </th> </tr>
<tr>
<td>
<ul>
<li> List Object 1 </li>
<li> List Object 2 </li>
<li> List Object 3 </li>
</ul>
</td>
</tr>
</table> </td> </tr>
<tr>
<td>
<table>
<tr> <th colspan="2" align="center"> Nested Table 3 </th> </tr>
<tr>
<td> <a href=""> Nested Table </a> </td>
<td> Demo Continued </td> </tr>
</table> </td>
<td>
<table>
<tr> <th> Nested Table 4 </th> </tr>
<tr>
<td> <img src="images.png" height="120px" width="120px" alt="Sorry Image could not be displayed"> </td> </tr> </table>
</td>
</tr>
</table>
</body>
</html>
    ログイン後にコピー

    上記のコードは、1 つのテーブル内に他の複数のテーブルを含める方法を示しています。テーブルには、通常単純な HTML ページに追加するあらゆる種類のコンテンツを含めることができます。上記のコードには枠線がありません。

    HTML のネストされたテーブル

    注: 上記の例では、png ファイル、ハイパーリンク、テーブル、オブジェクトのリストなどの追加された HTML 要素は、    		 ファイルの 1 つに簡単に追加できます。要素。上記の解釈では、ネストされたテーブルの境界線をすべてログオフしました。

    テーブルの境界線が表示されていることに注目してください。コンテナ テーブルは、赤色の境界線を持つテーブルと、青、黄、緑、黒の色の境界線を持つネストされたテーブルです。

    HTML のネストされたテーブル

    Web ページ全体の書式設定にテーブルを使用するのは良いことですが、ネストが複雑になればなるほど、ブラウザのレンダリングが非常に複雑になるため、ページの読み込みが遅くなるということを覚えておいてください。 .