css 細(xì)線表格 css制作table細(xì)線表格常用屬性
發(fā)布時間：2012-12-19 11:26:43 作者：佚名 
我要評論
我要評論優(yōu)化表格的過程中當(dāng)然是卻漂亮越好啊，所以css優(yōu)化表格的屬性就派上用場了，接下來介紹css優(yōu)化細(xì)線表格注意的一些細(xì)節(jié)，需要的朋友可以了解下
Css制作table細(xì)線表格
1、介紹了一個不常用屬性：border-collapse:collapse;
2、使用了一個屬性縮寫技巧：border:style color;border-width:上 右 下 左;
提示：您可以先修改部分代碼再運(yùn)行
table {
border-collapse:collapse; /* 關(guān)鍵屬性：合并表格內(nèi)外邊框(其實(shí)表格邊框有2px，外面1px，里面還有1px哦) */
border:solid #999; /* 設(shè)置邊框?qū)傩?；樣?solid=實(shí)線)、顏色(#999=灰) */
border-width:1px 0 0 1px; /* 設(shè)置邊框狀粗細(xì)：上 右 下 左 = 對應(yīng)：1px 0 0 1px */
}
<thead> 表格頭
<tbody> 表格正文
<tfoot> 表格？呵呵，我也不知道怎么說。明白就行了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Css制作table細(xì)線表格</title>
<style type="text/css" media="screen">
<!-- /* PR-CSS */
table {
border-collapse:collapse; /* 關(guān)鍵屬性：合并表格內(nèi)外邊框(其實(shí)表格邊框有2px，外面1px，里面還有1px哦) */
border:solid #999; /* 設(shè)置邊框?qū)傩?；樣?solid=實(shí)線)、顏色(#999=灰) */
border-width:1px 0 0 1px; /* 設(shè)置邊框狀粗細(xì)：上 右 下 左 = 對應(yīng)：1px 0 0 1px */
}
table caption {font-size:14px;font-weight:bolder;}
table th,table td {border:solid #999;border-width:0 1px 1px 0;padding:2px;}
tfoot td {text-align:center;}
-->
</style>
</head>
<body>
<table>
<caption>表格頭</caption>
<thead>
<tr><th>名稱</th><th>網(wǎng)址</th><th>時間</th></tr>
</thead>
<tbody>
<tfoot>
<tr><td colspan="3">下一頁</td></tr>
</tfoot>
<tr><th>百度</th><td>http://www.baidu.com</td><td>2007.01.11</td></tr>
<tr><th>百度</th><td>http://www.baidu.com</td><td>2007.01.11</td></tr>
<tr><th>百度</th><td>http://www.baidu.com</td><td>2007.01.11</td></tr>
</tbody>
</table>
</body>
</html>
1、介紹了一個不常用屬性：border-collapse:collapse;
2、使用了一個屬性縮寫技巧：border:style color;border-width:上 右 下 左;
提示：您可以先修改部分代碼再運(yùn)行
復(fù)制代碼
代碼如下:table {
border-collapse:collapse; /* 關(guān)鍵屬性：合并表格內(nèi)外邊框(其實(shí)表格邊框有2px，外面1px，里面還有1px哦) */
border:solid #999; /* 設(shè)置邊框?qū)傩?；樣?solid=實(shí)線)、顏色(#999=灰) */
border-width:1px 0 0 1px; /* 設(shè)置邊框狀粗細(xì)：上 右 下 左 = 對應(yīng)：1px 0 0 1px */
}
<thead> 表格頭
<tbody> 表格正文
<tfoot> 表格？呵呵，我也不知道怎么說。明白就行了
復(fù)制代碼
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Css制作table細(xì)線表格</title>
<style type="text/css" media="screen">
<!-- /* PR-CSS */
table {
border-collapse:collapse; /* 關(guān)鍵屬性：合并表格內(nèi)外邊框(其實(shí)表格邊框有2px，外面1px，里面還有1px哦) */
border:solid #999; /* 設(shè)置邊框?qū)傩?；樣?solid=實(shí)線)、顏色(#999=灰) */
border-width:1px 0 0 1px; /* 設(shè)置邊框狀粗細(xì)：上 右 下 左 = 對應(yīng)：1px 0 0 1px */
}
table caption {font-size:14px;font-weight:bolder;}
table th,table td {border:solid #999;border-width:0 1px 1px 0;padding:2px;}
tfoot td {text-align:center;}
-->
</style>
</head>
<body>
<table>
<caption>表格頭</caption>
<thead>
<tr><th>名稱</th><th>網(wǎng)址</th><th>時間</th></tr>
</thead>
<tbody>
<tfoot>
<tr><td colspan="3">下一頁</td></tr>
</tfoot>
<tr><th>百度</th><td>http://www.baidu.com</td><td>2007.01.11</td></tr>
<tr><th>百度</th><td>http://www.baidu.com</td><td>2007.01.11</td></tr>
<tr><th>百度</th><td>http://www.baidu.com</td><td>2007.01.11</td></tr>
</tbody>
</table>
</body>
</html>
相關(guān)文章
- table表格屬性在使用過程中很常見，本文整理了一些常用屬性，在此與大家分享下，希望對大家有所幫助2013-08-20
- 在div+css布局中經(jīng)常被用到的就是div了，幾乎所有的css屬性都可以用到它的身上，本文整理了一些在頁面布局中常用的屬性的使用示例，有想學(xué)習(xí)css布局的朋友可以參考下2013-07-30
- 框架是網(wǎng)頁畫面分成幾個框窗同時取得多個src的地址，F(xiàn)RAMESET是用來劃分框窗，每一窗框由一個FRAME標(biāo)記所標(biāo)示，F(xiàn)RAME必須在FRAMESET范圍中使用，本文整理了一些frameset常2013-06-28
- 在網(wǎng)頁布局中會經(jīng)常用到一些css屬性，比如：CSS背景、CSS文本、CSS字體、CSS列表、CSS表格、CSS邊框等常用屬性，本文整理了一些，感興趣的朋友可以參考下哈2013-06-24
- 下面列出了由動態(tài) HTML 定義的對象。點(diǎn)擊鏈接即可前往對象的定義，其中包含了該對象的所有成員集2013-03-15
CSS常用屬性縮寫實(shí)例-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
CSS代碼簡化在工作中是非常有益的，也是必要的。在編寫CSS代碼時，經(jīng)常會出現(xiàn)冗余的代碼，為了提高代碼的質(zhì)量及文件壓縮到最小，使代碼具有可讀性，不得不把CSS代碼簡2008-10-31CSS常用屬性的代碼簡化實(shí)例-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
CSS代碼簡化在工作中是非常有益的，也是必要的。在編寫CSS代碼時，經(jīng)常會出現(xiàn)冗余的代碼，為了提高代碼的質(zhì)量及文件壓縮到最小，使代碼具有可讀性，不得不把CSS代碼簡2008-10-17- div布局過程中會經(jīng)常用到一些屬性，本文整理了一些常用的和布局相關(guān)的屬性，有需要的朋友可以參考下，希望對大家熟悉div常用屬性有所幫助2013-09-08