1.表格的基本组成
<!--主要用于展示数据,不会用来搭建页面-->
<!--table里面包含caption表格标题,tr行标签,th、td列标签,th作为加粗每列标题-->
<!--td内部可以包含ul|li, ol|li的无序,自定义标签-->
<table border="1">
<caption>成绩单</caption>
<tr>
<th>Score</th>
<td>
<ol>
<li>80</li>
<li>88</li>
</ol>
</td>
</tr>
<tr>
<th>Summary</th>
<td>
<ul>
<li>168</li>
</ul>
</td>
</tr>
</table>
2.表格扩展
<!--可以使用thead、tbody、tfoot进行进一步划分-->
<table border="1">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Score</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Summary</td>
</tr>
</table>
3.colspan,rowspan
<!--只能用在th、td上-->
<th colspan="2">Telephone</th>
<td rowspan="2">Telephone</td>
4.表格的一些属性
1.表格位置设置:
<table>
元素应该使用CSS
制定样式。margin-left
、margin-right
为auto
或者margin
设置为0 auto
来实现类似于align 属性的效果。
2.颜色设置:CSS中的background-color
。
3.表格、行标签高宽设置:CSS中的width
、height
4.边框样式:border-style
、border-width
、border-color
5.表格单元的内容和边框之间的空间:
5.1)在<table>
元素上使用CSS
属性值为 collapse 的border-collapse
属性。值包括:collapse、separate;
5.2)在<td>
元素上使用属性padding
,以达到类似于 cellpadding 的效果。
6.定义了两个单元格之间空间的大小(从水平和垂直方向上):
<table>
元素应该使用CSS
定制样式。在<table>
元素上使用CSS
的属性border-spacing
,以达到类似于cellspacing
的效果。值包括:使用 px、cm 等单位定义距离。
6.1)如果定义一个 length 参数,那么定义的是水平和垂直间距。
6.2)如果定义了两个 length 参数,那么第一个设置水平间距,而第二个设置垂直间距。length 不能为负值。
5.col, colgroup
<!--col标签只能用在table、colgroup中-->
<!--col的属性包括span和通过CSS设置的background-color-->
<!--span设置跨多少列来设置属性样式-->
<!--colgroup的样式会被col的样式覆盖-->
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<!--前两列颜色为红色-->
<col style="background-color:yellow">
</colgroup>
<tr>
<th>row1</th>
<th>row2</th>
<th>row3</th>
</tr>
</table>
网友评论