表：データを整理する
情報を表示する表の作成方法を学びます
「表：データを整理する」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全4レッスンが含まれています。
表：データを整理する
次のレッスンへようこそ！今日は、HTMLで表を作成する方法を学びます。表は、情報を行と列に整理するのに便利です。
表とは何ですか？
表は、情報を構造化された形式で表示する方法です。各表は行と列で構成されます。
表は次のようになります。
Name Age City
Alice 12 New York
Bob 15 London
この表をHTMLで作成してみましょう。
簡単な表を作成する
HTMLでは、<table>タグを使って表を作成します。行は<tr>タグ、セルは<td>タグを使って作成します。
例：
<table>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
表の見出しを追加する
<th>タグを使って表に見出しを追加できます。見出しを付けると、表がより分かりやすくなります。
例：
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
表に罫線を追加する
デフォルトでは、表に罫線はありません。border属性またはCSSを使って罫線を追加できます。
例：
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
列と行をまたいで結合する
セルによっては、複数の列や行にまたがらせる必要があります。その場合は、colspan属性またはrowspan属性を使います。
例：
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Details</th>
</tr>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
表にスタイルを設定する
CSSを使って表の見た目を整えることができます。たとえば、色の変更、余白の追加、テキストの配置などが可能です。
例：
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: lightgray;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
自分で試してみましょう
お気に入りの映画を一覧にした表を作成しましょう。次の例をご覧ください。
<!DOCTYPE html>
<html>
<head>
<title>My Favorite Movies</title>
</head>
<body>
<h1>My Favorite Movies</h1>
<table border="1">
<tr>
<th>Movie</th>
<th>Year</th>
<th>Genre</th>
</tr>
<tr>
<td>Inception</td>
<td>2010</td>
<td>Science Fiction</td>
</tr>
<tr>
<td>The Lion King</td>
<td>1994</td>
<td>Animation</td>
</tr>
</table>
</body>
</html>
よくできました！
おめでとうございます！表の作成、見出しの追加、スタイルの設定方法を学びました。表はデータを整理して表示する優れた方法です。次のレッスンでは、ユーザー入力を収集するフォームについて学びます。ページをインタラクティブにしていきましょう！
よくある質問
「表：データを整理する」レッスンは無料ですか？
はい。「表：データを整理する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全4レッスンが含まれています。
「表：データを整理する」で何を学びますか？
情報を表示する表の作成方法を学びます ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML for Kidsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「表：データを整理する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML for Kidsレッスンでコードを書いて実行できますか？
はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 表：データを整理する
- フォーム：ユーザー入力を収集する
- HTML属性
- マルチメディア：動画と音声を追加する