ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML と CSS を使用して簡潔なテーブル レイアウトを実装する方法
HTML と CSS を使用して簡潔なテーブル レイアウトを実装する方法
- 王林オリジナル
- 2023-10-19 10:34:48922ブラウズ
HTML と CSS を使用して単純なテーブル レイアウトを実装する方法
HTML と CSS は、フロントエンド開発で最も一般的に使用される 2 つの言語です。 Web ページの作成と美化に使用できます。テーブルは Web ページの一般的な要素の 1 つであり、データを表示するために使用されます。 HTML と CSS を使用して単純なテーブル レイアウトを実装するにはどうすればよいですか?コード例を示しながら、具体的な手順を以下に説明します。
ステップ 1: HTML 構造の作成
まず、HTML ファイルを作成し、テーブルの基本構造をそのファイルに追加する必要があります。コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>简洁表格布局</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<tr>
<td>数据4</td>
<td>数据5</td>
<td>数据6</td>
</tr>
<tr>
<td>数据7</td>
<td>数据8</td>
<td>数据9</td>
</tr>
</tbody>
</table>
</body>
</html>上記のコードでは、テーブルとテーブルのコンテンツを含む基本的な HTML 構造を作成しました。
ステップ 2: CSS スタイルを追加する
次に、CSS を使用してテーブルを美しくする必要があります。 style.css という名前の CSS ファイルを作成し、HTML ファイルに含めます。コードは次のとおりです。
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tbody tr:hover {
background-color: #f5f5f5;
}
上記のコードでは、CSS スタイルを設定してテーブルを美しくしています。具体的なスタイルは次のとおりです。
- 表の幅を 100% に設定し、border-collapse 属性を使用して境界線を 1 行に結合します。
- パディングやテキストの配置など、テーブル ヘッダーとテーブル コンテンツのスタイルを設定します。
- ヘッダーの背景色をライトグレーに設定します。
- n 番目の子の擬似クラス セレクターを使用して、テーブルの中央の偶数行に背景色を追加します。
- マウスをホバーしたときのテーブル行の背景色を設定します。
ステップ 3: テーブル スタイルを調整する
必要に応じて、テーブル スタイルをさらに調整できます。たとえば、表の境界線とテキストの色を設定したり、表のヘッダーと表の内容のスタイルを調整したりできます。
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ddd;
color: #333;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tbody tr:hover {
background-color: #f5f5f5;
}上記のコードでは、境界線のスタイルを追加し、テキストの色を黒に設定しました。同時に、ヘッダーのフォントを太字に設定して強調表示します。
これまでに、単純なテーブル レイアウトの実装が完了しました。実際のニーズに応じて、さらにスタイルを調整できます。
概要:
HTML と CSS を使用すると、単純なテーブル レイアウトを簡単に実装できます。まず、HTML ファイルを作成し、そのファイルにテーブルの基本構造を追加する必要があります。次に、CSS スタイルを使用して表を美しくし、表の境界線、テキストの配置、背景色、その他の属性を設定します。最後に、必要に応じてテーブル スタイルをさらに調整し、設計要件との一貫性を高めます。同時に、CSS を使用して、マウスをホバーしたときに表の行の色を変更するなど、いくつかのインタラクティブな効果を実現することもできます。
以上がHTML と CSS を使用して簡潔なテーブル レイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。