2019-3-9 网页设计教学 Table Demo

最新推荐文章于 2024-04-11 21:55:05 发布

gCodeTop 格码拓普老师

最新推荐文章于 2024-04-11 21:55:05 发布

阅读量180

点赞数

分类专栏： 2018-9-Web前端设计

本文链接：https://blog.csdn.net/vinglemar/article/details/88362350

版权

2018-9-Web前端设计专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Table Demo</title>
<style type="text/css">
table {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}
th {
	background-color: #CCC;
}
td,th {
	border-bottom-width: 1px;
	border-bottom-style:dashed;
	border-bottom-color: #666;
}
.row1 th {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666;	
}
</style>
</head>
<body>
<table>
  <tr class="row1">
    <th>ID</th>
    <th>Name</th>
    <th>Sex</th>
    <th>Age</th>
    <th>Web</th>
  </tr>
  <tr>
    <th>HT001</th>
    <td>张三</td>
    <td>F</td>
    <td>21</td>
    <td>89.45</td>
  </tr>
  <tr>
    <th>HT002</th>
    <td>李四</td>
    <td>F</td>
    <td>18</td>
    <td>67.00</td>
  </tr>
  <tr>
    <th>HT003</th>
    <td>王五</td>
    <td>M</td>
    <td>16</td>
    <td>44.90</td>
  </tr>
  <tr>
    <th>HT004</th>
    <td>王麻子</td>
    <td>M</td>
    <td>22</td>
    <td>67.90</td>
  </tr>
  <tr>
    <th>HT005</th>
    <td>赵六</td>
    <td>F</td>
    <td>88</td>
    <td>100.00</td>
  </tr>
  <tr>
    <th>HT006</th>
    <td>宋七</td>
    <td>F</td>
    <td>45</td>
    <td>34.12</td>
  </tr>
</table>
</body>
</html>

最终效果: 在浏览器中,表格居中,左右留有20%的空白。

上述CSS代码有些冗余，优化为:

<style type="text/css">
table {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}
th{
	background-color: #CCC;
}
th,td{
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #999;	
}
.row1 th{
	border-bottom-style: solid;
}
</style>