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の違いと紹介

>>: 

推薦する

nginx+FastDFS を使ってファイル管理システムを段階的に構築する

目次1. FastDFS の概要1. はじめに2. FastDFSストレージ戦略3. FastDFS...

Vueはログイン認証コードを実装する

この記事では、ログイン認証コードを実装するためのvueの具体的なコードを例として紹介します。具体的な...

CSS でハートを描く 3 つの方法

以下では、CSS を使用してハートの形を描く 3 つの方法を紹介します。実装プロセスは非常にシンプル...

JS に依存せずにレスポンシブ レイアウトを実現する CSS3 モバイル vw+rem メソッド

1. はじめに(1)vw/vhの紹介使用する前に、vw と rem とは何か、その機能について簡単に...

Linux プロセスが占有するポート番号を表示する 6 つの方法

Linux システム管理者にとって、サービスがポートに正しくバインドされているか、またはポートをリッ...

ページング効果を実現するNode+Express

この記事では、ページング効果表示を実現するためのnode+expressの具体的なコードを参考までに...

Nginx と GeoIP モジュールを使用して IP の地域情報を読み取る方法

LinuxにGeoIPをインストールする yum で nginx-module-geoip をインス...

クールなネオンライト効果を実現する純粋な CSS (デモ付き)

私は最近、YouTube の CSS アニメーション効果チュートリアル シリーズをフォローしています...

Vue Elementのテーブルコンポーネントをカプセル化する方法

Vue コンポーネントをカプセル化する場合でも、機能コンポーネントをクロスファンクショナルに使用しま...

Windows 10 システムに mysql-8.0.13 (zip インストール) をインストールする詳細なチュートリアル

インストール環境の説明•システムバージョン: windows10 •MySQL バージョン: mys...

DCL を使用して MySQL でユーザーを管理し、権限を制御する方法

DCL (データ制御言語): データベースのアクセス権とセキュリティ レベルを定義し、ユーザーを作成...

JavaScriptアップロードファイル制限パラメータケースの詳細な説明

プロジェクトシナリオ: 1. アップロードファイルの制限関数: 1. フロントエンド操作による異常な...

Docker 経由で CentOS コンテナを作成する手順

目次序文コンテナ間の通信を容易にするためのブリッジネットワークを作成するCentOS7イメージを使用...

div タグ内の要素の margin-top が無効である場合の解決策

タイトル通りです。その質問は非常に奇妙です。要素の親タグはdivで、幅や高さなどの属性は設定されてい...

条件によるMysqlカウントの複数の実装方法を詳細に解説

最近、あるウェブサイトのバックエンドに一連の統計機能を追加していたのですが、条件によるカウントが必要...