HTML設定テーブル-フロントエンドQ&A-php.cn

HTML設定テーブル

WBOY

リリース： 2023-05-15 17:19:09

オリジナル

1396 人が閲覧しました

HTML のテーブルは、データを表示するために使用されるマークアップ言語です。 Web ページのレイアウト設計において、表は重要な要素であり、設定によってより美しい効果を表現することができます。この記事では、読者がテーブルの使い方をよりよく習得できるように、HTML でテーブルを設定するためのいくつかのテクニックを紹介します。

表の境界線を設定する

表の境界線を設定すると、表がより明確に見え、読者が区別しやすくなります。一般的な設定方法は、border 属性を使用することです。 border プロパティでは、テーブルの境界線の幅と色を設定できます。サンプルコードは次のとおりです。

<table border="1">
  <tr>
    <td>第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td>第三列</td>
    <td>第四列</td>
  </tr>
</table>

ログイン後にコピー

border="1" は、境界線の幅が 1 ピクセルであることを意味します。もちろん、より大きな値を設定して境界線の幅を広げることもできます。境界線の色とスタイルを制御したい場合は、CSS プロパティを使用して設定することもできます。

テーブルの幅を設定する

テーブル内のコンテンツが多すぎる場合、テーブルは自動的に幅が広くなりますが、テーブルが配置されているコンテナの幅が配置できる場所が限られている場合、テーブルの内容はオーバーフローコンテナーになります。この状況を回避するには、テーブルの幅を設定してテーブルのサイズを制御します。テーブルの幅を設定するにはさまざまな方法がありますが、この記事では一般的な 2 つの方法を紹介します。

(1) width 属性を使用します。 width 属性はテーブルの幅を設定できます。これはパーセント値またはピクセル値です。サンプルコードは以下のとおりです。

<table width="50%">
  <tr>
    <td>第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td>第三列</td>
    <td>第四列</td>
  </tr>
</table>

ログイン後にコピー

(2) CSS スタイルを使用します。 CSS スタイルを使用すると、テーブルのサイズとスタイルをより適切に制御できます。サンプルコードは次のとおりです。

<style>
  table {
    width: 50%;
    border-collapse: collapse;
  }
  th,td {
    border: 1px solid black;
    padding: 5px;
  }
</style>

<table>
  <tr>
    <th>第一列</th>
    <th>第二列</th>
  </tr>
  <tr>
    <td>第三列</td>
    <td>第四列</td>
  </tr>
</table>

ログイン後にコピー

上記のサンプルコードでは、CSS スタイルを使用してテーブルの幅、境界線の間隔、およびセルのパディングを設定します。

ヘッダーとテーブル本体を設定する

テーブルでは、一部のデータがより重要であり、ヘッダーを使用して識別する必要がある場合があります。ヘッダーが設定されていない場合、読者が表から必要な情報をすぐに見つけることが困難になる可能性があります。したがって、テーブルを設定するときは、ヘッダーとテーブル本体をマークする必要があります。サンプルコードは次のとおりです。

<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>25</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

ログイン後にコピー

上記のサンプルコードでは、thead タグと tbody タグを使用して、テーブルを 2 つの部分 (テーブルのヘッダーとテーブル本体) に分割します。

行と列を結合する

テーブル内で一部のセルの内容が同じ場合、行と列を結合してテーブルのサイズとサイズを減らすことができます。列、コンテンツの重複。サンプルコードは次のとおりです。

<table border="1">
  <tr>
    <td rowspan="2">第一列</td>
    <td>第二列</td>
    <td colspan="2">第三列</td>
  </tr>
  <tr>
    <td>第四列</td>
    <td>第五列</td>
  </tr>
</table>

ログイン後にコピー

上記のサンプルコードでは、rowspan 属性を使用して最初の列のセルを 2 つの行にマージし、colspan 属性を使用して 3 番目の列のセルを 2 つの列にマージします。

セルの背景色とフォントの色を設定します

テーブル内の特定の情報を強調表示する必要がある場合は、セルの背景色とフォントを設定することで目的を達成できます。色。一般的に使用される設定は、CSS スタイルと bgcolor プロパティを使用することです。サンプルコードは次のとおりです。

<style>
  td.red { background-color: red; color: white; }
  td.green { background-color: green; color: white; }
</style>

<table>
  <tr>
    <td class="red">第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td class="green">第三列</td>
    <td>第四列</td>
  </tr>
</table>

或者

<table>
  <tr>
    <td bgcolor="red" color="white">第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td bgcolor="green" color="white">第三列</td>
    <td>第四列</td>
  </tr>
</table>

ログイン後にコピー

上記のサンプルコードでは、CSS スタイルと bgcolor/color プロパティを使用して、セルの背景色とフォントの色を設定します。

概要

HTML のテーブルは一般的に使用されるマークアップ言語であり、読者が適切な設定を行うことでテーブル内のデータをより深く理解できるようになります。この記事では、表の境界線、表の幅、表ヘッダーと表本体の設定、行と列の結合、セルの背景とフォント色の設定など、HTML で表を設定するためのいくつかのテクニックを紹介します。これらのスキルをマスターすることで、table タグをより効果的に使用し、より美しい Web ページレイアウトを作成できるようになります。

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