テーブルの 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 までご連絡ください。

利用CSS怎么创建渐变色边框？5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框？下面本篇文章给大家分享CSS实现渐变色边框的5种方法，希望对大家有所帮助！

css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。

css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。

rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中，rtl是“right-to-left”的缩写，是从右往左的意思，指的是内联内容从右往左依次排布，是direction属性的一个属性值；该属性规定了文本的方向和书写方向，语法为“元素{direction:rtl}”。

css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中，可以利用“font-style”属性设置i元素不是斜体样式，该属性用于指定文本的字体样式，当属性值设置为“normal”时，会显示元素的标准字体样式，语法为“i元素{font-style:normal}”。

css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法：1、给英文元素添加“text-transform: uppercase;”样式，可将所有的英文字母都变成大写；2、给英文元素添加“text-transform:capitalize;”样式，可将英文文本中每个单词的首字母变为大写。

怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中，可以用“transform-origin”属性设置rotate的旋转中心点，该属性可更改转换元素的位置，第一个参数设置x轴的旋转位置，第二个参数设置y轴旋转位置，语法为“transform-origin:x轴位置 y轴位置”。

See all articles

ホットAIツール

ホットツール

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。