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データベース用のマスタースレーブシステムを構築するアイデアを共有する

推薦する

MYSQL 文字関数を使用してデータをフィルタリングすることに関する質問

問題の説明:構造:テストには2つのフィールドがあります。これらは col1 と col2 で、どちら...

JavaScript ベースの Web 計算機の実装

この記事では、ウェブ計算機のマインスイーパゲームを実装するためのJavaScriptの具体的なコード...

背景属性の8つの属性値の詳細解説(面接の質問)

CSSの背景プロパティの値背景色背景画像背景繰り返し背景位置背景添付複合プロパティ: 背景: ba...

docker に openjdk をインストールして jar パッケージを実行する方法

画像をダウンロード docker プル openjdkデータボリュームの作成java_appデータボ...

Javascript 文字列メソッドの詳細な説明

目次文字列の長さ: 長さcharAt() charCodeAt()文字列に値が含まれているかどうかを...

...

Vue における {{}}、v-text、v-html の違いと用途の詳細な説明

{ {}} 値を取得すると、タグの元のコンテンツはクリアされませんv-textは値を取得し、タグの元...

Nginx 最適化サービスで Web ページ圧縮を実装する方法

リソースを節約するためにWebページの圧縮を設定する1.まず、設定を変更しましょう vim /usr...

Linux での Docker と portainer の設定方法

1.Docer CEをインストールして使用するこの記事では、CentOS 7 を例に Docker ...

JS を使用して要素がビューポート内にあるかどうかを確認する方法

序文要素がビューポート内にあるかどうかを監視する2つの方法を共有する1. 位置計算Element.g...

Alibaba Cloud CentOS 7 に MySQL 8.0.13 をインストールする方法

1. MySQL インストール パッケージをダウンロードします(ここにはコツがあります。おそらく、こ...

MySQL alter ignore構文の詳細な説明

今日仕事中に、ビジネス側から次のような質問をされました。テーブルがあり、一意のフィールドを追加する必...

ウェブサイトのユーザビリティを向上させる10のヒント

企業の Web サイト、個人のブログ、ショッピング Web サイト、ゲーム Web サイトなど、どの...

TypeScript におけるジェネリックケースの詳細な説明

ジェネリックの定義 // 要件 1: ジェネリックは指定されていないデータ型をサポートできるため、渡...