テーブルの CSS スタイルを設定するときに注意すべき点は何ですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

テーブルの CSS スタイルを設定するときに注意すべき点は何ですか?

php中世界最好的语言

May 15, 2018 pm 01:52 PM

css知らせ

テーブルには多くのCSSスタイルがあると思いますが、今日はテーブルに使用するCSSスタイルシートを設定する際にどのような点に注意する必要があるのかについて詳しく説明します。 Web ページ上の複数の場所で table タグは削除されますが、この時点でも、指定されたテーブル

オブジェクト

のスタイルの設定は CSS を通じて制御できます。実際、テーブルタグを DIV タグとして使用して CSS をレイアウトしたり設定したりすることを考えると、はるかに簡単になることがあります。

テーブルのスタイルを設定する

対応するテーブルの親スタイルに名前を付けてオブジェクト内のテーブルスタイルを指定する

ケースの完全なHTML+CSSコード

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="utf-8" /> 
<title>指定对象内table设置样式</title> 
<style> 
.p{ width:400px} 
.p table{ background:#CCC; color:#F00} 
.p table td{ background:#FFF} 
</style> 
</head> 
<body> 
<p class="p"> 
<table width="100%" border="0" cellspacing="1" cellpadding="0"> 
<tr> 
<td>内容一</td> 
<td>内容一</td> 
<td>内容一</td> 
</tr> 
<tr> 
<td>内容二</td> 
<td>内容</td> 
<td>内容</td> 
</tr> 
</table> 
</p> 
</body> 
</html>

概要

上記はテーブルとtdを指定するために使用されますCSS スタイルを設定する親。

テーブルに別のIDまたはクラスを設定することで

テーブルレイアウトを多くの場所で使用するこのとき、テーブルタグに直接スタイルを設定すると、この時点でWebページ内のテーブルレイアウトが設定されます。。現時点では、CSS スタイルを必要とするテーブル設定を区別するためにテーブルに ID またはクラス設定を追加するだけで済みます。

テーブル td の CSS を設定する

テーブル Web ページのレイアウトでは、通常、td の行の高さとパディングの設定がすべて有効です。

完成したHTML+CSSコードは以下の通りです:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="utf-8" /> 
<title>指定对象内table td设置样式</title> 
<style> 
 
.p-td{ width:400px} 
.p-td table td{ background:#CCC; color:#000; line-height:40px} 
</style> 
</head> 
<body> 
<p class="p-td"> 
<table width="100%" border="0" cellspacing="1" cellpadding="0"> 
<tr> 
<td>内容一</td> 
<td>内容一</td> 
<td>内容一</td> 
</tr> 
<tr> 
<td>内容二</td> 
<td>内容</td> 
<td>内容</td> 
</tr> 
</table> 
</p> 
</body> 
</html>

指定されたテーブルのtdにスタイル効果を設定します

上記は、指定されたオブジェクトのテーブルのtdスタイルを設定するためにCSSによって指示されています。

発散的な考え方: 特定のテーブル td に異なる CSS スタイルを設定したい場合は、td にクラスを追加して、異なるスタイル設定を実現できます。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

DIV に高さを適応させる方法

CSS を使用して画像の背景のテキストコンテンツを非表示にする方法

ネイティブ JS の一般的なメソッドを整理する

以上がテーブルの CSS スタイルを設定するときに注意すべき点は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

アンカーポジショニングは、ソースの順序を気にしませんApr 29, 2025 am 09:37 AM

アンカーの位置決めがHTMLソースの順序を避けているという事実は、コンテンツとプレゼンテーションの間の懸念の別の分離のため、非常にCSS-Yです。

マージンは何ですか：40px 100px 120px 80pxは意味しますか？Apr 28, 2025 pm 05:31 PM

記事では、CSSマージンプロパティ、特に「マージン：40px 100px 120px 80px」、そのアプリケーション、およびWebページレイアウトへの影響について説明します。

さまざまなCSSボーダープロパティとは何ですか？Apr 28, 2025 pm 05:30 PM

この記事では、カスタマイズ、ベストプラクティス、および応答性に焦点を当てたCSSボーダープロパティについて説明します。主な議論：Border-Radiusは、レスポンシブデザインに最も効果的です。

CSSの背景とは何ですか、プロパティをリストしますか？Apr 28, 2025 pm 05:29 PM

この記事では、CSSのバックグラウンドプロパティ、Webサイトの設計の強化における使用、および避けるべき一般的な間違いについて説明します。重要な焦点は、バックグラウンドサイズを使用したレスポンシブデザインです。

CSS HSLの色とは何ですか？Apr 28, 2025 pm 05:28 PM

記事では、CSS HSLの色、Webデザインでの使用、およびRGBよりも利点について説明します。主な焦点は、直感的な色の操作を通じて設計とアクセシビリティを向上させることです。

CSSにコメントを追加するにはどうすればよいですか？Apr 28, 2025 pm 05:27 PM

この記事では、CSSでのコメントの使用について説明し、シングルラインとマルチラインのコメント構文を詳述しています。コメントはコードの読みやすさ、保守性、コラボレーションを強化するが、適切に管理されていないとウェブサイトのパフォーマンスに影響を与える可能性があると主張しています。

CSSセレクターとは何ですか？Apr 28, 2025 pm 05:26 PM

この記事では、HTML要素のスタイリングのCSSセレクター、その種類、および使用法について説明します。 IDとクラスのセレクターを比較し、複雑なセレクターでパフォーマンスの問題に対処します。

どのタイプのCSSが最優先事項を保持していますか？Apr 28, 2025 pm 05:25 PM

この記事では、CSSの優先順位について説明し、特異性が最も高いインラインスタイルに焦点を当てています。 CSS競合を管理するための特異性レベル、オーバーライド方法、およびデバッグツールを説明します。

See all articles

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。