正文
漂亮的表格样式css,好看的表格样式
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
怎么设置漂亮的表格的样式 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（标准通用标记语言的一个子集）等文件样式的计算机语言。
相关问答
Q1: 如何用css样式做细线表格？不要用底色伪装的那种。
知道你的意思，讲清楚太麻烦，给你写了个例子，照这个写，不懂欢迎骚扰
table style="border-collapse:collapse; border:1px solid #C69" width="600"
tr
td style="border-collapse:collapse; border:1px solid #C69"ddddddddddd
/td
td我是美女
/td
/tr
tr
tddfajlk;dfasjlkdfjas
/td
td style="border-collapse:collapse; border:1px solid #C69"
我是帅哥
/td
/tr
/table
Q2: 如何用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;
}
Q3: 纯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个空格
Q4: 请问在网页制作中，用CSS样式怎样做一个细线表格？
1.单条虚线代码：
hr style="BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted" color=#000000 size=1
定义一些参数可以获取可爱的细虚线。我们也可以修改其中的color,size的参数可以得到不同的效果……
2.CSS定义表格边框大全(细线/虚线/点线) 定义表格边框全部为1 边框颜色 #C7C7C7代码为： .tb1{ border:1px solid #C7C7C7;} 定义表格边框 左1 下1 左1 右1 (实际同上) 边框颜色 #C7C7C7代码为： .td2{ border-top:1px solid #C7C7C7; border-bottom:1px solid #C7C7C7; border-left:1px solid #C7C7C7; border-right:1px solid #C7C7C7;} 定义表格边框为1,上边框为0 边框颜色 #C7C7C7 下边框颜色为 #888888代码为： .td2{ border:1px solid #C7C7C7; border-top:0px; border-bottom:1px solid #888888} 定义表格边框虚线代码为： .tb1{ border:1px dashed #C7C7C7;} 定义表格边框点线代码为： .tb1{ border:1px dotted #C7C7C7;}
Q5: 好看的CSS字体和表格样式还有文本框样式，好看的加分，100分。复制原码给我
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " "
html xmlns=" "
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/titlehtml
head
style type="text/css"
!--
.BG {border: 1px solid #FFCC00; br}
.BG1 {border: 1px dashed #CCCCCC; br}
.BG2 {border: 1px inset #3399CC; br}
.BG3 {border-top-width: 1px; brborder-right-width: 1px; brborder-bottom-width: 1px; brborder-left-width: 1px; brborder-top-style: dotted; brborder-right-style: solid; brborder-bottom-style: double; brborder-left-style: outset; brborder-top-color: #999999; brborder-right-color: #FF9900; brborder-bottom-color: #CC9999; brborder-left-color: #99CC00; br}
.BG4 {border-top-width: 1px; brborder-right-width: 1px; brborder-bottom-width: 1px; brborder-left-width: 1px; brborder-top-style: dashed; brborder-right-style: none; brborder-bottom-style: dashed; brborder-left-style: none; brborder-top-color: #FFCC00; brborder-right-color: #FFCC00; brborder-bottom-color: #FFCC00; brborder-left-color: #FFCC00; br}
--
/style
/head
body
table width="300" border="0" cellpadding="0" cellspacing="0" class="BG"
tr
td bgcolor="#FFFF99"div align="center"模拟百度的表格/div/td
/tr
tr
td/td
/tr
/table
p /p
table width="300" border="0" cellpadding="0" cellspacing="0" class="BG1"
tr
td bgcolor="#CCCCCC"div align="center"模拟很多BLOG表格/div/td
/tr
tr
td/td
/tr
/table
p /p
table width="300" border="0" cellpadding="0" cellspacing="0" class="BG2"
tr
tddiv align="center"新款式表格/div/td
/tr
tr
td/td
/tr
/table
p /p
table width="300" border="0" cellpadding="0" cellspacing="0" class="BG3"
tr
tddiv align="center"花式表格/div/td
/tr
tr
td/td
/tr
/table
p /p
table width="300" border="0" cellpadding="0" cellspacing="0" class="BG4"
tr
tddiv align="center"去任意边表格/div/td
/tr
tr
td/td
/tr
/table
p /p
p /p
p /p
/body
/html
整个页面的，复制看看把
