ホームページ >ウェブフロントエンド >フロントエンドQ&A >テーブルCSSを設定する
Web 開発では、テーブルは一般的な HTML 要素であり、通常はデータまたは情報を表示するために使用されます。表をより美しく、読みやすくするために、CSS スタイルを使用してカスタマイズできます。今回はテーブルのCSSスタイルを設定する方法を紹介します。
1. 基本的なスタイル設定
table { border-collapse: collapse; /*合并单元格边框*/ border: 1px solid #ddd; /*设置边框样式*/ }
table { width: 100%; /*设置表格的宽度*/ height: auto; /*设置表格的高度*/ }
テーブル ヘッダー (thead) とテーブル コンテンツ (tbody) では、異なるスタイルを設定できます。以下に示すように:
table thead th { background-color: #f2f2f2; /*设置表头背景色*/ font-weight: bold; /*设置表头字体加粗*/ } table tbody td { padding: 10px; /*设置单元格内边距*/ }
2. 高度なスタイル設定
CSS を使用して偶数行と奇数行を作成できます。テーブルの行には、区別しやすくするために異なる背景色が付けられています。
table tr:nth-child(even) { background-color: #f2f2f2; /*设置偶数行背景色*/ } table tr:nth-child(odd) { background-color: #fff; /*设置奇数行背景色*/ }
表内のテキストの配置とテキストの折り返しは、CSS を通じて設定することもできます。
table th { text-align: center; /*设置表头文字居中对齐*/ } table td { text-align: left; /*设置表格内容文字左对齐*/ white-space: nowrap; /*设置文本不换行*/ }
下の図に示すように、表の 2 つのセルを結合して、より複雑なデータ表示を表示できます。
<table> <tr> <td rowspan="2">合并单元格</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td colspan="2">第二行合并单元格</td> </tr> </table>
以上、テーブルCSSのスタイル設定方法をいくつか紹介しましたので、皆様のお役に立てれば幸いです。 CSS を柔軟に使用することで、表にさまざまなスタイルや視覚効果を表示し、ページをより美しく、読みやすくすることができます。
以上がテーブルCSSを設定するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。