共计 2809 个字符,预计需要花费 8 分钟才能阅读完成。
在 HTML 中,咱们应用 <table> 标签来定义表格。HTML 中的表格和 Excel 中的表格是相似的,都包含行、列、单元格、表头等元素。然而 HTML 表格在性能方面远没有 Excel 表格弱小,HTML 表格不反对排序、求和、方差等数学计算,它个别用来展现数据。
在学习表格之前,咱们无妨先来看一段简略的 HTML 代码:
1. <table border="1">
2. <tr>
3. <th> 名称 </th>
4. <th> 官网 </th>
5. <th> 性质 </th>
6. </tr>
7. <tr>
8. <td>C 语言中文网 </td>
9. <td>http://c.biancheng.net/</td>
10. <td> 教育 </td>
11. </tr>
12. <tr>
13. <td> 百度 </td>
14. <td>http://www.baidu.com/</td>
15. <td> 搜寻 </td>
16. </tr>
17. <tr>
18. <td> 当当 </td>
19. <td>http://www.dangdang.com/</td>
20. <td> 图书 </td>
21. </tr>
22. </table>
运行成果如下图:
这是一个 4 行 3 列的表格。第一行为表头,其余三行为内容。
在上述代码中,咱们应用了 <table>、<tr>、<td> 及 <th> 四个标签:
-
示意表格,表格的所有内容须要写在
和
之间。
- <tr> 是 table row 的简称,示意表格的行。表格中有多少个 <tr> 标签就示意有多少行数据。
- <td> 是 table datacell 的简称,示意表格的单元格,这才是真正寄存表格数据的标签。单元格的数据能够是文本、图片、列表、段落、表单、水平线、表格等多种形式。
- <th> 是 table heading 的简称,示意表格的表头。<th> 其实是 <td> 单元格的一种变体,实质上还是一种单元格。<th> 个别位于第一行,充当每一列的题目。大多数的浏览器会把表头显示为粗体居中的文本。
默认状况下,表格是没有边框的。然而咱们能够应用 <table> 标签中的 border 属性来设置表格的边框宽度,单位是像素(px)。本例中咱们将表格的边框宽度设置为 1px。留神,px 是默认的单位,不必显式指明。
1. 表格的边框合并:
仔细的读者可能曾经发现了,网页中常见的表格款式大多为单层边框,上例中展现的表格为双层边框。为了防止这种状况,咱们能够利用 CSS 中的 border-collapse 属性来设置表格的边框。border-collapse 是“边框塌陷”的意思,当属性值为 collapse 时,能够使表格的双边框变为单边框。
示例代码如下:
1. <table border="1" style="border-collapse: collapse;"> 2. <tr> 3. <th> 名称 </th> 4. <th> 官网 </th> 5. <th> 性质 </th> 6. </tr> 7. <tr> 8. <td>C 语言中文网 </td> 9. <td>http://c.biancheng.net/</td> 10. <td> 教育 </td> 11. </tr> 12. <tr> 13. <td> 百度 </td> 14. <td>http://www.baidu.com/</td> 15. <td> 搜寻 </td> 16. </tr> 17. <tr> 18. <td> 当当 </td> 19. <td>http://www.dangdang.com/</td> 20. <td> 图书 </td> 21. </tr> 22. </table>
运行成果如下图所示:
2. 表格的题目
HTML 容许应用 <caption> 标签来为表格设置题目,题目用来形容表格的内容。
咱们常见的表格个别都有题目,表格的题目应用 <caption> 标签来示意。默认状况下,表格的题目位于整个表格的第一行并且居中显示。一个表格只能有一个题目,也就是说 <table> 标签中只能有一个 <caption> 标签。
请看上面的例子:
1. <table border="1" style="border-collapse: collapse;"> 2. <caption> 这是表格的题目 </caption> 3. <tr> 4. <th> 名称 </th> 5. <th> 官网 </th> 6. <th> 性质 </th> 7. </tr> 8. <tr> 9. <td>C 语言中文网 </td> 10. <td>http://c.biancheng.net/</td> 11. <td> 教育 </td> 12. </tr> 13. <tr> 14. <td></td> 15. <td>http://www.baidu.com/</td> 16. <td> 搜寻 </td> 17. </tr> 18. <tr> 19. <td> 当当 </td> 20. <td>http://www.dangdang.com/</td> 21. <td> 图书 </td> 22. </tr> 23. </table>
浏览器运行后果如图:
3. 单元格的合并
和 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 列合并(跨列合并)。具体代码如下:
1. <table border="1" style="border-collapse: collapse;"> 2. <tr> 3. <th> 名称 </th> 4. <th> 官网 </th> 5. <th> 性质 </th> 6. </tr> 7. <tr> 8. <td>C 语言中文网 </td> 9. <td>http://c.biancheng.net/</td> 10. <td> 教育 </td> 11. </tr> 12. <tr> 13. <td rowspan="2"> 百度 </td> 14. <td>http://www.baidu.com/</td> 15. <td> 搜寻 </td> 16. </tr> 17. <tr> 18. <td colspan="2">http://www.dangdang.com/</td> 19. </tr> 20. </table>
运行成果如图:
通过运行后果能够发现:
- rowspan 属性示意向下合并单元格,colspan 属性示意向右合并单元格。
- 每次合并 n 个单元格都要少写 n-1 个 <td> 标签。
提醒:即便一个单元格中没有任何内容,咱们仍需应用 <td> 或 <th> 元素来示意一个空单元格的存在,倡议在 <td> 或 <th> 中退出(空格),否则低版本的 IE 可能无奈显示出这个单元格的边框。