HTML学习_02表格
表格标签
合并单元格
表格标签
| 标签 |
说明 |
| <table></table> |
定义表格的标签 |
| <tr></tr> |
定义表格中的行，必须嵌套在<table>标签中 |
| <td></td> |
定义表格中的单元格，必须嵌套在<tr></tr>中 |
| <th></th> |
表头单元格，类似于<td></td>，但其中内容居中加粗显示 |
| <thead><thead> |
表格结构标签，通常用于包含表格头部 |
| <tbody></tbody> |
表格结构标签，通常用于包含表格主题 |
| 属性(写在<table><table>中) |
属性值 |
说明 |
| align |
left、center、right |
规定表格相对周围元素的对齐方式 |
| border |
1或"" |
规定表格是否拥有边框，默认为"",表示没有边框 |
| cellpadding |
像素值 |
规定单元格的内容与其边沿边的空白 |
| cellspacing |
像素值 |
规定单元格之间的空白，默认为2px |
| width |
像素或百分比 |
规定表格的宽度 |
<!--上方表格采用markdown编写-->
<table>
<thead>
<tr>
<th>单元格内的文字</th><th>单元格内的文字</th><th>单元格内的文字</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格内的文字</td><td>单元格内的文字</td><td>单元格内的文字</td>
</tr><tr>
<td>单元格内的文字</td><td>单元格内的文字</td><td>单元格内的文字</td>
</tr>
<tr>
<td>单元格内的文字</td><td>单元格内的文字</td><td>单元格内的文字</td>
</tr>
</tbody>
</table>
<!--此框内为下方表格html代码,由于在markdown中显示，可能与在浏览器中显示的内容有区别——>
| 单元格内的文字 | 单元格内的文字 | 单元格内的文字 |
| 单元格内的文字 | 单元格内的文字 | 单元格内的文字 |
| 单元格内的文字 | 单元格内的文字 | 单元格内的文字 |
| 单元格内的文字 | 单元格内的文字 | 单元格内的文字 |
合并单元格
合并代码写在目标单元格中，跨换合并目标单元格对最上，跨列合并目标单元格为最左,删除多余单元格
| 属性（写在<td></td>中） |
属性值 |
说明 |
| rowspam |
单元格数量 |
合并跨行单元格 |
| colspan |
单元格数量 |
合列跨行单元格 |
<!--上方表格采用markdown编写-->
<table>
<thead>
<tr>
<th colspan = "2">单元格内的文字</th><th>单元格内的文字</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格内的文字</td><td>单元格内的文字</td><td>单元格内的文字</td>
</tr><tr>
<td rowspan = "2">单元格内的文字</td><td>单元格内的文字</td><td>单元格内的文字</td>
</tr>
<tr>
<td>单元格内的文字</td><td>单元格内的文字</td>
</tr>
</tbody>
</table>
<!--此框内为下方表格html代码,由于在markdown中显示，可能与在浏览器中显示的内容有区别——>
| 单元格内的文字 | 单元格内的文字 |
| 单元格内的文字 | 单元格内的文字 | 单元格内的文字 |
| 单元格内的文字 | 单元格内的文字 | 单元格内的文字 |
| 单元格内的文字 | 单元格内的文字 |
