HTML5的表格元素
<table>:用于定义表格,<table>元素只能包括0个或1个<caption>子元素,0个或1个<thead>、<tfoot>元素,多个<tr>、<tbody>子元素,该元素的属性除了通常的id、class、style外,还有cellpadding属性(用于指定单元格内容和单元格边框的间距)和cellspacing属性(指定单元格边框之间的间距),width:该属性可以定义单元格的宽度。除此之外,还可以为<table>元素添加onclick事件。
<caption> :用于定义表格的标题,该元素只能包含文本,图片,超链接,文本格式化元素和表单控制元素。
<tr> :定义表格行,只能包括 <td> 和 <th> 两种元素,该元素可以指定 id 、 class 、和 style ,还可以添加 onclick 事件。
<td> :用于定义单元格,可以包含各种类型的子元素,除了通用属性和添加 onclick 事件之外,还有一下四个属性:
colspan :指定单元格跨多少列。
rowspan :指定单元格跨多少行。
height :指定单元格的高度。
width :指定单元格的宽度。
<th> :定义表格的表头单元格。
<tbody>: 定义表格的主体。可以进行表格中的单元格合并。
<thead> :定义表格头。<tfoot>:定义表格脚。
<table border="" cellspacing="" cellpadding="" width="500px" align="center"> <caption><b>人员名单</b></caption> <tr> <td ></td> <td >姓名</td> <td >专业</td> </tr> <tbody> <tr> <th rowspan="2"> 数学专业 </th> <td>小明</td> <td>男</td> </tr> <tr> <td>小红</td> <td>女</td> </tr> </tbody> <tbody> <tr> <th rowspan="2"> 数学专业 </th> <td>小明</td> <td>男</td> </tr> <tr> <td>小红</td> <td>女</td> </tr> </tbody> <tr> <td colspan="3" style="text-align: right;"> 总人数 :4人 </td> </tr> </table>
效果如下:
HTML5的表格元素
最新推荐文章于 2022-07-31 12:17:12 发布