HTMLのテーブルのrowspan属性の使い方
rowspan 属性は、HTMLのテーブルにおいて、セルが複数行にまたがるようにするために使用します。
これにより、テーブルのレイアウトをより柔軟に設計することが可能になります。
以下に、rowspan 属性を使ったテーブルの例を示します。
この例では、HTMLとCSSのコードを別々のファイルで示し、クラス名やID名には「test-」を付けています。
HTMLファイル (index.html)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>テーブルのrowspan属性の例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <table class="test-table"> <thead> <tr> <th class="test-header">項目1</th> <th class="test-header">項目2</th> <th class="test-header">項目3</th> </tr> </thead> <tbody> <tr> <td class="test-cell" rowspan="2">セル1</td> <td class="test-cell">セル2</td> <td class="test-cell">セル3</td> </tr> <tr> <td class="test-cell">セル4</td> <td class="test-cell">セル5</td> </tr> <tr> <td class="test-cell">セル6</td> <td class="test-cell">セル7</td> <td class="test-cell">セル8</td> </tr> </tbody> </table> </body> </html>
CSSファイル (styles.css)
.test-table { width: 100%; border-collapse: collapse; } .test-header, .test-cell { border: 1px solid #ddd; padding: 8px; text-align: left; } .test-header { background-color: #f4f4f4; }
コードの説明
1. HTMLファイル:
- table タグでテーブルを定義しています。
- thead セクションでは、テーブルのヘッダー行を設定し、th タグを使用して各列のヘッダーを作成しています。
- tbody セクションでは、テーブルのデータ行を定義し、tr タグで行を作成します。
- td タグでテーブルのセルを作成し、rowspan="2" 属性を設定して「セル1」が2行にまたがるようにしています。
2. CSSファイル:
- .test-table クラスはテーブル全体のスタイルを設定します。
border-collapse: collapse プロパティを使用して、テーブルセルの境界線を重ね合わせて、見た目をスッキリさせています。
- .test-header と .test-cell クラスは、それぞれテーブルヘッダーとセルのスタイルを設定します。
ボーダーやパディング、背景色などを指定して、テーブルを視覚的に整えています。
この例では、rowspan 属性により、「セル1」が2行にまたがって表示されるようになっています。
これにより、テーブルのレイアウトに柔軟性が増し、複雑なデータを整理する際に便利です。