- <table> 标签
- 表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
- border 属性:规定表格单元拥有边框
- 表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
- <tr> 表格行标签
- 用来定义表格的一行。由于HTML表格是面向行的,所以必须分别表示每一行
- tr 元素可以在 table,thead,tbody 和 tfoot 元素内使用
- tr 元素内可以包含一个或者多个 td 或 th 元素
- <td> 表格单元格标签
- 用来定义表格单元格,可以同 colspan,rowspan,headers 局部属性使用
- colspan: 左右合并单元格,该属性规定了单元格可横跨的列数,该属性的值必须是整数
- rowspan:上下合并单元格,该属性规定了单元格可横跨的行数,该属性的值必须是整数
- cellpadding:规定单元格边沿与其内容之间的空白
- cellpadding="0" 是让单元格边框线与单元格中的内容之间的距离为 0 像素,即单元格中内容紧挨着单元格的边线。
- cellspacing:规定单元格之间的空白
- cellspacing="0" 是让各单元格之间的缝隙为 0 象素
- headers:该属性的值是一个或多个单元的 ID 属性值,将单元格与列标题相关联,可用于使用屏幕阅读器
- width:规定表格宽度
- height:规定表格高度
- align:规定表格相对周围元素的对齐方式
- left
- center
- right
- 用来定义表格单元格,可以同 colspan,rowspan,headers 局部属性使用
- <th> 标题单元格标签
- 用来定义标题单元格,使我们有效区分数据及其描述
- 它同 <td> 元素具有相同的局部属性,两者有如下区别:
- <th> 是表示头标记,通常位于首行或者首列。而且 <th> 中的文字默认会被加粗,而 <td> 是不会的
- <td> 是数据标记,表示单元格的具体的数据
- 快速制表
- 如下快速生成 3 行 2 列的方法
<body> table>tr*3>td*2 <!-- 输入完后,再按 Tab 键 --> </body>
<body> <table border="1"> <tr> <th>姓名</th> <th>年纪</th> <th>班级</th> </tr> <tr> <td>张三</td> <td>18</td> <td>一班</td> </tr> </table> </body>
<body> <table border="1" width="200" height="20"> <tr> <th>姓名</th> <th>年纪</th> <th>班级</th> </tr> <tr align="center"> <td>张三</td> <td>18</td> <td>一班</td> </tr> </table> </body>
<body> <table border="1" width="200" height="20"> <tr> <th>姓名</th> <th>年纪</th> <th>班级</th> </tr> <tr> <td>张三</td> <td></td> <td rowspan="2"></td> <!-- 上下合并 --> </tr> <tr> <td>李四</td> <td></td> <!-- <td></td> --> </tr> <tr> <td>王五</td> <td colspan="2"></td> <!-- 左右合并 --> <!-- <td></td> --> </tr> </table> </body>