HTML テーブルタグについての簡単な説明

HTML テーブルタグについての簡単な説明
主にその構造といくつかの重要な特性について説明します。少しずつ改善しながら紹介していきます。
1) 基本的な構造は次のとおりです: <tr> は表内の行を表し、<td> は行内の列を表します。列について話すとき、実際にはそれを Word のセルと考えることができます。 <th> は実際にはセルですが、表のヘッダーとして使用されます。意味的に言えば、<td> はテーブル内のデータ単位を示し、<th> はテーブル内の列または行のタイトルを示します。

コードをコピー
コードは次のとおりです。

<テーブル>
<tr><th></th></tr>
<tr><td><td></tr>
</テーブル>

2) タイトルは行タイトルまたは列タイトルである場合があります。これらを区別するにはどうすればよいでしょうか?スコープ属性scope=row/colを使用する必要があります。


コードをコピー
コードは次のとおりです。

<テーブル>
<tr><th スコープ="col"></th></tr>
<tr><td><td></tr>
</テーブル>

3) 表には独自のタイトルもあります <caption>

コードをコピー
コードは次のとおりです。

<テーブル>
<caption>表のタイトル</caption>
<tr><th スコープ="col"></th></tr>
<tr><td><td></tr>
</テーブル>

4) テーブルにサマリー属性を追加する

コードをコピー
コードは次のとおりです。

<table summary="これは表の要約です">
<caption>表のタイトル</caption>
<tr><th スコープ="col"></th></tr>
<tr><td><td></tr>
</テーブル>

5) 表の境界線モデルとセルのデフォルトのパディング。
表の境界線には、分離と結合の 2 つの表示モードがあります。 border-collapse: Separate/collapse IE6 のデフォルトのスタイルは分離されており、3 次元のように見えます。実際には、各セルには独自の独立した境界があります。マージとは境界を共有することを意味します。
テーブル { 境界線の折りたたみ: 折りたたみ; }
デフォルトでは、セル間には空白があります。 border-spacing を使用してこれを制御できますが、IE6 ではサポートされていないため、ほとんど使用されません。 IE6
セル間隔を使用します。

コードをコピー
コードは次のとおりです。

<table summary="これは表の内容の概要です" cellspacing="0">
<caption>表のタイトル</caption>
<tr><th スコープ="col"></th></tr>
<tr><td><td></tr>
</テーブル>

6) 行と列をいくつか追加します。そして、各 <th> に id を追加します。

コードをコピー
コードは次のとおりです。

<table summary="これは表の内容の概要です" cellspacing="0">
<caption>表のタイトル</caption>
<tr>
<th scope="col" id="name">名前</th>
<th scope="col" id="address">住所</th>
<th scope="col" id="databirthday">生年月日</th>
</tr>
<tr>
<td>イーウィー<td>
<td>湖北<td>
<td>19870102<td>
</tr>
<tr>
<td>レウェ<td>
<td>武漢<td>
<td>419880103<td>
</tr>
<tr>
<td>ertww<td>
<td>宜昌<td>
<td>19870205<td>
</tr>
</テーブル>

7) テーブルを論理的に分割します <thead><tbody><tfoot>。テーブルを複数の論理領域に分割した後、CSS を使用してパフォーマンスをより適切に制御できます。

コードをコピー
コードは次のとおりです。

<table summary="これは表の内容の概要です" cellspacing="0">
<caption>表のタイトル</caption>
<頭>
<tr>
<th scope="col" id="name">名前</th>
<th scope="col" id="address">住所</th>
<th scope="col" id="databirthday">生年月日</th>
</tr>
</thead>
<t本文>
<tr>
<td>イーウィー<td>
<td>湖北<td>
<td>19870102<td>
</tr>
<tr>
<td>レウェ<td>
<td>武漢<td>
<td>419880103<td>
</tr>
<tr>
<td>ertww<td>
<td>宜昌<td>
<td>19870205<td>
</tr>
<t本文>
</テーブル>

このエッセイでは、テーブルの構造について簡単に説明します。お役に立てれば幸いです。

<<:  Dockerコンテナでルート権限を取得する方法

>>:  大規模なMySQLデータベース用のマスタースレーブシステムを構築するアイデアを共有する

推薦する

ローカルでビルドした Docker イメージを Dockerhub に公開する方法

今日は、ローカルの Docker プロジェクト イメージを dockerhub に公開する方法を紹介...

IE8ブラウザはWebページ標準に完全互換となる

<br />海外メディアの報道によると、マイクロソフトはソフトウェアの相互運用性への取り...

Dockerコンテナ内で2つのプロセスを開始するときのDockerfile実装コード

最近、cronスケジュールタスク用のdockerを作りたいと思っており、Dockerfileで次のよ...

Centos8 で Docker を使用して Django プロジェクトをデプロイする詳細なチュートリアル

導入この記事では、django + uwsgi + nginx デプロイメントを使用して、Docke...

Vue vee-validateプラグインの簡単な使い方

目次1. インストール2. インポート3. 検証ルールを定義します(エクスポート用に js ファイル...

Reactの原理の説明

目次1. setState() の説明1.1 データの更新1.2 推奨構文1.3 2番目のパラメータ...

MySQLデータベースのマスタースレーブ同期の実際のプロセスの詳細な説明

目次インストール環境の説明MySQLデータベースサービスをインストールするメインライブラリを構成する...

ブリージングカルーセルを実装するネイティブJS

今日は、ネイティブ JS で実装されたブリージング カルーセルを紹介します。効果は次のとおりです。 ...

MySQL の完全なデータベース バックアップ データを使用して単一のテーブル データを復元する方法

序文データベースをバックアップするときは、データベース全体のバックアップを使用します。ただし、何らか...

WeChatアプレットが複数行テキストのスクロール効果を実現

この記事の例では、WeChatアプレットで複数行のテキストスクロールを実装するための具体的なコードを...

Webpackプラグインを書いてnpmに公開するための80行のコード

1. はじめに最近、 Webpackの原理を勉強しています。これまでは Webpack の設定方法し...

Windows での Apache+Tomcat7 負荷分散構成方法の詳細な説明

準備Windows Server 2008 R2 Enterprise (2.40GH、8GB、64...

Vue+nodeはオーディオ録音・再生機能を実現

結果: コードロジックを実装するのが主な部分であり、具体的なページ構造を一つ一つ紹介することはありま...

Vue プロジェクトをパッケージ化して Apache サーバーにデプロイする手順

開発環境では、vue プロジェクトは、ローカルで Express サーバーを構築することをベースにし...

React Hooksの使用例

目次簡単なコンポーネントの例より複雑な親子コンポーネントのケースオンセレクトの書き方反応する子供Re...