- 表格的基本语法
<table>
<tr>
<td>单元格内的内容</td>
...
</tr>
...
</table>
- <table></table>是用于定义表格的标签.
- <tr></tr>标签用于定义表格中的行,必须嵌套在<table></table>标签中使用.
- <td></td>用于定义表格中的单元格,必须嵌套在<tr></tr>标签中使用.
- 字母td指表格数据(table data),即数据单元格的内容.
- 表头单元格标签
一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示.
th是table head的缩写
<table>
<tr>
<th>表头</th>
</tr>
<tr>
<td>单元格内的内容</td>
</tr>
</table>
- 表格属性
| 属性名 |
属性值 |
描述 |
| align |
left,center,right |
规定表格相对周围元素的对齐方式 |
| border |
像素值 |
当不为"0"时会为每个单元格应用边框,且规定围绕表格的边框的宽度,"0"表示没有边框包括内部单元格,默认没有边框. |
| cellpadding |
像素值 |
规定单元格边沿与其内容之间的空白,默认1像素. |
| cellspacing |
像素值 |
规定单元格之间的空白,默认2像素. |
| width |
像素值或百分比 |
规定表格的宽度 |
- 表格结构标签
使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分隔成表格头部和表格主体两大部分.这样可以更好的分清表格结构.
- <thead></thead>用于表示表头的头部区域,<thead>内部必须有<tr>标签.一般是位于第一行.
- <tbody></body>用于表示表头的主体区域.
- 以上两个标签都是放在<table></table>标签中.
- 合并单元格
- 合并单元格方式:
- 跨行合并:rowspan="合并单元格的个数"
- 跨列合并:colspan="合并单元格的个数"
- 目标单元格:(写合并代码的单元格)
- 跨行:最上侧单元格为目标单元格,写合并代码.
- 跨列:最左侧单元格为目标单元格,写合并代码.
- 合并单元格三步骤:
- 先确定是跨行还是跨列合并.
- 找到目标单元格,写上合并方式.比如:<td colspan="2"></td>.
- 删除多余的单元格.
