HTMLテーブルの詳細な説明

HTMLテーブルの詳細な説明

機能: データ表示、テーブルアプリケーションシナリオ。

<table> テーブル<tr> 行<td> セル

形式:

<テーブル>

  <caption>...</caption><!- 表のタイトル、中央揃え -->

  <tr>

    <th>...</th>... <!- 表のヘッダー、コンテンツは中央揃え、太字 --> 

  </tr>

  <tr>

    <td>...</td>...

  </tr>

</テーブル>

テーブル構造タグ: 一部を読み込んで一部を表示するのに便利です。

ヘッダー(thead)、本文(tbody)、フッター(tfoot)の3つの部分に分けます。これらの3つのタグはレイアウトに影響を与えません。

<テーブル>

  <caption>...</caption>

  <頭>

  <tr>

    <th>...</th>... <!- 表のヘッダー、コンテンツは中央揃え、太字 --> 

  </tr>

  </thead>

  <t本文>

  <tr>

    <td>...</td>...

  </tr>

  </tbody>

  <tfoot>

  <tr>

    <td>...</td>...

  </tr>

  </tfoot>

</テーブル> 

テーブルタグの属性

tr タグ属性

<テーブル>


  <tr>

    <td colspan="2"> ...</td>

    <td> ...</td>

  </tr>

  <tr>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

</テーブル> 

<テーブル>

  <tr>

    <td> ...</td>

    <td rowspan="2"> ...</td>

  </tr>

  <tr>

    <td>...</td>

    <td>...</td>

    <td>...</td>

  </tr>

</テーブル> 

説明: 1. テーブル構造を完成させる 2. <td> タグ内に配置

<テーブル>

  <tr>

    <td> ...</td>

    <td> 

       <テーブル>

        <tr>

          <td> ...</td>

          <td>.</td>

        </tr>

      </テーブル>

    </td>

  </tr>

</テーブル>

1. テーブルのネストをできるだけ少なくします。

2. 行と列の範囲ができるだけ狭い表を使用します。

コードの全体的なメンテナンスコストが増加します。

ウェブページの構造レイアウトにテーブルを使用する場合、境界線は通常設定されません。

HTML テーブルの詳細説明はこれで終わりです。HTML テーブルに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  ARGB、RGB、RGBAの違いと紹介

>>: 

推薦する

Vueでファジークエリを実装する方法の簡単な例

序文いわゆるファジークエリとは、ユーザーの完全な入力やすべての入力情報がなくてもクエリサービスを提供...

MySQL の集計関数 count の使用法とパフォーマンスの最適化テクニック

この記事の環境はWindows 10、MySQLのバージョンは5.7.12-logです1. 基本的な...

MySQLのUPDATE文の落とし穴を記録する

背景最近、オンライン操作中に DML ステートメントを実行しました。これは絶対確実だと思っていました...

Vite+ElectronでVUE3デスクトップアプリケーションを素早く構築

目次1. はじめに2. Viteプロジェクトを作成する1. viteをインストールする2. プロジェ...

ウェブページのコピー防止機能の実装方法(クラッキング手法付き)

ソース ファイルを右クリックすると、次のコードが見つかります。 1. CSSを使用してFirefox...

docker-swarm をベースにした継続的インテグレーション クラスタ サービスの構築の詳細な説明

序文この記事は私自身の製作過程の簡単な記録です。練習中に質問があれば、一緒に話し合うことができます。...

VirtualBoxにOpenSuseをインストールする方法

仮想マシンはホストマシンにインストールされます。 CPU とメモリはホスト マシンと共有する必要があ...

CSS を使用して三角形を実装する一般的な手法 (複数の方法)

面接の経験によっては、CSS に関する質問がよく見られ、CSS を使用して三角形を描画する方法につい...

ウェブサイトを高速化する

パフォーマンスは本当に重要ですか?パフォーマンスは重要であり、誰もがそれを知っています。なぜ私たちは...

テーブルを動的に読み込み、削除する JavaScript

この記事では、テーブルを動的に読み込み、削除するためのJavaScriptの具体的なコードを参考まで...

JavaScript はスローモーションアニメーションのカプセル化と使用法を説明します

プロセス分析の実装(1)繰り返して電話をかけるには?答え: 関数をカプセル化して一度だけ呼び出すコー...

Ubuntuデュアルシステムが起動時に停止する問題の解決方法の詳細な説明

起動時に Ubuntu デュアル システムが停止する問題の解決方法 (Ubuntu 16.04 およ...

nohup /dev/null 2>&1 の使い方の詳しい説明

nohup コマンド: プロセスを実行しており、アカウントからログアウトしてもプロセスが終了しないと...

Docker はすべてのコンテナをバッチ起動して閉じます

Dockerの場合すべてのコンテナコマンドを開始する docker を起動します $(docker ...

Nginx で何ができるかの包括的な分析

序文この記事は、サードパーティのモジュールをロードせずにNginxで処理できることのみに焦点を当てて...