HTMLテーブルレイアウトを使用してデータ表示ページを作成する方法

HTML テーブル レイアウトを使用してデータ表示ページを作成する方法

HTML テーブルは、データ表示ページの作成に使用できる一般的なレイアウト ツールです。表の構造や属性を合理的に活用することで、見やすく、美しいデータ表示ページを作成できます。

1. 基本的なテーブル構造

HTML では、テーブルは table、tr、td タグで構成されます。 table タグはテーブルの定義に使用され、tr タグはテーブルの行の定義に使用され、td タグはテーブルのセルの定義に使用されます。基本的なテーブル構造の例を次に示します。

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

上記の例では、タイトル バーは th タグを使用して定義され、データ行は td タグを使用して定義されます。 th タグは通常、タイトルや列名を表示するためにテーブルの最初の行で使用され、td タグは通常のテーブル データを表示するために使用されます。

2. 表のスタイルを設定する

表のスタイルは CSS を通じて設定できます。テーブル スタイルをカスタマイズするという目的を達成するために、table、tr、td タグにさまざまなスタイルを設定できます。簡単な例を次に示します:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  
  th {
    background-color: #f0f0f0;
    font-weight: bold;
  }
</style>

上の例では、親コンテナの幅を満たすようにテーブル ラベルの幅を 100% に設定します。これには border-collapse: Collapse 属性を使用します。表 境界線は 1 つにマージされます。th タグと td タグは両方とも境界線のスタイルとパディングを設定し、th タグは背景色とフォントの太さも設定します。

3. セルの結合

場合によっては、より複雑なデータを表示するためにセルを結合する必要があります。 HTML には、セルを結合するためのcolspan 属性と rowspan 属性が用意されています。以下は、colspan 属性を使用してテーブルのセルを結合する例です。

<table>
  <tr>
    <th colspan="2">合并单元格</th>
    <th>普通单元格</th>
  </tr>
  <tr>
    <td rowspan="2">合并单元格</td>
    <td>合并单元格</td>
    <td>普通单元格</td>
  </tr>
  <tr>
    <td>合并单元格</td>
    <td>普通单元格</td>
  </tr>
</table>

上の例では、colspan="2" を使用して 2 つの列にわたる最初の行のタイトル バーのセルを結合し、次を使用します。 rowspan= "2" を指定すると、最初の列のセルが両方の行にマージされます。

4. テーブル ヘッダーとテーブル本体を使用したデータのグループ化

大規模なデータ セットの場合、テーブル ヘッダーとテーブル本体をそれぞれ タグと

タグ内に配置できます。これにより、テーブルがより構造化され、レンダリング時のパフォーマンスがより最適化されます。例を次に示します:

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>18</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

上の例では、 タグを使用してテーブルの先頭を定義し、

タグを使用してテーブルの本体を定義します。

上記のテクニックを適切に使用することで、HTML テーブル レイアウトを使用して、美しく読みやすいデータ表示ページを作成できます。もちろん、実際のニーズに応じて、背景色や境界線のスタイルの設定など、テーブルを美しくするための CSS スタイルをさらに追加することもできます。

上記の内容がデータ表示ページ作成のお役に立てば幸いです。

以上がHTMLテーブルレイアウトを使用してデータ表示ページを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。