HTML中table表格标签的基础学习教程
154 浏览量
2020-09-28
04:46:45
上传
评论
收藏 71KB PDF 举报
HTML中中table表格标签的基础学习教程表格标签的基础学习教程
用table标签在Web上显示表格内容是HTML所具有的最基本功能之一,这里我们就来看一下HTML中table表格标
签的基础学习教程,需要的朋友可以参考下
表格的标签组成表格的标签组成
HTML中的表格是由<table>为主体标签，浏览器会将该标签解释为一个表格。表格中的行使用<tr>标签进行定义。<tr>标签为
<table>标签的子类，设置若干个<tr>标签可以将表格分割为若干个行。<td>标签用于定义表格的列，<td>标签为又是<tr>标签
的子类，因此每个行都需要设置相应数量的<td>标签来分割列，形成一个完整的表格。
表格的标签组合关系为：
XML/HTML Code复制内容到剪贴板
1. <table>
2. <tr>
3. <td>我是单元格1</td>
4. <td>我是单元格2</td>
5. </tr>
6. </table>
表格中可以插入文本、图片、列表、段落、表单、水平线等任何html标签，甚至可以用来做页面布局。但是table布局存在代
码冗余过长、不符合HTML规范、搜索引擎不友好等问题。因此建议大家尽量不要使用table进行页面布局，除非页面中确实需
要一张表格。
剩下的<th>、<thead>、<tbody> 和 <tfoot>很少被用到，这是由于浏览器对它们的支持不太好。
表格和边框属性表格和边框属性
表格自身可以定义border属性来决定表格边框的宽度，该属性的值默认是以数字单位进行显示，例如border=”1″该值的单位为
px。注意，不要在border的数值后面加上任何单位，否该值无法正确识别。
表格的表头表格的表头
在<table>中可以通过<th>标签设置表头，表头的<th>标签与<tr>标签属于平级，并且表头一般出现在<tr>标签的前面。对于一
个表格来说，表头并不是必须的，可以根据需要插入表头。<th>标签内的文字会被自动加粗。
单元格的合并单元格的合并
单元格的合并分为垂直合并与水平合并，在合并时需要确定其他行与列中是否有对应数量的单元格。
水平合并单元格使用colspan属性，其值是用数字的形式确定需要合并的单元格数量，例如colspan=”2″即代表向右合并两个单
元格。
垂直合并单元格使用rowspan属性，与水平合并的属性相同，同样也是以数字形式确定需要合并的单元格数量，例如
rowspan=”2″代表向下合并两个单元格。
实例演示代码：
XML/HTML Code复制内容到剪贴板
1. <table border=“1”>
2. <tr>
3. <th>姓名</th>
4. <th colspan=“2”>电话</th>
5. </tr>
6. <tr>
7. <td>Bill Gates</td>
8. <td>555 77 854</td>
9. <td>555 77 855</td>
10. </tr>
11. </table><h4>横跨两行的单元格：</h4>
12. <table border=“1”>
13. <tr>
14. <th>姓名</th>
15. <td>Bill Gates</td>
16. </tr>
17. <tr>
18. <th rowspan=“2”>电话</th>
19. <td>555 77 854</td>
20. </tr>
21. <tr>
22. <td>555 77 855</td>
23. </tr>
24. </table>
评论0
最新资源