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 5.7 のインストールと設定方法のグラフィックチュートリアル

このチュートリアルでは、MySQL 5.7のインストールと設定方法を参考までに紹介します。具体的な内...

モバイル Web アプリ上の画像が鮮明ではなく、非常にぼやけているのはなぜですか?

なぜ？最も簡単に言えば、ピクセルは均等ではないということです。携帯電話に表示される写真はとても繊細に...

SQL でテーブルにフィールドとコメントを追加する方法

1. フィールドを追加します。 alter table テーブル名 ADD フィールド名 タイプ;例...

中国のウェブサイトユーザーエクスペリエンスランキング

<br />ユーザーエクスペリエンスは中国のウェブサイトでますます重視されており、ユーザ...

Javascript の奇妙な点をご存知ですか?

私たちのベテランの先人たちは、数え切れないほどのコードを書き、数え切れないほどの落とし穴に陥ってきま...

VueはOpenLayersを使用してTiandi MapとAmapを読み込み

目次1. 世界地図1. VueにOpenLayersをインストールする2. アマップ1. 世界地図1...

Vue パッケージアップロードサーバー更新 404 問題に対する 2 つの解決策

1: nginxサーバーソリューション、.conf構成ファイルを変更する解決策は2つある1: 位置 ...

JavaScript 円グラフの例

描画効果実装コードJavaScript var キャンバス = document.getElemen...

Vue はグラフィック検証コードログインを実装します

この記事では、グラフィック認証コードログインを実装するためのVueの具体的なコードを参考までに紹介し...

JavaScript ESの新機能letとconstキーワードに基づく

目次1. letキーワード1.1 基本的な使い方1.2 変動昇進はない1.3 一時的なデッドゾーン1...

MySQL 5.7.19 winx64 無料インストールバージョン設定チュートリアル

mysql-5.7.19-winx64インストールフリー版の設定方法、参考までに具体的な内容は以下の...

MySQLのロックについて理解しておくべきこと

1. はじめにMySQL ロックは、その範囲に応じて、グローバル ロック、テーブル ロック、行ロック...

Dockerにelasticsearchとkibanaをインストールする方法

Elasticsearchは現在非常に人気があり、多くの企業が利用しているため、esを知らないと軽蔑...

Linux システムで Tomcat を自動的に起動するための設定方法の紹介

1. /etc/init.d ディレクトリに入ります: cd /etc/init.d 2. tomc...

IIS を使用して X-Forwarded-For ヘッダー (XFF) を呼び出して訪問者の実際の IP を記録する 2 つの方法

問題: IIS を通じて公開された Web サイトは F5 デバイスの背後に配置されています。透過的...