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

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

php中世界最好的语言

リリース： 2018-05-15 13:52:04

オリジナル

2340 人が閲覧しました

テーブルには多くの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 サイトの他の関連記事を参照してください。