CSS中table表格的两种使用方法（实例）
程序员文章站
2022-05-12 17:17:30
...
这篇文章给大家介绍的内容就是关于CSS中table表格的两种使用方法（实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
1.普通表格
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>CSS 表格。</title>
<style>
table {
width: 50%;
border-collapse: collapse;
/*border-collapse 属性设置是否将表格边框折叠为单一边框*/
}
table, th, td {
border: 1px solid blue;
}
th {
height: 50px;
background-color: green;
color: white;
}
td {
text-align: center;
padding: 5px; /*表格内边距*/
}
</style></head><body><table>
<tr>
<th>Firsetname</th>
<th>Lastname</th>
</tr>
<tr>
<td>jack1</td>
<td>jack2</td>
</tr>
<tr>
<td>jack3</td>
<td>jack4</td>
</tr>
</table>
</body>
</html>
2.一個漂亮的表格
<html><head>
<meta charset="utf-8">
<style type="text/css">
#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>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>apple</td>
<td>job</td>
</tr>
<tr class="alt">
<td>wang</td>
<td>jack</td>
</tr>
</table>
</body>
</html>
相关推荐：
以上就是CSS中table表格的两种使用方法（实例）的详细内容，更多请关注其它相关文章！