<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML表格</title>
<style type="text/css">
table,th,td {
/*设置表格以及单元格的边框*/
border: 1px solid blue;
}
table {
/*将表格边框折叠为单一边框*/
border-collapse: collapse;
/*设置表格的宽度,百分比值表示占父元素的宽度的百分比*/
width: 100%;
}
th,td {
/*设置表格中单元格的高度*/
height: 20px;
/*设置单元格中的文本的水平对齐方式*/
text-align: center;
/*设置单元格中的文本的竖直对齐方式*/
vertical-align: center;
/*设置单元格的内边距*/
padding: 10px;
}
td {
/*设置td单元格的背景色为绿色*/
background-color: green;
/*设置td单元格的字体颜色为白色*/
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table>
</body>
</html>
CSS基础知识梳理-table表格
最新推荐文章于 2018-04-02 10:45:00 发布