HTML - テーブルスタイル

こんにちは、未来のウェブ開発者たち！興奮人心的なHTMLテーブルスタイルの世界への旅に、あなた们的ガイドとして参加できてとても嬉しいです。コンピュータサイエンスを多年間教えてきた者として、テーブルスタイルをマスターすることは絵を描くことと同じで、キャンバスとツールを理解することから始まることをお伝えできます。では、一緒にテーブルを素晴らしく見せるために潜り込んでみましょう！

HTML - Table Styling

通常のHTMLテーブル

テーブルにスタイルを追加する前に、基本的なHTMLテーブルがどのようなものかを思い出しましょう。以下は簡単な例です：

<table>
<tr>
<th>ヘッダー1</th>
<th>ヘッダー2</th>
</tr>
<tr>
<td>行1、セル1</td>
<td>行1、セル2</td>
</tr>
<tr>
<td>行2、セル1</td>
<td>行2、セル2</td>
</tr>
</table>

このコードは、2つの列と3行（ヘッダー行を含む）の基本的なテーブルを作成します。機能的ですが、正直、乾燥するペンキを見るくらい退屈です。ここでスタイルを追加することで、テーブルを魅力的にすることができます！

HTMLテーブルスタイル

では、テーブルをスタイル化する様々な方法について話しましょう。これらは、ウェブデザインツールキットのブラシと色として考えてください：

プロパティ	説明
border	テーブルとセルの周囲に边を設定
border-collapse	セルの边が単一の边に統合されるか、分離されるかを決定
width	テーブルの幅を設定
height	テーブルの高さを設定
text-align	セル内のテキストを左、右、中央に配置
vertical-align	セル内のテキストを垂直に配置（上、中、下）
padding	セルの边とコンテンツの間のスペースを設定
background-color	テーブルまたはセルの背景色を設定
color	テキストの色を設定
font-family	テキストのフォントを設定
font-size	テキストのサイズを設定

HTMLテーブルスタイルの例

これらのプロパティを実際に使って、いくつかの例を見てみましょう。お約束ですが、最後にプロのようにテーブルをスタイル化するスキルを身につけることでしょう！

例1: 基本的なテーブルスタイル

<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>

<table>
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>ジョン・ドー</td>
<td>30</td>
</tr>
<tr>
<td>ジェーン・スミス</td>
<td>25</td>
</tr>
</table>

この例では、基本的なスタイルを追加しました。border-collapse: collapseプロパティでセルの边を統合し、よりシンプルな外観を演出します。テーブルの幅を100%に設定し、セルに边を追加し、パディングとヘッダーの背景色を設定しました。テーブルに整った髪切れと新しいシャツを与えたようなものです！

例2: ゼブラ柄

<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>

<table>
<tr>
<th>製品</th>
<th>価格</th>
</tr>
<tr>
<td>りんご</td>
<td>$1.00</td>
</tr>
<tr>
<td>バナナ</td>
<td>$0.75</td>
</tr>
<tr>
<td>オレンジ</td>
<td>$0.90</td>
</tr>
</table>

ここでは、ゼブラ柄の概念を導入しました。tr:nth-child(even)セレクタで偶数行に軽い灰色の背景色を設定し、行を跨ぐときにユーザーが容易に追えるようにしました。テーブルにスタイリッシュなパインストライプのスーツを与えたようなものです！

例3: レスポンシブテーブル

<style>
.responsive-table {
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
min-width: 600px;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
@media screen and (max-width: 600px) {
th, td {
display: block;
}
tr {
margin-bottom: 15px;
}
th {
text-align: center;
}
}
</style>

<div class="responsive-table">
<table>
<tr>
<th>名前</th>
<th>ポジション</th>
<th>オフィス</th>
<th>年齢</th>
</tr>
<tr>
<td>タイガー・ニクソン</td>
<td>システムアーキテクト</td>
<td>エジンバラ</td>
<td>61</td>
</tr>
<tr>
<td>ガレット・ウィンタース</td>
<td>アカウンティング</td>
<td>東京</td>
<td>63</td>
</tr>
</table>
</div>

この例では、テーブルのレスポンシブ性を導入しました。大きなスクリーンでは通常のテーブルとして動作しますが、600px未満の小さなスクリーンでは、カードのようなレイアウトに切り替わり、各セルがブロックとして表示されます。テーブルがヨガをすることのように、柔らかく異なるスクリーンサイズに対応します！

結論

そして、ここまでに！私たちがテーブルを平凡で退屈なものからスタイリッシュでレスポンシブなものに変換しました。スタイルを追加することは、読みやすさとユーザー体験を向上させることすべてです。もちろん、見た目を美しくすることも楽しいです！

ウェブ開発の旅を続ける中で、さまざまなスタイルを試してみてください。行のホバーエフェクトを追加したり、異なるカラースキームを試してみたり、可能性は無限です！

良い料理は適切なプレゼンテーションがなければ完璧ではありませんし、適切にスタイル化されたテーブルが含まれていないウェブドキュメントも完璧ではありません。では、テーブルをスタイル化していくましょう！そして、ウェブ開発の世界では、練習が完璧を生みます。ハッピーコーディング！

Credits: Image by storyset