HTML と CSS を使用して簡潔なテーブル レイアウトを実装する方法
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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7563
15
1384
52
84
11
28
99
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
