CSS表格與表單是網頁上最常見的元素,表格除了顯示資料外,也常被用來排版。
一 表格邊框帶顏色
#面的範例指定了一個表格的Th,TD元素和th元素的文字和背景顏色邊框:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> <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> </head> <body> <!-- Table goes in the document BODY --> <table class="gridtable"> <tr> <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th> </tr> <tr> <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td> </tr> <tr> <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td> </tr> </table> </body> </html>
為了顯示一個表格的單一邊框,使用border-collapse屬性。
二 表格寬度和高度
#Width和height屬性定義表格的寬度和高度。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> table,td,th { border:1px solid black; } table { width:50%; } th { height:50px; } </style> </head> <body> <table> <tr> <th>汽车品牌</th> <th>产地</th> </tr> <tr> <td>马自达</td> <td>日本</td> </tr> <tr> <td>菲亚特</td> <td>意大利</td> </tr> <tr> <td>林肯</td> <td>美国</td> </tr> </table> </body>
三 表格文字對齊
#text-align屬性設定水平對齊方式,像是左,右,或中心
vertical-align 垂直對齊屬性設定垂直對齊,例如頂部,底部或中間
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> table, td, th { border:1px solid black; } td { height:50px; vertical-align:bottom; } </style> </head> <body> <table> <tr> <th>汽车品牌</th> <th>产地</th> </tr> <tr> <td>马自达</td> <td>日本</td> </tr> <tr> <td>菲亚特</td> <td>意大利</td> </tr> <tr> <td>林肯</td> <td>美国</td> </tr> </table> </body>