版权声明:随便转载 https://blog.csdn.net/a732894380/article/details/83240699
1.表格构成三个基本要素
table:表格的范围,外框;用来定义表格,表格的其他元素包含在table标签里面
tr:表格的行;
td表格的单元格;
2.一点说明:关于表格的属性
HTML5中删除了HTML4中的table的大部分属性,html5中推荐使用CSS设定原来table属性实现的效果。
3.th元素:为表格添加标题行
th元素用来定义表格的标题单元格,他是tr元素的子元素,必须放在tr标签里边;tr元素内容会自动居中对齐并且
加粗文字
4.colspan元素:横向合并单元格
属性值为正整数,表示该单元格横向合并的列数,语法为<td colspan="3"></td>
5.rowspan元素:纵向合并单元格
属性值为正整数,表示该单元格纵向合并的行数,语法为<td rowspan="3"></td>
6.caption元素:给表格添加标题
用来制定表格的标题或者说明:是table的子元素,必须放在table中并使用
caption的align属性可以设置标题的位置,但是在html5中已经被废弃,不推荐使用,必须使用css样式设置
7.thead\tfoot\tbody元素
thead元素:表格的表头;tfoot元素:表格的页脚;tbaody元素:表格的主题;表格规范的写法应该包含这三部分
内容。注意:这三个主要结合CSS,javascript来说用
8.colgroup元素
colgroup元素用来组合列,他的span属性可以设置组合列的数目:它可以包含一个子元素 col;
colgroup元素为table元素的子元素,必须放在caption元素之后,thead元素之前。
9.col元素
col元素用来设定列的属性,他也可以使用span属性;col元素一般做为colgroup元素的子元素配合使用。
colgroup中组合列项目太多不能分别设置每列的样式,这时候就需要用到col元素。
普通单元格例子:
<table border=1>
<caption>表格标题行</caption>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
合并单元格源码例子:
<table border=1>
<tr><th colspan="3">标题</th></tr>
<tr>
<td>第一格</td>
<td>第二格</td>
<td>第三格</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
thead\tfoot\tbody元素的使用:
<table border=1>
<thead>
<tr style="background:red">
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
<tfoot>
<tr><td>备注:</td><td colspan="2"></td></tr>
</tfoot>
</table>
colgroup元素的使用:
<table border=1>
<colgroup span=2 style="width:200px;"></colgroup> <!--span是组合列的数目-->
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
col元素的使用:
<table border=1>
<colgroup span=1 style="width:200px;">
<col style="background:red"></col>
</colgroup> <!--span是组合列的数目-->
<colgroup span=3 style="width:150px;">
<col style="background:#6666ff"></col>
<col style="background:#ccff33"></col>
<col style="background:#66ff33"></col>
</colgroup>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>标题4</th>
<th>标题5</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>