一、表格的根本语法
<table> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>佩奇</td> <td>女</td> <td>5</td> </tr></table>
1、<table> </table>
是用于定义表格的标签。
2、<tr> </tr>
是表格中的行,必须嵌套在 <table> </table>
标签中。
3、<td> </td>
是表格中的单元格,td 是 table data 的缩写,意为单元格内容,它必须嵌套在 <tr> </tr>
标签中。单元格中能够放任何内容,文字、图片、链接都能够。
4、<th> </th>
是表头单元格标签,th 是 table head 的缩写,意为表格头部,个别位于表格第一行或第一列,文本内容会加粗、居中显示。
二、表格的根本属性
实际上不罕用,个别会通过 CSS 来设置。
属性名 | 值 | 阐明 |
---|---|---|
align | left、center、right | 表格绝对四周元素的对齐形式 |
border | 1 或 "" | 表格是否有边框,默认为"",示意没有边框 |
cellpadding | 像素值 | 规定单元格边缘与内容之间的间隔,默认 1 像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认 2 像素 |
width | 像素值或百分比 | 规定表格的宽度 |
<table border="1" cellpadding="16" cellspacing="0"> //属性要写在 table 标签 <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>佩奇</td> <td>女</td> <td>5</td> </tr></table>
三、表格构造标签
在表格标签中,别离用 <thead>
标签作为表格的头部区域、<tbody>
标签作为表格的主体区域,这样能够清晰的分清表格构造。 <thead> 外部必须有 <tr> 标签。
<table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>佩奇</td> <td>女</td> <td>5</td> </tr> </tbody></table>
四、合并单元格
1、合并单元格的形式
- 跨行合并:rowspan="合并单元格的个数"
- 跨列合并:colspan="合并单元格的个数"
2、指标单元格
指标单元格是写合并代码的单元格。
- 跨行合并:最上侧单元格为指标单元格
- 夸列合并:最左侧单元格为指标单元格
<tbody> <tr> <td></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2"></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr></tbody>