table标签定义一个表格,内部配合一些表格标签定义表格的内容。
很早以前,前端页面很多都是使用table来布局的,但是随着前端技术的发展内容的丰富,table的弊端体现的越来越明显,比如太规整了不符合现今网页的布局多样化,对SEO极其不友好,维护成本太大等等。所以目前来讲,使用table的情况比较少。
简单的表格
一般我们在使用表格时,需要用到的标签并不多,table、tr、th、td;
tr定义表格的行,内容都是写在行里面的;
th定义在行里面,字体会加粗,代表一列的标题;
td定义在行里面,代表每一项;
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>阿飞</td>
<td>夏栀</td>
<td>风屿</td>
</tr>
<tr>
<td>男</td>
<td>女</td>
<td>男</td>
</tr>
<tr>
<td>28</td>
<td>30</td>
<td>27</td>
</tr>
</table>
边框和边距
给table加上标签属性border 以使每个单元格都加上边框。该属性接收数字值,该值只能改变tabel的边框宽度,不能改变里面项目的边框宽度;
给table加上CSS样式border-collapse:collapse;
以使相邻单元格的边框合并,美化样式;
给table加上标签属性cellpadding以使每个单元格都加上padding,这个属性会受CSS样式的影响;
给table加上标签属性cellspacing以使每个单元格之间加上间隙,这个效果可以用CSS属性border-spacing
代替;
给td/th加上标签属性align可以设置文字对齐方式,类似于text-align的效果。
其他样式
在使用table时,我们也需要使用CSS样式来协助控制整个table的展示,例如宽高,文字大小居中加粗等等都是需要用到的。即使tabel提供的有一些标签属性控制,但是控制起来很不得心应手,除了border外,建议其它的样式都使用CSS控制。
单元格合并
rowspan 属性规定单元格纵跨的行数(纵向合并)
<td rowspan="2"></td>
colspan 属性规定单元格横跨的列数(横向合并)
<td colspan="2"></td>
表格的默认特性
在没有样式干预的情况下,表格有一些默认的特性,比如:
表格单元格里面可以继续嵌套另一个表格
一行中单元格的高度以最大的为准,一列中单元格的宽度以最大的为准;
一行中单元格的宽度按照内容多少来分配,如若有一个单元格设置了宽度,那么剩下的宽度平分给其他没设置的;
一列中单元格的高度和上面同理。
如果我们希望不是表格的元素也拥有表格的这些特性,我们可以使用display:table;
相关的一些属性:
<style>
#box{ display:table; } /* 相当于变成 table */
#box div{ display:table-row; } /*相当于变成 tr*/
#box p{ display:table-cell; } /*相当于变成 td*/
</style>
<div id="box">
<div>
<p>姓名</p>
<p>年龄</p>
</div>
<div>
<p>张三</p>
<p>李四</p>
</div>
<div>
<p>28</p>
<p>27</p>
</div>
</div>
当然这么用是很蛋疼的…其实利用table的特性我们可以借此来解决一些问题,比如:左边宽度固定,右边宽度自适应剩下的:
<style type='text/css'>
*{ margin:0; padding:0;font-family:'Microsoft yahei';}
body{
width:100%;
display:table;
}
#a{
display:table-cell;
width:500px;
height:100px;
background:pink;
}
#b{
display:table-cell;
height:100px;
background:red;
}
</style>
<div id="a"></div>
<div id="b"></div>
其他表格标签
tbody 即使不写,默认也会添加这个标签去包裹所有内容;
thead、tfoot 表格头表格尾;
caption 表格标题。
<style>
table{ border-collapse:collapse; }
</style>
<table border="1">
<caption>2017年张三成绩统计</caption>
<thead>
<tr>
<td></td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
</thead>
<tbody>
<tr>
<td>第01次</td>
<td>90</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<td>第02次</td>
<td>86</td>
<td>85</td>
<td>68</td>
</tr>
<tr>
<td>第03次</td>
<td>96</td>
<td>99</td>
<td>98</td>
</tr>
<tr>
<td>第04次</td>
<td>60</td>
<td>50</td>
<td>70</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>xx</td>
<td>xx</td>
<td>xx</td>
</tr>
</tfoot>
</table>