小白教程
所有教程
关于
Search
172.70.131.189
172.70.131.189
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS Table(表格)”的源代码
本页内容
上一节:
CSS_列表
下一节:
CSS_盒子模型
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS Table(表格)}}[[Category:CSS 教程|11]] = CSS 表格 = 使用 CSS 可以使 HTML 表格更美观。 {| class="table table-striped table-hover" ! Company ! Contact ! Country |- | Alfreds Futterkiste | Maria Anders | Germany |- | Berglunds snabbköp | Christina Berglund | Sweden |- | Centro comercial Moctezuma | Francisco Chang | Mexico |- | Ernst Handel | Roland Mendel | Austria |- | Island Trading | Helen Bennett | UK |- | Königlich Essen | Philip Cramer | Germany |- | Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |- | Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |- | North/South | Simon Crowther | UK |- | Paris spécialités | Marie Bertrand | France |- | The Big Cheese | Liz Nixon | USA |- | Vaffeljernet | Palle Ibsen | Denmark |} == 表格边框 == 指定CSS表格边框,使用border属性。 下面的例子指定了一个表格的Th和TD元素的黑色边框: <sample title="" desc="" lang="html" hererun="1"> table, th, td { border: 1px solid black; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> table,th,td { border:1px solid black; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table> </body> </html> </run> 请注意,在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。 为了显示一个表的单个边框,使用 border-collapse属性。 == 折叠边框 == border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开: <sample title="" desc="" lang="html" hererun="1"> table { border-collapse:collapse; } table,th, td { border: 1px solid black; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> 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>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table> <p><b>注意:</b> 如果没有指定 !DOCTYPE border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。</p> </body> </html> </run> == 表格宽度和高度 == Width和height属性定义表格的宽度和高度。 下面的例子是设置100%的宽度,50像素的th元素的高度的表格: <sample title="" desc="" lang="html" hererun="1"> table { width:100%; } th { height:50px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body> </html> </run> == 表格文字对齐 == 表格中的文本对齐和垂直对齐属性。 text-align属性设置水平对齐方式,向左,右,或中心: <sample title="" desc="" lang="html" hererun="1"> td { text-align:right; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body> </html> </run> 垂直对齐属性设置垂直对齐,比如顶部,底部或中间: <sample title="" desc="" lang="html" hererun="1"> td { height:50px; vertical-align:bottom; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body> </html> </run> == 表格填充 == 如需控制边框和表格内容之间的间距,应使用td和th元素的填充属性: <sample title="" desc="" lang="html" hererun="1"> td { padding:15px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body> </html> </run> == 表格颜色 == 下面的例子指定边框的颜色,和th元素的文本和背景颜色: <sample title="" desc="" lang="html" hererun="1"> table, td, th { border:1px solid green; } th { background-color:green; color:white; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body> </html> </run> == 更多实例 == [[try.php?filename=trycss_table_fancy|制作一个个性表格]] 这个例子演示了如何创建一个个性的表格。 [[try.php?filename=trycss_table_caption side|设置表格标题的位置]] 这个例子演示了如何定位表格标题。
返回至“
CSS Table(表格)
”。
上一节:
CSS_列表
下一节:
CSS_盒子模型