设置表格所有行的样式css,怎么设置表格有多少行

http://www.itjxue.com  2023-01-16 02:13  来源:未知  点击次数: 

怎么对表格应用CSS样式

方法一直接写页面上:

table style="css写这里"

对于td和tr同样加上style可直接写css(如td style="color:#F00")

方法二(推荐)

table class="table1"

然后在css文件定义table1

.table1{}

对于.table1 里的tr的css可以这样写 .table1 tr{}

同理,td可以这样 .table1 td{}

方法三

table id="table1"

然后在css文件定义table1

.table1{}

对于#table1 里的tr的css可以这样写 #table1 tr{}

同理,td可以这样 #table1 td{}

怎么主义表格CSS样式?

比如你要给某个表格加样式,在table里这样写:

table class="样式名"

如果要给表格某行加样式,在tr里这样写:

tr class="样式名"

如果只要给某个单元格加样式,在td里这样写:

td class="样式名"

在td里设定样式的话,该单元格里的文字自动应用样式,在tr里设定样式的话,该行所有单元格里的文字自动应用样式,在table里设定样式的话,该表格里所有单元格里的文字都会自动应用样式。

怎么设置css表格的样式(颜色等)

下面来个例子,你可以复制到你的编辑器里修改测试

style?type="text/css"

table.gridtable?{}{

????font-family:?verdana,arial,sans-serif;

????font-size:11px;

????color:#333333;

????border-width:?1px;

????border-color:?#666666;

????border-collapse:?collapse;

}

table.gridtable?th?{}{

????border-width:?1px;

????padding:?8px;

????border-style:?solid;

????border-color:?#666666;

????background-color:?#dedede;

}

table.gridtable?td?{}{

????border-width:?1px;

????padding:?8px;

????border-style:?solid;

????border-color:?#666666;

????background-color:?#ffffff;

}

/style

!--?Table?goes?in?the?document?BODY?--

table?class="gridtable"

tr

????thInfo?Header?1/ththInfo?Header?2/ththInfo?Header?3/th

/tr

tr

????tdText?1A/tdtdText?1B/tdtdText?1C/td

/tr

tr

????tdText?2A/tdtdText?2B/tdtdText?2C/td

/tr

/table

CSS(层叠样式表)级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

html设置表格所有行样式

可以使用css对行元素tr设置样式。

对tr设置样式,在没有限定的情况下,会对所有表格的行元素设置样式。

纯CSS设置表格样式

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title千声盒子/title

style type="text/css"

/*不要使用标签名作为类名*/

/*.table{text-align:center;width:100%;height:100%;border-width:thin;border-style:solid;border-color:#AA9FFF;border-collapse:separate;}*/

.tbClass {

text-align:center;

width:100%;height:100%;

/*首先对大表格加上左边 和 底边*/

/*我自作主张加上了底边框,可以删掉去*/

/*听说FF下不支持缩写,请你自己把下面的写法拆分出来*/

border-left:2px #AA9FFF solid; /* 左边框 */

border-bottom:2px #AA9FFF solid; /*底边框*/

}

.tbClass td {/*单元格的上边和右边*/

border-top:2px #AA9FFF solid;

border-right:2px #AA9FFF solid;

}

.tbClass td {/*测试用,为了看到效果,你可以把这个删掉去*/

/*width:100px; height:80px;*/

}

/*专门为“盒子那行写的类”*/

.boxCell td { height:101px; padding:0; margin:0}

/style

/head

body

table id="Box" name="Box" class="tbClass" cellspacing=0!--注意! 1:我把类名由table改成tbClass了, 2: cellspacing=0--

?php

for($i=1;$i=1000;$i++){

if($i%5==0){

echo "td$i/td";

echo "/tr

tr class=\"boxCell\"

td盒子/td

td盒子/td

td盒子/td

td盒子/td

td盒子/td

/tr

";/////注意! 这里使用了一个boxCell的CSS类,不会那么多冗余代码

echo "tr";

}else{

echo "td$i/td";

}

}

?

/table

/body

/html

//////最后说明;

1。如果乱码,或无显示,请注意你php文件的编码格式,或在浏览器下选择GBK32编码

2。这种专业问题,如果到Csdn 里发帖,十分钟之内就有人回答了

3。百度的BUG:回复后再修改,就不能保持代码的缩进了 -_-!即不能tab缩进,要换成4个空格

(责任编辑:IT教学网)

更多

推荐XML/XSLT文章