HTML表格结构
表格的作用及应用场景:呈现数据或统计信息
表格的html基本结构包括:表格区<table>、表格行<tr>、单元格<td>。3个基本表亲是表格的基本构成结构,缺一不可且嵌套关系不可改变。多个<td>形成<tr>,多个<tr>形成<table>。
表格结构的扩展
如果使用<thead>、<tbody>、<tfoot>,必须一起使用。且顺序是<thead><tfoot><tbody>。
CSS表格样式
表格的个性:表格类的元素是比较特殊的一类元素,他们有自己独特的displaty模式
样式应用技巧:
1.所有表格类的元素都可以看做是box,使用盒模型来设置
2. 基于表格元素之间固定的嵌套关系,使用盒模型时注意以下几点:
表格边框设置
默认情况下,表格<table>和单元格<td>都有边框的设置。通过border-collapse属性将两者边框进行合并。
单元格<td>的特性
可以把<td>看作是个box进行设置,其display模式为table-cell。对宽高的设置敏感且会自动分配,以施佩玉<table>的纵狂傲。完美呈现vertical-align属性效果,实现<td>中的内容元素垂直居中。
实例:漂亮的数据表格
<!doctype html>
<html>
<head>
<style>
table { border-collapse:collap se; border: white 1px solid;height:auto; width:1100px; }
table th {background:#93CEE6; border: white 1px solid; font-weight:normal; padding:15px 30px;}
table td{background:#CBEBF9; border: white 1px solid; padding:15px;}
.main { background:#70BFD3; font-weight:bold;}
.sub-main { text-align:left;}
tfoot th {background:#ABC77D;}
tfoot td {background:#CADAA1; font-weight:bold;}
</style>
</head>
<body>
<table width="200" border="1" >
<thead>
<tr>
<th class="main" scope="col" rowspan="2">Main mode </th>
<th class="main" scope="col" colspan="6">Area of workplace </th>
</tr>
<tr class="sub-main" >
<th >Central London </th>
<th>Rest of Inner London </th>
<th>Outer London </th>
<th>All London </th>
<th>Rest of Great Britain </th>
<th>Great Britain </th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row" class="sub-main">All modes </th>
<td>33</td>
<td>24</td>
<td>20</td>
<td>25</td>
<td>15</td>
<td>17</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row" class="sub-main">Car and van </th>
<td>48</td>
<td>32</td>
<td>25</td>
<td>29</td>
<td>20</td>
<td>20</td>
</tr>
<tr>
<th scope="row" class="sub-main">Motorbike,moped,scooter</th>
<td>36</td>
<td>29</td>
<td>27</td>
<td>31</td>
<td>19</td>
<td>21</td>
</tr>
<tr>
<th scope="row" class="sub-main">Bicycle</th>
<td>33</td>
<td>24</td>
<td>20</td>
<td>25</td>
<td>15</td>
<td>17</td>
</tr>
<tr>
<th scope="row" class="sub-main">Bus and coach </th>
<td>48</td>
<td>32</td>
<td>25</td>
<td>29</td>
<td>20</td>
<td>20</td>
</tr>
<tr>
<th scope="row" class="sub-main">National Rail </th>
<td>36</td>
<td>29</td>
<td>27</td>
<td>31</td>
<td>19</td>
<td>21</td>
</tr>
<tr>
<th scope="row" class="sub-main">Underground</th>
<td>33</td>
<td>24</td>
<td>20</td>
<td>25</td>
<td>15</td>
<td>17</td>
</tr>
<tr>
<th scope="row" class="sub-main">walk</th>
<td>33</td>
<td>24</td>
<td>20</td>
<td>25</td>
<td>15</td>
<td>17</td>
</tr>
</tbody>
</table>
</body>
</html>
效果图: