本章介紹CSS中Table(表格)樣式如何設定? (程式碼實例)。有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
一、表格邊框
border 指定CSS表格邊框,使用border屬性。
下面的範例指定了一個表格的Th和TD元素的黑色邊框:
table, th, td { border: 1px solid black; }
#請注意,在上面的範例中的表格有雙邊框。這是因為表和th/ td元素有獨立的邊界。
為了顯示一個表格的單一邊框,使用 border-collapse屬性。
二、折疊邊框
border-collapse 屬性設定表格的邊框是否被折疊成單一的邊框或隔開:
table { border-collapse:collapse; } table,th, td { border: 1px solid black; }
三、表格寬度和高度
Width和height屬性定義表格的寬度和高度。
下面的例子是設定100%的寬度,50像素的th元素的高度的表格:
table {width:100%;} th{height:50px;}
四、表格文字對齊
#表格中的文字對齊和垂直對齊屬性。
text-align屬性設定水平對齊方式,像左,右,或中心:
td{text-align:right;}
vertical-align 垂直對齊屬性設定垂直對齊,例如頂部,底部或中間:
td{ height:50px; vertical-align:bottom; }
五、表格填入
padding 如果在表格的內容中控制空格之間的邊框,應使用td和th元素的填滿屬性:
td{padding:15px;}
六、表格顏色
下面的範例指定邊框的顏色,和th元素的文字和背景顏色:
table, td, th { border:1px solid green; } th { background-color:green; color:white; }
七、範例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS教程</title> <style> #customers { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:100%; border-collapse:collapse; } #customers td, #customers th { font-size:1em; border:1px solid #98bf21; padding:3px 7px 2px 7px; } #customers th { font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; } #customers tr.alt td { color:#000000; background-color:#EAF2D3; } </style> </head> <body> <table id="customers"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr class="alt"> <td>Berglunds snabbköp</td> <td>Christina Berglund</td> <td>Sweden</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr class="alt"> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr class="alt"> <td>Königlich Essen</td> <td>Philip Cramer</td> <td>Germany</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr class="alt"> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>Simon Crowther</td> <td>UK</td> </tr> <tr class="alt"> <td>Paris spécialités</td> <td>Marie Bertrand</td> <td>France</td> </tr> </table> </body> </html>
效果圖:
以上是CSS中Table(表格)樣式是如何設定? (程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!