web前端学习笔记（五）——表格

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>

效果图：

web前端学习笔记（五）——表格

猜你喜欢