HTMLで表（テーブル）を作成する方法と、デザインをCSSでカスタマイズする方法、さらに実用的な応用例を紹介します。これを理解することで、視覚的に見やすく、機能的なテーブルを作成できるようになります。
1. 基本的なテーブルタグ
HTMLでは、表を作成するために以下のタグを使用します。
| タグ | 説明 |
|---|---|
<table> | 表全体を囲むタグ |
<tr> | 表の行（row）を作成するタグ |
<td> | 表のセル（data）を定義するタグ |
<th> | 表のヘッダーセルを定義するタグ |
例：基本的なテーブルの構造
<table>
<tr>
<th>商品名</th>
<th>価格</th>
<th>在庫</th>
</tr>
<tr>
<td>りんご</td>
<td>100円</td>
<td>あり</td>
</tr>
<tr>
<td>みかん</td>
<td>80円</td>
<td>なし</td>
</tr>
</table>
このように、<th>はヘッダーセルを太字に、<td>は通常のデータセルを定義します。
2. テーブルのデザインとスタイリング
テーブルのデザインを改善するためには、HTMLの属性やCSSを使います。
2-1. 属性を使った基本的なカスタマイズ
| 属性名 | 説明 |
|---|---|
border="1" | 表に枠線を追加 |
cellpadding | セル内の余白を指定 |
cellspacing | セル間の間隔を指定 |
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
<tr>
<td>りんご</td>
<td>100円</td>
</tr>
</table>
2-2. CSSを使ったスタイリング
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
</style>
border-collapse: collapse;は、セルの枠線が重ならないようにするプロパティです。background-colorとfont-weightでヘッダーセルのスタイルを指定できます。
3. テーブルの応用例
3-1. テーブルソート機能の追加
JavaScriptを使ってソート機能を実装できます。以下は簡単な例です。
<script>
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
if (dir == "asc" && x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
} else if (dir == "desc" && x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount ++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
<table id="myTable">
<tr>
<th onclick="sortTable(0)">商品名</th>
<th onclick="sortTable(1)">価格</th>
</tr>
<tr>
<td>りんご</td>
<td>100円</td>
</tr>
<tr>
<td>バナナ</td>
<td>150円</td>
</tr>
</table>
このコードでは、ヘッダーをクリックすることで列のソートを実現します。sortTable(0)は商品名、sortTable(1)は価格の列をソートします。
3-2. 複雑なレイアウト
結合セルを使うと、複雑なレイアウトを作成できます。
<table>
<tr>
<th rowspan="2">カテゴリ</th>
<th colspan="2">製品情報</th>
</tr>
<tr>
<th>製品名</th>
<th>価格</th>
</tr>
<tr>
<td>果物</td>
<td>りんご</td>
<td>100円</td>
</tr>
</table>
rowspanとcolspanを使ってセルの結合が可能です。