使用 CSS 可以大大改善 HTML 表格的外观:
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 |
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<h1>A Fancy Table</h1>
<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>
<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>
<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>
<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>
<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>
<td>Paris sp�cialit�s</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>
要在 CSS 中指定表格边框,请使用 border
属性。
下面的示例为 <table>、<th> 和 <td> 元素指定实线边框:
Firstname | Lastname |
---|---|
Peter | Griffin |
Lois | Griffin |
table, th, td {
border: 1px solid;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<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>
在某些情况下,上表可能看起来很小。如果您需要一个横跨整个屏幕(全角)的表格,请将 width: 100%
添加到 <表>元素:
Firstname | Lastname |
---|---|
Peter | Griffin |
Lois | Griffin |
table {
width: 100%;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid;
}
table {
width: 100%;
}
</style>
</head>
<body>
<h2>Full-width Table</h2>
<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>
请注意,上面示例中的表格有双边框。这是 因为表格以及 <th> 和 <td> 元素都有单独的边框。
要删除双边框,请查看下面的示例。
border-collapse
属性设置表格是否有边框 应该折叠成一个边框:
Firstname | Lastname |
---|---|
Peter | Griffin |
Lois | Griffin |
table
{
border-collapse: collapse;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid;
}
table {
width: 100%;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Let the table borders collapse</h2>
<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>
如果您只需要表格周围有边框,只需指定 border
属性 <表>:
Firstname | Lastname |
---|---|
Peter | Griffin |
Lois | Griffin |
table
{
border: 1px solid;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border: 1px solid;
}
</style>
</head>
<body>
<h2>Single Border Around The Table</h2>
<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>