好看表格样式css,好看的表格样式创意简单
表格细边框的CSS样式怎么设置？
指定的table为细边框，把table放在div中即可。
创新互联公司专注于绥棱网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供绥棱营销型网站建设，绥棱网站制作、绥棱网页设计、绥棱网站官网定制、小程序开发服务，打造绥棱网络公司原创品牌,更为您提供绥棱网站排名全网营销落地服务。
一、首先新建表格，代码如下：
table width="500" border="1" trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td /trtr tdnbsp;/td tdnbsp;/tdtdnbsp;/td/tr/table。
二、在table里加css样式，代码如下：
table width="500" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;" tr tdnbsp;/tdtdnbsp;/td tdnbsp;/td /tr tr tdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/table。
三、单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间。单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离，border-collapse:collapse表示表格的两边框合并为一条即可。
如何用CSS制作表格效果的样式
xhtml如下:
div id="byitem"
h3 class="tabletitle"Widgets America (source by item)/h3
ul class="vert"
li class="tableheader"
ul class="horz"
liItem #/li
li class="name"Name/li
liColor/li
liIn Stock?/li
li class="price"Price/li
/ul
/li
li
ul class="horz"
li8476292163/li
li class="name"Cheese Widget/li
liGreen/li
liYes/li
li class="price"$3.14/li
/ul
/li
/ul
/div
CSS如下：
/* Widgets America (by item)
------------------------------------*/
div#byitem ul.vert {
list-style-type: none;
padding: 0;
margin: 0;
width: 540px;
}
div#byitem ul.vert li {
padding: 4px 0;
margin: 0;
height: 14px; /* space out your rows */
}
div#byitem ul.vert li.odd {
background-color: #eee;
}
div#byitem ul.horz {
clear: left;
list-style-type: none;
padding: 0;
margin: 0;
}
div#byitem ul.horz li {
float: left;
width: 80px;
padding: 0 20px 0 0;
margin: 0;
}
div#byitem ul.horz li.name { /* size your columns individually at the expense of »
slightly bloated markup (labelling each appropriate li with this class) */
width: 130px;
}
div#byitem ul.horz li.price {
text-align: right;
padding-right: 0;
}
纯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个空格
分享标题：好看表格样式css,好看的表格样式创意简单
本文地址：http://hbruida.cn/article/hocegg.html
