HTML5におけるテーブルの意味-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML5におけるテーブルの意味

醉折花枝作酒筹

Jun 07, 2021 am 11:17 AM

html table

HTML では、table はテーブルであり、構文形式は「
table content
」です。単純な HTML テーブルには、table 要素、1 つ以上の tr、th、および td 要素が含まれます。tr 要素はテーブルの行を定義し、th 要素はヘッダーを定義し、td 要素はテーブルのセルを定義します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

単純な HTML テーブルは、table タグと 1 つ以上の tr、th、td 要素で構成されます。

table タグ

table タグは、単純なテーブルを定義できます。主にテーブルの外枠を制御するために使用されます。マージン属性があります。主にテーブルの外側の境界線を設定するために使用されます。 border 属性はテーブルの境界線を設定するために使用され、cellspacing 属性はセル間の空白スペースを指定するために使用されます。
tr は、テーブル内の複数の行を分割するために使用されるメインの部分です。通常、高さを設定するためにのみ使用する必要があります。

td 部分:

td は制御に使用されます。各セルの属性は、各セルの上下左右の境界線をそれぞれ制御できます。これにはパディング属性も含まれます。

th 部分:

th の使用法は、テーブルのヘッダーを区別するために使用されることを除いて、td の使用法と同じです。

#注: 表内の単位としてパーセンテージを使用することとピクセルを使用することは同じです。

#例:

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>NAME</th>
        <th>AGE</th>
        <th>NUMBER</th>
      </tr>
      <tr>
        <td>xm</td>
        <td>10</td>
        <td>2020</td>
      </tr>
      <tr>
        <td>xh</td>
        <td>3</td>
        <td>2021</td>
      </tr>
      <tr>
        <td>xf</td>
        <td>4</td>
        <td>2010</td>
      </tr>
    </table>
  </body>
</html>

ログイン後にコピー

効果画像:

テーブルの行間および列間処理

セルのcolspan属性を設定して列間で結合したり、セルのrowspan属性を設定したりすることもできます。以下に示すように、セルを結合します。

例:

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>NAME</th>
        <th>AGE</th>
        <th>NUMBER</th>
      </tr>
      <tr>
        <td rowspan="2">xm</td>
        <td>10</td>
        <td>2020</td>
      </tr>
      <tr>
        <td>3</td>
        <td>2021</td>
      </tr>
      <tr>
        <td>xf</td>
        <td>4</td>
        <td>2010</td>
      </tr>
    </table>
  </body>
</html>

ログイン後にコピー

結果: HTML5におけるテーブルの意味