发表日期： 2022-05-28 15:05:28 浏览次数：205
广东省潮州网站建设_网站制作_公司开发设计_一站式全包_10多年经验满意为止
HTML 允许使用 <caption> 标签来为表格设置标题，标题用来描述表格的内容。
我们常见的表格一般都有标题，表格的标题使用 <caption> 标签来表示。默认情况下，表格的标题位于整个表格的第一行并且居中显示。一个表格只能有一个标题，也就是说 <table> 标签中只能有一个 <caption> 标签。
请看下面的例子：
<table border="1" style="border-collapse: collapse;"> <caption>这是表格的标题</caption> <tr> <th>名称</th> <th>官网</th> <th>性质</th> </tr> <tr> <td>C语言中文网</td> <td>http://c.biancheng.net/</td> <td>教育</td> </tr> <tr> <td></td> <td>http://www.baidu.com/</td> <td>搜索</td> </tr> <tr> <td>当当</td> <td>http://www.dangdang.com/</td> <td>图书</td> </tr></table>
浏览器运行结果如图：
和 Excel 类似，HTML 也支持单元格的合并，包括跨行合并和跨列合并两种。
rowspan：表示跨行合并。在 HTML 代码中，允许我们使用 rowspan 特性来表明单元格所要跨越的行数。
colspan：表示跨列合并。同样的，在 HTML 中，允许我们使用 colspan 特性来表明单元格所要跨越的列数。
具体格式如下：
<td rowspan="n">单元格内容</td>
<td colspan="n">单元格内容</td>
n 是一个整数，表示要合并的行数或者列数。
此处需注意，不论是 rowspan 还是 colspan 都是 <td> 标签的属性。
下面的例子中，我们将表格第 1 列的第 3、4 行单元格合并（跨行合并），将第 4 行的第 2、3 列合并（跨列合并）。具体代码如下：
<table border="1" style="border-collapse: collapse;"> <tr> <th>名称</th> <th>官网</th> <th>性质</th> </tr> <tr> <td>C语言中文网</td> <td>http://c.biancheng.net/</td> <td>教育</td> </tr> <tr> <td rowspan="2">百度</td> <td>http://www.baidu.com/</td> <td>搜索</td> </tr> <tr> <td colspan="2">http://www.dangdang.com/</td> </tr></table>
运行效果如图：
通过运行结果可以发现：
rowspan 属性表示向下合并单元格，colspan 属性表示向右合并单元格。
每次合并 n 个单元格都要少写 n-1 个<td>标签。
提示：即使一个单元格中没有任何内容，我们仍需使用 <td> 或 <th> 元素来表示一个空单元格的存在，建议在 <td> 或 <th> 中加入 （空格），否则低版本的 IE 可能无法显示出这个单元格的边框。
广东省潮州网站建设_网站制作_公司开发设计_一站式全包_10多年经验满意为止
