テーブルCSSを設定する

Web 開発では、テーブルは一般的な HTML 要素であり、通常はデータまたは情報を表示するために使用されます。表をより美しく、読みやすくするために、CSS スタイルを使用してカスタマイズできます。今回はテーブルのCSSスタイルを設定する方法を紹介します。

1. 基本的なスタイル設定

1. テーブルの境界線のスタイル設定

table {
  border-collapse: collapse;  /*合并单元格边框*/
  border: 1px solid #ddd;  /*设置边框样式*/
}

2. テーブルの幅と高さの設定

table {
  width: 100%; /*设置表格的宽度*/
  height: auto; /*设置表格的高度*/
}

3. テーブル ヘッダーとテーブル コンテンツのスタイル設定

テーブル ヘッダー (thead) とテーブル コンテンツ (tbody) では、異なるスタイルを設定できます。以下に示すように:

table thead th {
  background-color: #f2f2f2; /*设置表头背景色*/
  font-weight: bold; /*设置表头字体加粗*/
}

table tbody td {
  padding: 10px; /*设置单元格内边距*/
}

2. 高度なスタイル設定

1. 表の横断歩道のスタイル設定

CSS を使用して偶数行と奇数行を作成できます。テーブルの行には、区別しやすくするために異なる背景色が付けられています。

table tr:nth-child(even) {
  background-color: #f2f2f2; /*设置偶数行背景色*/
}

table tr:nth-child(odd) {
  background-color: #fff; /*设置奇数行背景色*/
}

2. 表のテキストの配置と行の折り返しの設定

表内のテキストの配置とテキストの折り返しは、CSS を通じて設定することもできます。

table th {
  text-align: center; /*设置表头文字居中对齐*/
}

table td {
  text-align: left; /*设置表格内容文字左对齐*/
  white-space: nowrap; /*设置文本不换行*/
}

3. 表のセルの結合スタイル設定

下の図に示すように、表の 2 つのセルを結合して、より複雑なデータ表示を表示できます。

<table>
  <tr>
    <td rowspan="2">合并单元格</td>
    <td>第一行第二列</td>
    <td>第一行第三列</td>
  </tr>
  <tr>
    <td colspan="2">第二行合并单元格</td>
  </tr>
</table>

以上、テーブルCSSのスタイル設定方法をいくつか紹介しましたので、皆様のお役に立てれば幸いです。 CSS を柔軟に使用することで、表にさまざまなスタイルや視覚効果を表示し、ページをより美しく、読みやすくすることができます。

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