版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013101178/article/details/81435964
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>