- A+
所属分类：Web前端
1. 表格标签
1.1 表格的主要作用
表格主要用于显示、展示数据。
1.2 表格的基本语法
<table> <tr> <td>单元格内的文字<td> </tr> </table><table> </table> 是用于定义表格的标签。
<tr> </tr> 用于定义表格的行，必须嵌套在 <table> </table>标签中。
<td> </td> 用于定义表格中的单元格，必须嵌套在 <tr></tr> 标签中。td 指表格数据 table data
<table> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td>张三</td> <td>男</td> <td>18</td> </tr> <tr> <td>李四</td> <td>女</td> <td>28</td> </tr> </table>
1.3 表头单元格标签
<th> 标签表示 HTML 表格的表头部分，表头单元格的内容加粗居中。th 是 table head的缩写
<table> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>张三张三</td> <td>男</td> <td>1888888</td> </tr> <tr> <td>李四</td> <td>女</td> <td>28</td> </tr> </table>
1.4 表格属性
| 属性名 | 属性值 | 描述 |
| align | left、center、right | 表格相对周围元素的对齐方式 |
| border | 1 或 "" | 表格是否有边框，默认为""，表示没有边框 |
| cellpadding | 像素值 | 单元边沿与其内容之间的空白，默认1像素【单元格填充】 |
| cellspacing | 像素值 | 单元格之间的空白，默认2像素【单元格间距】 |
| width/height | 像素值或百分比 | 表格的宽度/高度 |
<table align="center" border="1">
--> 位于浏览器中部，单元格都有边框
<table align="center" border="1" cellpadding="10" cellspacing="0">
-->内边距为10px，将空隙设置为0
<table align="center" border="1" cellpadding="10" cellspacing="0" width="400" height="200">
-->宽度为400px，高度为200px
练习案例：小说排行榜
点击查看代码
<table align="center" border="1" cellpadding="5" cellspacing="0"> <tr> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>今日搜索</th> <th>最近七日</th> <th>相关链接</th> </tr> <tr> <td>1</td> <td>鬼畜灯</td> <td>↓</td> <td>345</td> <td>123</td> <td><a href="#">贴吧</a> <a href="#">百科</a></td> </tr> <tr> <td>2</td> <td>盗暮笔记</td> <td>↓</td> <td>245</td> <td>123</td> <td><a href="#">贴吧</a> <a href="#">百科</a></td> </tr> <tr> <td>3</td> <td>西游记</td> <td>↑</td> <td>1245</td> <td>14423</td> <td><a href="#">贴吧</a> <a href="#">百科</a></td> </tr> </table>
1.5 表格结构标签
因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成 表格头部 和 表格主体 两大部分：
<thead>标签 表格的头部区域、<tbody>标签 表格的主体区域。这样可以更好的分清楚表格结构。
<table align="center" border="1" cellpadding="10" cellspacing="0"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三张三</td> <td>男</td> <td>1888888</td> </tr> <tr> <td>李四</td> <td>女</td> <td>28</td> </tr> </tbody> </table>
1.6 合并单元格
特殊情况下，可以把多个单元格合并为一个单元格。
合并单元格两种方式：
(1) 跨行合并：rowspan = "合并单元格的个数"
(2) 跨列合并：colspan = "合并单元格的个数"
<table align="center" border="1" cellpadding="10" cellspacing="0"> <thead> <tr> <th colspan="5">个人简历</th> </tr> </thead> <tbody> <tr> <td>姓名</td> <td width="20"></td> <td>性别</td> <td width="20"></td> <td rowspan="2">照片</td> </tr> <tr> <td>年龄</td> <td></td> <td>出生日期</td> <td></td> </tr> </tbody> </table>
