Web開発における知見共有系ページ
- HTMLのテーブルを2段に分ける方法
- HTMLファイル (index.html)
- CSSファイル (styles.css)
HTMLのテーブルを2段に分ける方法について説明します。 テーブルを2段に分けるとは、1つのテーブル内で複数の行や列をグループ化し、それらを別の部分として視覚的に分けることを指します。 これにより、テーブルの内容を見やすく整理することができます。
まず、HTMLファイルとCSSファイルを別々に作成し、テーブルのレイアウトとスタイルを定義します。 以下に具体的な例を示します。
HTMLファイル (index.html) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>テーブルの2段構成</title> </head> <body> <table class="test-table"> <thead class="test-header"> <tr> <th class="test-th">項目A</th> <th class="test-th">項目B</th> <th class="test-th">項目C</th> </tr> </thead> <tbody class="test-body"> <tr class="test-row-group1"> <td class="test-td">データA1</td> <td class="test-td">データB1</td> <td class="test-td">データC1</td> </tr> <tr class="test-row-group1"> <td class="test-td">データA2</td> <td class="test-td">データB2</td> <td class="test-td">データC2</td> </tr> <tr class="test-row-group2"> <td class="test-td">データA3</td> <td class="test-td">データB3</td> <td class="test-td">データC3</td> </tr> <tr class="test-row-group2"> <td class="test-td">データA4</td> <td class="test-td">データB4</td> <td class="test-td">データC4</td> </tr> </tbody> </table> </body> </html> CSSファイル (styles.css) .test-table { width: 100%; border-collapse: collapse; } .test-header { background-color: #f2f2f2; } .test-th, .test-td { border: 1px solid #ddd; padding: 8px; text-align: left; } .test-row-group1 { background-color: #e6f7ff; } .test-row-group2 { background-color: #ffebcc; }この例では、テーブルはtest-tableというクラス名で定義されています。 table内のheader部分はtest-headerクラスでスタイルが適用され、thead要素がその中に含まれています。
tbodyの中で、行を2つのグループに分けています。 最初のグループ（test-row-group1）には2行が含まれ、背景色が青系（#e6f7ff）に設定されています。 次のグループ（test-row-group2）にも2行が含まれており、背景色がオレンジ系（#ffebcc）に設定されています。 これにより、2つの段として視覚的に区別されます。
このようにして、テーブルの内容を2段に分けることができます。 これにより、データのカテゴリやグループごとに色分けされ、見やすさが向上します。 さらに、CSSファイルを使用することで、スタイルの再利用が容易になり、HTMLコードをクリーンに保つことができます。
また、このアプローチを応用すれば、さらに多くの段に分けたり、異なるスタイルを適用したりすることも可能です。 例えば、異なる背景色やフォントスタイルを使って、異なる情報の強調ができます。
テーブルのデザインやレイアウトは、ユーザーの利便性を向上させるために非常に重要です。 視覚的に整理されたテーブルは、データの理解を助け、情報をより効果的に伝える手段となります。