HTML - 表: 整然としたウェブコンテンツへの扉

こんにちは、ウェブ開発者の卵さんたち！今日は、HTMLの表の素晴らしい世界に飛び込んでみましょう。近所の親切なコンピュータ教師として、この旅を案内するのが楽しみです。信じてください、このチュートリアルの終わりには、プロのように表を作成できるようになります！

HTML - Tables

HTMLで表を使う理由は何か？

あなたのお気に入りの本、その著者、出版年を整理しようとしています。段落に全部書き出すこともできますが、それはごちゃつき、読みにくくなります。ここでHTMLの表が助け舟 becomes！

HTMLの表は、データを構造化された、グリッド状の形式で表示するのに適しています。以下のような用途に最適です：

表形式のデータ（スプレッドシートのように）を表示する
コンテンツの整然としたレイアウトを作成する
信息を易読な形で整理する

HTMLで表を作成する方法は？

基本から始めましょう。HTMLで表を作成するのは、レゴブロックで建てるのと同じです。基盤を築き、その上にパーツを追加して、名作を完成させます。

以下は簡単な例です：

<table>
<tr>
<th>書籍タイトル</th>
<th>著者</th>
<th>出版年</th>
</tr>
<tr>
<td>殺しのメッキングバード</td>
<td>ハーパー・リー</td>
<td>1960</td>
</tr>
<tr>
<td>1984</td>
<td>ジョージ・オーウェル</td>
<td>1949</td>
</tr>
</table>

これを分解すると：

<table>: これはブラウザに「ここから表を始めます！」と伝えます。
<tr>: これは「table row」を意味し、表の新しい行を始めるものです。
<th>: これは「table header」を意味し、列のタイトルに使います。
<td>: これは「table data」を意味し、表の実際の情報を入れる場所です。

HTML表のすべて

基本を理解したところで、HTML表のさらに面白い機能を見てみましょう！

HTML表を定義する

表を定義する際には、地図を描くことを考えます。その構造を明確にすることが必要です。以下に、追加の属性を持つ例を示します：

<table border="1" cellpadding="5" cellspacing="0">
<caption>私のお気に入りの本</caption>
<thead>
<tr>
<th>タイトル</th>
<th>著者</th>
<th>ジャンル</th>
</tr>
</thead>
<tbody>
<tr>
<td>大いなる風景</td>
<td>F. スコット・フィッツジェラルド</td>
<td>クラシック</td>
</tr>
<tr>
<td>ハンガー・ゲーム</td>
<td>スーザン・コリンズ</td>
<td>ヤングアダルト</td>
</tr>
</tbody>
</table>

この例では：

border="1": 表セルの周りにボーダーを追加します。
cellpadding="5": 各セルの内部にスペースを追加します。
cellspacing="0": セル間のスペースを削除します。
<caption>: 表にタイトルを追加します。
<thead>: ヘッダー内容をグループ化します。
<tbody>: ボディー内容をグループ化します。

HTML表をスタイル化する

学校のノートを装飾していたことを思い出しますか？HTML表のスタイル化も似ています！少し色を加えましょう：

<table style="border-collapse: collapse; width: 100%;">
<tr style="background-color: #f2f2f2;">
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">名前</th>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">年齢</th>
</tr>
<tr>
<td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">ジョン・ドー</td>
<td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">25</td>
</tr>
</table>

ここでは、インラインCSSを使用して表をスタイル化しています。それぞれの部分にユニークな服装を与えるようなものです！

表の背景色と画像

表をより魅力的にするために、背景を少し変更してみましょう：

<table style="background-color: #e6f7ff; background-image: url('paper.gif');">
<tr>
<th>カラム1</th>
<th>カラム2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</table>

この表は、ライトブルーの背景に紙のテクスチャー画像をオーバーレイします。まるでテーマパーティーを開いているようなものです！

表の幅と高さ

デスクスペースを調整するように、表のサイズも調整できます：

<table style="width: 100%; height: 200px;">
<tr>
<td style="width: 30%;">このセルは表の幅の30%を占めます</td>
<td>このセルは残りの部分を埋めます</td>
</tr>
</table>

この表は、コンテナの全幅にわたって伸び、200ピクセルの高さになります。最初のセルは常に総幅の30%です。

ネストされたHTML表

時々、表の中に別の表が必要です。まるでロシアンマatrioshkaのように、データで嵌め込むことができます！

<table border="1">
<tr>
<td>
メインセル
<table border="1">
<tr>
<td>ネストされた表のセル1</td>
<td>ネストされた表のセル2</td>
</tr>
</table>
</td>
<td>別のメインセル</td>
</tr>
</table>

これは、他の表のセル内に表を作成します。複雑なデータ構造に最適です！

HTML表関連タグ

これまで学んだすべての表関連タグを整理した表を以下に示します：

タグ	説明
`<table>`	表を定義します
`<tr>`	表行を定義します
`<th>`	表ヘッダーを定義します
`<td>`	表セルを定義します
`<caption>`	表のキャプションを定義します
`<thead>`	表のヘッダー内容をグループ化します
`<tbody>`	表のボディー内容をグループ化します
`<tfoot>`	表のフッター内容をグループ化します
`<colgroup>`	表の1列以上をフォーマットするためにグループ化します
`<col>`	`<colgroup>`要素内の各列のプロパティを指定します

ビデオ - HTML表

直接ビデオを埋め込むことはできませんが、「HTML Tables Tutorial」をYouTubeで検索することをお勧めします。リアルタイムで表が作成されるのを見ることで、非常に役立ちます！

そして、ここまでで、HTML表のクイックコースが終了しました。実践が大事です。あなたの時間割、お気に入りの映画のリスト、甚至是家族の系図など、さまざまなデータの表を作成してみてください。可能性は無限です！

ハッピーコーディング、そしてあなたの表が常に完璧に整列することを祈っています！

Credits: Image by storyset