CSS 表格實例
CSS 表格屬性可以幫助您極大地改善表格的外觀。
CSS Table 屬性
屬性 描述
border-collapse 設置是否把表格邊框合並為單一的邊框。
border-spacing 設置分隔單元格邊框的距離。
caption-side 設置表格標題的位置。
empty-cells 設置是否顯示表格中的空單元格。
table-layout 設置顯示單元、行和列的算法。
########################
table-layout可能的值
值 描述
automatic 默認。列寬度由單元格內容設定。
fixed 列寬由表格寬度和列寬度設定。
inherit 規定應該從父元素繼承 table-layout 屬性的值。
################
border-collapse
可能的值
值 描述
separate 默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
collapse 如果可能，邊框會合並為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
inherit 規定應該從父元素繼承 border-collapse 屬性的值。
#########
border-spacing可能的值
值 描述
length length
規定相鄰單元的邊框之間的距離。使用 px、cm 等單位。不允許使用負值。
如果定義一個 length 參數，那么定義的是水平和垂直間距。
如果定義兩個 length 參數，那么第一個設置水平間距，而第二個設置垂直間距。
inherit 規定應該從父元素繼承 border-spacing 屬性的值。
###########
caption-side可能的值
值 描述
top 默認值。把表格標題定位在表格之上。
bottom 把表格標題定位在表格之下。
inherit 規定應該從父元素繼承 caption-side 屬性的值。
####
empty-cells
可能的值
值 描述
hide 不在空單元格周圍繪制邊框。
show 在空單元格周圍繪制邊框。默認。
inherit 規定應該從父元素繼承 empty-cells 屬性的值。
#############
########
1.設置表格的布局
本例演示如何設置表格的布局。
<style type="text/css">
table.one{table-layout:automatic}
table.two{table-layout:fixed}
</style>
</head>
<body>
<table class="one" border="1" width="100%">
<tr>
<td width="20%">10000000000000000000000000000000000000000000</td>
<td width="40%">10000</td>
<td width="40%">100</td>
</tr>
</table>
<table class="two" border="1" width="100%">
<tr>
<td width="20%">10000000000000000000000000000000000000000000000</td>
<td width="40%">1000000000000</td>
<td width="40%">100</td>
</tr>
</table>
2.顯示表格中的空單元
本例演示是否顯示表格中的空單元。（請在非 IE 瀏覽器中瀏覽）
<style type="text/css">
table{border-collapse:separate;empty-cells:hide;}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td></td>
</tr>
</table>
<p><b>注釋：</b>如果已規定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 empty-cells 屬性。</p>
3.合並表格邊框
本例演示是否把表格邊框顯示為一條單獨的邊框，還是像標准的 HTML 中那樣分開顯示。
<style type="text/css">
table{border-collapse:collapse}
table,td,th{border:1px solid black}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table>
<p><b>注釋</b>如果沒有規定 !DOCTYPE，border-collapse 屬性可能會引起意想不到的錯誤</p>
</body>
4.設置表格邊框之間的空白
本例演示如何設置單元格邊框之間的距離。（請在非 IE 瀏覽器中瀏覽）
<style type="text/css">
table.one{border-collapse:separate;border-spacing:10px}
table.two{border-collapse:separate;border-spacing:10px 50px}
</style>
</head>
<body>
<table class="one" border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table>
<br />
<table class="two" border="1">
<tr>
<td>Carter</td>
<td>Thomas</td>
</tr>
<tr>
<td>Gates</td>
<td>Bill</td>
</tr>
</table>
5.設置表格標題的位置
本例演示如何定位表格的標題。（請在非 IE 瀏覽器中瀏覽）
<style type="text/css">
caption{caption-side:bottom}
</style>
</head>
<body>
<table border="1">
<caption>This is a caption</caption>
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table>
<p><b>注釋：</b>如果已規定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 caption-side 屬性。</p>
</body>
CSS 表格實例
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。