CSS 表格(table)
CSS 表格
使用CSS可以大幅提升HTML表格的外觀。
表格邊框
指定CSS表格邊框,使用border屬性。
下面的範例指定了一個表格的Th和TD元素的黑色邊框:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> table,th,td { border:1px solid black; } </style> </head> <body> <table> <tr> <th>数学</th> <th>语文</th> </tr> <tr> <td>90</td> <td>98</td> </tr> <tr> <td>95</td> <td>94</td> </tr> </table> </body> </html>
執行程式嘗試
注意:在上面的例子中的表格有雙邊框。這是因為表和th/ td元素有獨立的邊界。
為了顯示一個表格的單一邊框,使用 border-collapse屬性。
折疊邊框
#border-collapse 屬性設定表格的邊框是否被折疊成單一的邊框或隔開:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> table { border-collapse: collapse; } table, td, th { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>数学</th> <th>语文</th> </tr> <tr> <td>90</td> <td>98</td> </tr> <tr> <td>95</td> <td>94</td> </tr> </table> </body> </html>
執行程式嘗試一下
#表格寬度和高度
Width和height屬性定義表格的寬度和高度。
下面的例子是設定100%的寬度,50像素的th元素的高度的表格:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> table,td,th { border:1px solid black; } table { width:100%; } th { height:50px; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>0</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>0</td> </tr> </table> </body> </html>
運行程式嘗試一下
表格文字對齊
表格中的文字對齊和垂直對齊屬性。
text-align屬性設定水平對齊方式,像左,右,或中心:
#實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> table,td,th { border:1px solid black; } td { text-align:right; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>0</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>0</td> </tr> </table> </body> </html>
執行程式嘗試一下
實例
垂直對齊屬性設定垂直對齊,例如頂部,底部或中間:
<!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>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>0</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>0</td> </tr> </table> </body> </html>
執行程式嘗試一下
表格填入
如果在表格的內容中控制空格之間的邊框,應使用td和th元素的填充屬性:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> table, td, th { border:1px solid black; } td { padding:15px; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>0</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>0</td> </tr> </table> </body> </html>
執行程式嘗試
#表格顏色
下面的範例指定邊框的顏色,和th元素的文字和背景顏色:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> table, td, th { border:1px solid green; } th { background-color:green; color:white; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>0</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>0</td> </tr> </table> </body> </html>
執行程式嘗試
#實例
# #製作一張個性的表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</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>執行程式試試看