1. 使用css精准控制table邊框與各單元格邊框
本節目錄：
l css如何控制表格單元格內文字的對齊效果；
l 如何通過css設置表格的邊框、th的邊框、td的邊框；
l 如何通過css實現這樣的表格：表格只有上下邊框，沒有左右邊框；單元格只有上下邊框，沒有左右邊框；表格上下邊框是實現，而內部表格行的上下邊框都是虛線；
l 如何通過css實現這樣的表格：表格第一行左起第一個單元格為空白單元格，沒有背景色，也沒有邊框；表頭行有背景色；非表頭行的單元格無背景。
使用css實現單元格文字居中、靠左顯示，主要設置單元格td的text-align屬性，該屬性有3種取值：left、center、right，分別代表靠左、居中、靠右對齊，如下例所示：
| <html> <body> <table style="width:30%; border-collapse:collapse; border-spacing:0;"> <tr> <td style="text-align:center; border:1px solid #aaa; background:white">張三</td> <td style="text-align:left; border:1px solid #aaa; background:white">張三</td> </tr> </table> </body> </html> |
HTML制作新手在用TABLE表格時，會碰到如何改變邊線粗細的問題，因為默認的TABLE邊線設置即使是1px 也是很粗的。常見的做法是利用 CSS2 的 "border-collapse:collapse;" 屬性合並表格邊框，並對 table 元素設置左邊框和上邊框，對 th 和 td 元素設置右邊框和下邊框，如下例所示：
| <html> <head> <META http-equiv=Content-Type content="text/html; charset=UTF-8" />
<style type="text/css"> div,span,font,a,td{font-size:13px;} table{border-collapse:collapse; border-spacing:0; border-left:1px solid #aaa; border-top:1px solid #aaa; background:#efefef;} th{border-right:1px solid #888; border-bottom:1px solid #888; padding:3px 15px; text-align:center; font-weight:bold; background:#ccc; font-size:13px;} td{border-right:1px solid #888; border-bottom:1px solid #888; padding:3px 15px; text-align:center; color:#3C3C3C;} </style> </head>
<body> <table style="width: 30%"> <tr> <th>編號</th> <th>用戶名</th> <th>所屬部門</th> </tr> <tr> <td>1</td> <td>張三</td> <td>研發部</td> </tr> <tr> <td>1</td> <td>張三</td> <td>研發部</td> </tr> </table> </body> </html> |
實現的效果如下圖所示：
如果要實現這樣的表格：表格只有上下邊框，沒有左右邊框；單元格只有上下邊框，沒有左右邊框；表格上下邊框是實現，而內部表格行的上下邊框都是虛線。效果示意圖如下圖所示：
這樣的表格效果該如何實現呢？其實知道了上面的原理后，只需將上例中的CSS樣式改成如下即可：
| <style type="text/css"> div,span,font,a,td{font-size:13px;} table{border-collapse:collapse; border-spacing:0; border-left:0px; border-top:1px solid #aaa; border-bottom:1px solid #aaa; background:#efefef;} th{border-right:0; border-bottom:1px dotted #aaa; padding:3px 15px; text-align:center; font-weight:bold; background:#efefef; font-size:13px;} td{border-right:0; border-bottom:1px dotted #aaa; padding:3px 15px; text-align:center; color:#3C3C3C; background:white} </style> |
我們看到：為了讓表格沒有左邊框，只需將其border-left設為0；為了讓單元格沒有左右邊框，只需將th和td的border-right設置為0；為了讓表格行上下邊框呈現虛線效果，只需設置th和td的broder-bottom屬性。但是這樣會出現一個問題：由於td的下邊框被設置為虛線，那么表格的下邊框也會呈現虛線，因為表格下邊框就是最后一行各個單元格的下邊框，為此，只需設置table的border-bottom屬性，將其設置為實現效果。
接下來，如果要實現下面的效果（表格第一行左起第一個單元格為空白單元格，沒有背景色，也沒有邊框；表頭行有背景色；非表頭行的單元格無背景。如下圖所示）：
這樣的效果該如何實現呢？我們可以純粹利用單元格的屬性來實現而不設置任何table的邊框屬性，如下所示：
| <html> <body> <table style="width:30%; border-collapse:collapse; border-spacing:0;"> <tr> <th style="border:0; background:white;"></th> <th style="border:1px solid #aaa; background:#efefef">用戶編號</th> <th style="border:1px solid #aaa; background:#efefef">所屬部門</th> </tr> <tr> <td style="border-bottom:1px solid #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; border-top:1px solid #aaa; background:white">張三</td> <td style="border-bottom:1px solid #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; background:white">1</td> <td style="border-bottom:1px solid #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; background:white">研發部</td> </tr> <tr> <td style="border-bottom:1px solid #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; background:white">李四</td> <td style="border-bottom:1px solid #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; background:white">2</td> <td style="border-bottom:1px solid #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; background:white">研發部</td> </tr> </table> </body> </html> |