HTML5学习笔记(四):关于表格
在一个实例中碰到表格,总结下,先上代码,例:
<table border="1"> <thead> <th>表头</th> <th>表头</th> <th>表头</th> </thead> <tbody> <tr> <td>表内容单元格</td> <td>表内容单元格</td> <td><a href="#">操作</a></td> </tr> <tr> <td>表内容单元格</td> <td>表内容单元格</td> <td><a href="#">操作</a></td> </tr> <tr> <td>表内容单元格</td> <td>表内容单元格</td> <td><a href="#">操作</a></td> </tr> <tr> <td>表内容单元格</td> <td>表内容单元格</td> <td><a href="#">操作</a></td> </tr> </tbody> <tfoot> <tr> <td>总计</td> <td colspan="2">1000</td> </tr> </tfoot> </table>
显示效果如下:
总结:
- <thead>标签:用于定义表格的表头,该标签用于组合 HTML 表格的表头内容;<thead> 内部必须拥有 <tr> 标签!
<th> 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本。
- <tbody>标签:用于对 HTML 表格中的主体内容进行分组;
- <tfoot>标签:用于对 HTML 表格中的表注(页脚)内容进行分组;
如果使用 thead、tfoot 以及 tbody 元素,就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了,并且必须在 table 元素内部使用这些标签。