はじめに
この実験 (Lab) では、HTML テーブルのスタイル設定に使用される基本的な CSS プロパティについて学びます。デフォルトでは、HTML テーブルはシンプルで読みにくい場合があります。CSS を使用すると、基本的なテーブルを構造化され、視覚的に魅力的で、理解しやすいデータ表示に変えることができます。
基本的な HTML テーブルから始め、段階的にスタイルを適用していきます。ボーダーの管理方法、スペースの追加、ヘッダーのスタイル設定、セル内のテキストの配置方法を学びます。
必要な index.html ファイルは既に作成されています。あなたのタスクは、テーブルのスタイル設定を行うために styles.css ファイルに CSS コードを記述することです。ワークスペースの「Web 8080」タブで変更をリアルタイムにプレビューできます。
テーブルに border-collapse: collapse を設定する
このステップでは、テーブルのスタイル設定を開始します。デフォルトでは、HTML テーブルのセルは個別のボーダーを持っており、これが太く古臭く見える「二重ボーダー」の外観につながることがあります。border-collapse プロパティは、テーブルのボーダーが分離されるか、単一のボーダーに折りたたまれるかを制御します。
クリーンで単線ボーダーを作成するために、border-collapse を collapse に設定します。
まず、左側のファイルエクスプローラーから styles.css ファイルを開きます。このファイルに以下の CSS ルールを追加してください。
table {
border-collapse: collapse;
}
コードを追加した後、ファイルを保存してください。まだボーダーは表示されませんが、このプロパティは次のステップに不可欠です。この段階では視覚的な変化は最小限ですが、「Web 8080」タブに切り替えてライブプレビューを確認できます。
th および td に border: 1px solid black を適用する
テーブルが折り畳まれたボーダーモデルを使用するように設定したので、ヘッダーセル (th) とデータセル (td) に実際のボーダーを追加しましょう。カンマ区切りのセレクターを使用して、両方の要素を一度にターゲットにすることができます。
このステップでは、テーブルの各セルに 1px の実線黒ボーダーを追加します。
既存の table ルールの下に、styles.css ファイルに以下の CSS ルールを追加してください。
th,
td {
border: 1px solid black;
}
ファイルを保存し、「Web 8080」タブに切り替えてください。これで、各テーブルセルにクリーンな単線ボーダーが表示されるはずです。
テーブルセルに padding: 8px を使用する
テーブルにはボーダーが追加されましたが、セル内のコンテンツが端に接しており、窮屈に見えます。padding プロパティを使用して、コンテンツとセルボーダーの間にスペースを追加し、可読性を向上させることができます。
このステップでは、すべてのテーブルセルに 8px のパディングを追加します。
styles.css の既存の th, td ルールを、padding プロパティを含めるように変更してください。
th,
td {
border: 1px solid black;
padding: 8px;
}
ファイルを保存した後、「Web 8080」タブを再度確認してください。セルが大きくなり、テキストの周りに快適なスペースが確保されていることに気づくでしょう。
テーブルヘッダー行に背景色を追加する
テーブルヘッダーをデータ行から際立たせるために、異なる背景色を付けるのが一般的な方法です。これにより、列タイトルとコンテンツが視覚的に区別されます。
このステップでは、ヘッダーセル (th) に薄い灰色の背景色を追加します。
styles.css に、th 要素のみをターゲットにする新しい CSS ルールを追加してください。
th {
background-color: #f2f2f2;
}
ファイルを保存し、「Web 8080」タブで結果を表示してください。テーブルのヘッダー行に明確な背景色が付き、識別しやすくなったはずです。
データセルに text-align: left を実装する
テキストの配置は、テーブルの可読性にとって非常に重要です。デフォルトでは、ヘッダーセル (th) は中央揃え、データセル (td) は左揃えになります。td 要素の左揃えはデフォルトの動作ですが、すべてのブラウザで一貫した表示を保証するために、明示的に設定することは良い習慣です。
このステップでは、データセル (td) のテキスト配置を明示的に左揃えに設定します。
styles.css ファイルに td セレクタの新しい CSS ルールを追加してください。
td {
text-align: left;
}
ファイルを保存してください。これはデフォルトの動作であるため、「Web 8080」タブで視覚的な変化が見られないかもしれませんが、スタイルシートは意図したデザインに対してより堅牢で明確になりました。これで、テーブルの基本的なスタイリングが完了しました。
まとめ
実験完了おめでとうございます！基本的な CSS プロパティを使用して、プレーンな HTML テーブルをスタイリッシュでプロフェッショナルな見た目のテーブルに変換することに成功しました。
この実験では、以下の方法を学びました。
border-collapse: collapse;を使用して、テーブルにクリーンで単一のボーダーを作成する方法。- テーブルヘッダー (
th) およびデータセル (td) にborderを適用する方法。 paddingプロパティを使用してセルに内部の間隔を追加する方法。background-colorを設定してテーブルヘッダーを区別する方法。text-alignを使用してセル内のテキストの水平方向の配置を制御する方法。
これらのスキルは、Web 上で表形式のデータを効果的に表示するために不可欠です。
