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 サイトの他の関連記事を参照してください。
HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AMHTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。
HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AMHTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。
マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AMHTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。
HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AMHTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。
HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AMWeb開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AMHTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。
HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AMWeb開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。
HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AMhtmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
Dreamweaver Mac版
ビジュアル Web 開発ツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
ホットトピック
7686
15163914139352128725122929