テーブルタグを使ったテーブルの作成
テーブルタグ <table>
の概要
定義
<table>
タグは、HTML文書で表(テーブル)を作成するために使用されます。
役割
データを行と列の形式で整理して表示します。
テーブルの基本構造
テーブルは以下の要素で構成されます。
<table>
:テーブル全体を囲むタグ。<tr>
:テーブルの行を定義するタグ(table row)。<td>
:テーブルのデータセルを定義するタグ(table data)。<th>
:テーブルのヘッダーセルを定義するタグ(table header)。
テーブルの基本的な使い方
テーブルの基本構造
<!DOCTYPE html>
<html>
<head>
<title>テーブルの基本構造</title>
</head>
<body>
<h1>テーブルの基本構造</h1>
<table>
<tr>
<th>ヘッダー1</th>
<th>ヘッダー2</th>
<th>ヘッダー3</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
<tr>
<td>データ4</td>
<td>データ5</td>
<td>データ6</td>
</tr>
</table>
</body>
</html>
実践例
以下の例は、簡単なテーブルを作成しています。
<!DOCTYPE html>
<html>
<head>
<title>学生の成績表</title>
</head>
<body>
<h1>学生の成績表</h1>
<table border="1">
<tr>
<th>名前</th>
<th>数学</th>
<th>英語</th>
<th>科学</th>
</tr>
<tr>
<td>田中太郎</td>
<td>90</td>
<td>85</td>
<td>80</td>
</tr>
<tr>
<td>鈴木花子</td>
<td>78</td>
<td>88</td>
<td>94</td>
</tr>
<tr>
<td>佐藤次郎</td>
<td>82</td>
<td>79</td>
<td>85</td>
</tr>
</table>
</body>
</html>
テーブルの属性
border
属性
テーブルに枠線を追加します。
<table border="1">
...
</table>
cellpadding
属性と cellspacing
属性
セルの内側の余白(cellpadding
)とセル間の余白(cellspacing
)を指定します。
<table border="1" cellpadding="10" cellspacing="5">
...
</table>
テーブルのスタイリング
CSSによるスタイリング
テーブルの外観をCSSでカスタマイズすることができます。
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>CSSを使用したテーブルのスタイリング</h1>
<table>
<tr>
<th>名前</th>
<th>数学</th>
<th>英語</th>
<th>科学</th>
</tr>
<tr>
<td>田中太郎</td>
<td>90</td>
<td>85</td>
<td>80</td>
</tr>
<tr>
<td>鈴木花子</td>
<td>78</td>
<td>88</td>
<td>94</td>
</tr>
<tr>
<td>佐藤次郎</td>
<td>82</td>
<td>79</td>
<td>85</td>
</tr>
</table>
</body>
</html>
ストライプテーブル
交互に行の色を変えることで、読みやすさを向上させます。
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h1>ストライプテーブルの例</h1>
<table>
<tr>
<th>名前</th>
<th>数学</th>
<th>英語</th>
<th>科学</th>
</tr>
<tr>
<td>田中太郎</td>
<td>90</td>
<td>85</td>
<td>80</td>
</tr>
<tr>
<td>鈴木花子</td>
<td>78</td>
<td>88</td>
<td>94</td>
</tr>
<tr>
<td>佐藤次郎</td>
<td>82</td>
<td>79</td>
<td>85</td>
</tr>
</table>
</body>
</html>
複雑なテーブル
ヘッダーとフッター
テーブルのヘッダー(<thead>
)とフッター(<tfoot>
)を定義することで、特定の行を強調します。
<!DOCTYPE html>
<html>
<head>
<title>ヘッダーとフッターの例</title>
</head>
<body>
<h1>テーブルのヘッダーとフッター</h1>
<table border="1">
<thead>
<tr>
<th>名前</th>
<th>数学</th>
<th>英語</th>
<th>科学</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">期末試験の成績</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>田中太郎</td>
<td>90</td>
<td>85</td>
<td>80</td>
</tr>
<tr>
<td>鈴木花子</td>
<td>78</td>
<td>88</td>
<td>94</td>
</tr>
<tr>
<td>佐藤次郎</td>
<td>82</td>
<td>79</td>
<td>85</td>
</tr>
</tbody>
</table>
</body>
</html>
セルの結合
colspan
属性と rowspan
属性を使用して、セルを結合することができます。
<!DOCTYPE html>
<html>
<head>
<title>セルの結合例</title>
</head>
<body>
<h1>セルの結合</h1>
<table border="1">
<tr>
<th>名前</th>
<th>科目</th>
<th>成績</th>
</tr>
<tr>
<td rowspan="3">田中太郎</td>
<td>数学</td>
<td>90</td>
</tr>
<tr>
<td>英語</td>
<td>85</td>
</tr>
<tr>
<td>科学</td>
<td>80</td>
</tr>
<tr>
<td>鈴木花子</td>
<td colspan="2">成績非公開</td>
</tr>
</table>
</body>
</html>
まとめ
テーブルタグ(<table>
、<tr>
、<td>
、<th>
)を使用することで、
データを行と列の形式で整理して表示することができます。
適切な属性とCSSを使用してテーブルのスタイルをカスタマイズし、
読みやすく視覚的に魅力的なテーブルを作成することが重要です。
さらに、テーブルのヘッダーとフッター、セルの結合などの高度な機能を使用することで、
複雑なデータ構造を効果的に表現できます。
高度な配列メソッド:map, filter, reduce
8月 20, 2024モジュールとインポート/エクスポートについて
8月 17, 2024ローカルストレージとセッションストレージ
8月 16, 2024