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

>>: 

推薦する

MySQL で重複行を見つけて削除する方法

目次1. 重複行を見つける方法2. 重複行を削除する方法3. 複数の列で重複を見つける方法4. クエ...

Videojs+swiper が Taobao の商品詳細カルーセルを実現

この記事では、Taobao商品詳細のカルーセルを実現するためのvideojs+swiperの具体的な...

Nodeはkoa2を使用してシンプルなJWT認証方式を実装します

JWT の紹介JWTとは正式名称はJSON Web Tokenで、現在最も人気のあるクロスドメイン認...

Linux サーバーに Java Web プロジェクトをデプロイするための完全なチュートリアル

この記事は主にインターネット上の他のチュートリアルを参考にしています。実際に操作した上でのまとめです...

ウェブサイトデザインにおいて非常に重要な概念であるdiv+floatの分析

ウェブサイトの構築では、HTML と CSS に関するさまざまな問題に常に遭遇します。ウェブサイト ...

誰もが登録できるようにJiedaibaoを宣伝するにはどうすればよいでしょうか? ジエダイバオのプロモーション方法とスキル

借財宝は最近人気が出ている携帯電話ローンソフトウェアプラットフォームです。知人同士の貸し借りが特徴で...

Centos7にGitLabサーバーをインストールして展開する方法

私はここでCentOS 7 64ビットシステムを使用しています。CentOS 64ビットシステムを試...

JS が WeChat の「クソ爆弾」機能を実装

みなさんこんにちは、Qiufengです。最近、WeChatは新しい機能をリリースしました(WeCha...

MySQLのエンコードの不一致によって発生する可能性のある問題

ストアドプロシージャとコーディングMySQL ストアド プロシージャでは、テーブルとデータのエンコー...

Linux の運用と保守で netstat の代わりに ss コマンドを使用する方法

序文Linux サーバーを操作および管理するときに、最もよく使用されるコマンドの 1 つが nets...

Vuex全体のケースの詳細な説明

目次1. はじめに2. 利点3. 使用手順1. Vuexをインストールする2. Vuexを参照する3...

カレンダー効果を実現するための Bootstrap+JQuery

この記事では、カレンダー効果を実現するためのBootstrap+Jqueryの具体的なコードを参考ま...

CentOS7環境でDockerを使ってPHP動作環境を構築する手順を詳しく解説

関連記事: CentOS7でyumを使用してDockerをインストールするDockerを使ってWin...

MySQL 5.7.21 解凍バージョンのインストールと設定のグラフィックチュートリアル

この記事では、MySQL 5.7.21の解凍版をダウンロードしてインストールする詳細な手順を記録して...

Linux の Makefile とは何ですか? どのように機能しますか?

この便利なツールでプログラムをより効率的に実行およびコンパイルしますMakefile は自動コンパイ...