この実験では、学生たちは基本的な HTML テーブルタグと属性を使って HTML テーブルを作成し操作する方法を学びます。この実験では、HTML テーブルのコア構造を理解することに焦点が当てられており、<table>、<tr>、<td>、<th>のような必須タグが含まれており、これらは Web ページ上で構造化されたグリッド形式でデータを整理し提示するために不可欠です。
参加者は、基本的なテーブルの作成、ヘッダーとボディセクションの追加、colspan と rowspan を使ったセルのマージ、および基本的なスタイリング属性の適用を含む包括的な学習コースを通じて進歩します。実験が終了するまでに、学生たちは構造的に整った HTML テーブルを構築し、HTML テーブル要素とそれに関連する属性を使ってデータを効果的に表現する方法を理解する実践的なスキルを身につけるでしょう。
このステップでは、HTML テーブルを作成するために使用される基本構造と基本タグを学びます。HTML テーブルは、Web ページ上で構造化されたグリッド形式でデータを整理し表示するために不可欠です。
HTML テーブルは、いくつかの重要なタグを使用して作成されます。
<table>：テーブル全体のメインコンテナ<tr>：テーブルの行を定義します<td>：標準的なテーブルセル（データセル）を定義します<th>：テーブルのヘッダーセルを定義しますこれらの基本的なテーブルタグを示すために、簡単な例を作成しましょう。WebIDE を開き、~/projectディレクトリにbasic_table.htmlという名前の新しいファイルを作成します。
touch ~/project/basic_table.html<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Basic HTML Table</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>San Francisco</td>
</tr>
</table>
</body>
</html>テーブル構造を分解してみましょう。
<table border="1">は、表示可能な境界線付きのテーブルコンテナを作成します。border属性は省略可能です。<tr>は、列タイトル用の<th>ヘッダーセルを含んでいます。<tr>要素は、実際のコンテントを持つ<td>データセルを含んでいます。注：WebIDE で HTML ファイルをプレビューする方法について詳しく学ぶ。
忘れないでください。
<tr>は、テーブルの 1 行を表します。<th>は、ヘッダーセル（通常は太字で中央揃え）に使用されます。<td>は、標準的なデータセルに使用されます。border属性は、テーブル構造を視覚化するのに役立ちます（実際のアプリケーションでは CSS を使用することが好ましいですが）。このステップでは、複数の行と列を持つより複雑なテーブルを作成する方法を学びます。前のステップを基に、異なる行数と列数のテーブルをどのように構築するかを検討し、情報を効果的に表示します。
WebIDE を開き、~/projectディレクトリにproduct_table.htmlという名前の新しいファイルを作成します。複数の行と列を持つテーブルの作成方法を示すために、商品在庫テーブルを作成します。
touch ~/project/product_table.html<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Product Inventory Table</title>
</head>
<body>
<table border="1">
<tr>
<td>Product ID</td>
<td>Product Name</td>
<td>Price</td>
<td>Quantity</td>
</tr>
<tr>
<td>001</td>
<td>Laptop</td>
<td>$999.99</td>
<td>50</td>
</tr>
<tr>
<td>002</td>
<td>Smartphone</td>
<td>$599.99</td>
<td>75</td>
</tr>
<tr>
<td>003</td>
<td>Tablet</td>
<td>$299.99</td>
<td>100</td>
</tr>
</table>
</body>
</html>複数の行と列を持つテーブルを作成する際のポイント：
<tr>（テーブルの行）は、テーブル内の水平方向の行を表します。<tr>の中には、複数の<td>（テーブルデータ）要素があり、列を作成します。<tr>内の<td>要素の数が列数を決定します。border属性は、テーブル構造を視覚化するのに役立ちます。次のように 4 列のテーブルを作成したことに注目してください。
Web ブラウザでの例の出力は、商品在庫の詳細を表示する 4x4 のグリッドを表示します。
このステップでは、セマンティック HTML タグ<thead>、<tbody>、<tfoot>を使用してテーブルの構造を改善し、テーブルの内容をより効果的に整理する方法を学びます。これらのタグは、HTML テーブルの読みやすさとアクセシビリティを向上させるのに役立ちます。
WebIDE を開き、~/projectディレクトリにstudent_grades.htmlという名前の新しいファイルを作成します。テーブルセクションタグの使用方法を示す学生成績テーブルを作成します。
touch ~/project/student_grades.html<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Student Grades Table</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Math</th>
<th>Science</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Alice Johnson</td>
<td>85</td>
<td>90</td>
<td>175</td>
</tr>
<tr>
<td>002</td>
<td>Bob Smith</td>
<td>78</td>
<td>82</td>
<td>160</td>
</tr>
<tr>
<td>003</td>
<td>Charlie Brown</td>
<td>92</td>
<td>88</td>
<td>180</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Class Average</td>
<td>85</td>
<td>86.67</td>
<td>171.67</td>
</tr>
</tfoot>
</table>
</body>
</html>テーブルセクションに関するポイント：
<thead>：列タイトルを持つヘッダー行を含む<tbody>：主なデータ行を含む<tfoot>：要約またはフッター行を含む<th>を、<td>ではなく使用するこの例では、以下が示されています。
<th>を使用した列タイトルを持つヘッダー行<tbody>内の複数のデータ行<tfoot>内のクラス平均を持つフッター行Web ブラウザでの例の出力は、ヘッダー、ボディ、フッター用の明確なセクションを持つ構造化されたテーブルを表示します。
このステップでは、colspan と rowspan 属性を使ってテーブルセルを水平方向と垂直方向にマージする方法を学びます。これらの属性を使うことで、複数のセルを結合して、より複雑で柔軟なテーブルレイアウトを作成できます。
WebIDE を開き、~/project ディレクトリに event_schedule.html という名前の新しいファイルを作成します。セルマージを示すイベントスケジュールテーブルを作成します。
touch ~/project/event_schedule.html<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Conference Event Schedule</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Time</th>
<th>Room A</th>
<th>Room B</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00 AM</td>
<td rowspan="2">Keynote Speech</td>
<td>Workshop 1</td>
</tr>
<tr>
<td>10:00 AM</td>
<td>Workshop 2</td>
</tr>
<tr>
<td>11:00 AM</td>
<td colspan="2">Lunch Break</td>
</tr>
<tr>
<td>12:00 PM</td>
<td>Panel Discussion</td>
<td>Networking Session</td>
</tr>
</tbody>
</table>
</body>
</html>colspan と rowspan に関するポイント：
colspan：列にわたってセルを水平方向にマージする
<td colspan="2"> は、セルを 2 列にまたがるように設定しますrowspan：行にわたってセルを垂直方向にマージする
<td rowspan="2"> は、セルを 2 行にまたがるように設定しますこの例では：
Web ブラウザでの例の出力は、マージされたセルを持つテーブルが表示され、よりコンパクトで整理されたスケジュールが表示されます。
このステップでは、インライン CSS と HTML 属性を使って HTML テーブルをスタイリッシュにカスタマイズする方法を学びます。適切なスタイリングは、テーブルの読みやすさと視覚的な魅力を向上させることができます。
WebIDE を開き、~/projectディレクトリにstyled_table.htmlという名前の新しいファイルを作成します。さまざまなスタイリング手法を使ったテーブルを作成します。
touch ~/project/styled_table.html<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Styled Product Catalog</title>
<style>
table {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
}
th {
background-color: #4caf50;
color: white;
padding: 10px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
td {
border: 1px solid #ddd;
padding: 8px;
}
tr:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Price</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Wireless Headphones</td>
<td>$99.99</td>
<td>50</td>
</tr>
<tr>
<td>002</td>
<td>Smart Watch</td>
<td>$199.99</td>
<td>30</td>
</tr>
<tr>
<td>003</td>
<td>Bluetooth Speaker</td>
<td>$79.99</td>
<td>75</td>
</tr>
</tbody>
</table>
</body>
</html>示されている主なスタイリング手法：
border-collapse：テーブルセル間の余白を削除する:nth-child(even)を使った交互の行の色スタイリングオプションには：
<style>タグ内のインライン CSSstyle属性を使ったインラインスタイルWeb ブラウザでの例の出力は、ホバーと色のエフェクトがあり、プロフェッショナルなスタイルで読みやすいテーブルが表示されます。
この実験では、参加者は<table>、<tr>、<td>、<th>などの必須 HTML タグを使って HTML テーブルを作成する基本を学びました。この実験では、学習者がテーブル構造を理解し、行と列を持つ基本的なテーブルを作成し、ヘッダーの追加、セルのマージ、テーブル属性のカスタマイズの技術を探求するように導きました。
実践演習では、<table>行の定義、ヘッダーとデータセルの作成、borderなどの属性を使ってテーブルの可視化を強化するなどの重要な概念を網羅して、Web ページに構造化されたグリッド状のデータ表示を構築する方法を示しました。参加者は、さまざまな Web デザインシナリオで情報を効果的に表示できる意味論的で整理された HTML テーブルを構築する実践的な経験を得ました。
