建站
咨詢
售后
建站咨詢
新聞中心
怎么設(shè)置漂亮的表格的樣式 css
下面來個例子，你可以復(fù)制到你的編輯器里修改測試
創(chuàng)新互聯(lián)IDC提供業(yè)務(wù):成都服務(wù)器托管,成都服務(wù)器租用,成都服務(wù)器托管,重慶服務(wù)器租用等四川省內(nèi)主機托管與主機租用業(yè)務(wù);數(shù)據(jù)中心含:雙線機房,BGP機房,電信機房,移動機房,聯(lián)通機房。
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（層疊樣式表）級聯(lián)樣式表是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式的計算機語言。
如何用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
如何用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設(shè)置表格樣式
!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"
/*不要使用標(biāo)簽名作為類名*/
/*.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。這種專業(yè)問題，如果到Csdn 里發(fā)帖，十分鐘之內(nèi)就有人回答了
3。百度的BUG：回復(fù)后再修改，就不能保持代碼的縮進了 -_-!即不能tab縮進，要換成4個空格
請問在網(wǎng)頁制作中，用CSS樣式怎樣做一個細線表格？
1.單條虛線代碼：
hr style="BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted" color=#000000 size=1
定義一些參數(shù)可以獲取可愛的細虛線。我們也可以修改其中的color,size的參數(shù)可以得到不同的效果……
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;}
好看的CSS字體和表格樣式還有文本框樣式，好看的加分，100分。復(fù)制原碼給我
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " "
html xmlns=" "
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title無標(biāo)題文檔/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
整個頁面的，復(fù)制看看把
當(dāng)前標(biāo)題：漂亮的表格樣式css,好看的表格樣式
當(dāng)前URL：http://www.dlmjj.cn/article/dsdspcj.html
