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