HTMLテーブルの設定方法

HTML テーブルは、Web 開発でよく使用される要素の 1 つです。表を使用すると、データを明確かつ整理された形式でユーザーに提示できるため、ユーザーは情報を取得しやすくなります。

この記事では、HTML で表を作成する方法と、表の境界線、セルの配置、表ヘッダーなどの表のプロパティを設定する方法を紹介します。学習を始めましょう!

1. テーブルを作成する

HTML で、f5d188ed2c074f8b944552db028f98a1 タグを使用してテーブルを作成します。以下は、3 行 2 列のみのテーブルを作成する方法を示す簡単な例です:

<table>
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
  </tr>
</table>

上記のコード ブロックでは、f5d188ed2c074f8b944552db028f98a1 ラベルはテーブルの作成を意味し、a34de1251f0d9fe1e645927f19a896e8 ラベルはテーブルの作成を意味します。 ; ラベルは作成を意味します テーブルの行、 ラベルはセルの作成を示します。テーブルでは、各セルを a34de1251f0d9fe1e645927f19a896e8 タグ内に配置し、b6c5a531a458a2e790c1fd6421739d1c タグで識別する必要があります。

2. テーブルの境界線を設定します

テーブルの周囲に境界線を追加する場合は、CSS スタイルを使用してテーブルの境界線属性を設定する必要があります。以下は青色の境界線を設定する例です:

<table>
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
  </tr>
</table>

上の例では、c9ccee2e6ea535a969eb3f532ad9fe89 タグを使用して CSS スタイルを定義しています。テーブルの境界線属性は幅 1 ピクセルで青に設定され、セルの境界線属性も青で幅 1 ピクセルに設定されます。これにより、表に枠線を追加できるようになります。

3. セルの配置を設定する

セル内の内容を配置したい場合は、CSS スタイルの text-align 属性を使用できます。以下に、セルの内容を中央揃えにする方法を示す例を示します。

<table>
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
  </tr>
</table>

上記の例では、CSS スタイルの text-align プロパティがすべてのセルに適用されます。これは、テーブル内のすべてのセルの内容が中央に配置されることを意味します。

4. ヘッダーの設定

テーブルでは、b4d429308760b6c2d20d6300079ed38e タグを使用してセルの最初の行の内容をラップし、ヘッダーとしてマークできます。このとき、セルはヘッダーであることを示すために太字になります。ヘッダーの追加方法を示す例は次のとおりです:

<style>
  th {
    background-color: gray;
    color: white;
    font-weight: bold;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

上の例では、b4d429308760b6c2d20d6300079ed38e タグがヘッダー セルに使用されています。 CSS スタイルは、表ヘッダーの色、背景、フォント サイズ、その他のプロパティを変更して、セルの内容と視覚的に区別できるようにするために使用されます。

概要

上記の紹介を通じて、読者は HTML テーブルの基本的な使用法と、CSS スタイルを使用してテーブルを変更する方法を理解できたと思います。最後に、実際の開発では、テーブルがサーバーと対話するために JavaScript やその他のテクノロジを使用することが多く、テーブルがより便利なツールになることを皆さんに思い出していただきたいと思います。

以上がHTMLテーブルの設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。