css表格样式(css表格样式设置)
纯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个空格
怎么样把table表格使用css样式居中显示
1、普通居中。
align="center"
table?align="center"
??tr
???td商品名称/td
???td商品价格/td
???td商品描述/td
???td购买/td
??/tr
?/table
2、css样式居中。
margin:0 auto
style?type="text/css"
?table1{
??margin:0?auto;/*?自动居中，不论王爷的大小?*/
??border:1;/*?边框粗度?*/
??width:80%;/*?宽度只占当前页面的80%?*/
?}
/style
CSS 如何定义 多个表格 样式
table width="100%" border="0" cellspacing="3" cellpadding="0" class="edf12"
tr
td/td
td/td
/tr
/table
可以在每个表格里面加上class样式，例如上面的，比如把class样式命名为“edf12”，再定义这个样式就可以了，任何一个表格都可以这样操作
怎么用CSS设置html中的表格边框样式
和其他元素设置样式一样啊，只不过选择器换位表格的。表格包括table，tr,th,td。其中TR是没有border属性的，也就是说没有边框样式，其他的就和普通的css样式一样写就对了。
比如：
!DOCTYPE?html
html?lang="en"
head
????meta?charset="UTF-8"
????title知道用效果展示/title
/head
style
????table
????{
????????border:?1px?solid?darkgray;
????}
????tr:hover
????{
????????background-color:?#1b6d85;
????}
????td
????{
????????border:?1px?solid?dimgray;
????????text-align:?center;
????}
????td:hover
????{
????????background-color:?#8c8c8c;
????}
/style
body
table
????trth表头单元格/thth表头单元格/thth表头单元格/th/tr
????trtd单元格/tdtd单元格/tdtd单元格/td/tr
????trtd单元格/tdtd单元格/tdtd单元格/td/tr
????trtd单元格/tdtd单元格/tdtd单元格/td/tr
????/table
/body
/html
