老K博客1、表格标签 table
- <table></table> 用来定义表格，
- <tr></tr> 用来定义行，嵌套在 <table></table> 中
- <td></td> 用来定义行中的单元格，嵌套在 <tr></tr> 中
- <tr></tr> 中只能嵌套<td></td> , 但 <td></td> 相当于一个容器，可以嵌套任意元素
表格相关的属性如下：
三参为0 border cellspacing cellpadding 三个参数为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table cellspacing="3" cellpadding="2" border="1" align="left">
<tr>
<td>第一行第1列</td>
<td>第一行第2列</td>
<td>第一行第3列</td>
</tr>
<tr>
<td>第二行第1列</td>
<td>第二行第2列</td>
<td>第二行第3列</td>
</tr>
</table>
</body>
</html>2、表头标签
- 表头一般位于表格的第一行或者第一列。
- 表头标签为 <th></th>，在显示的时候默认会显示为加粗的效果
- 增加表头时，使用 <th></th> 替代对应位置的 <td></td>即可
下图即是设置了表头的表格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表头</title>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="10" align="center">
<caption>caption标签是啥？标题？</caption>
<tr>
<th>属性</th>
<th>含义</th>
<th colspan="2">取值</th>
</tr>
<tr>
<th>border</th>
<td>单元格边框</td>
<td>像素值，默认0</td>
<td rowspan="3">rowspan从当前单元格向下跨三行</td>
</tr>
<tr>
<th>cellspacing</th>
<td>单元格与单元格边框的间距</td>
<td>像素值，默认2</td>
</tr>
<tr>
<th>cellpadding</th>
<td>单元格内容与单元格边框的间距</td>
<td>像素值，默认1</td>
</tr>
</table>
</body>
</html>3、表格结构(了解)
使用表格时，可以将表格分为头部、主体、页脚（页脚有兼容问题）
- 用来定义头部。必须位于 中，一般包含网页的logo和导航等头部信息。
- 用来定义表格的主体，一般包含网页中除头部和底部之外的其他内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>thead+tbody</title>
</head>
<body>
<table cellspacing="2" cellpadding="10" align="center" border="1">
<thead>
<tr>
<th>属性名称</th>
<th>含义</th>
<th>取值</th>
</tr>
</thead>
<tbody>
<tr>
<td>colspan</td>
<td>向右横跨几列</td>
<td>数值</td>
</tr>
<tr>
<td>rowspan</td>
<td>向下竖跨几行</td>
<td>数值</td>
</tr>
</tbody>
</table>
</body>
</html>
4、表格标题标签 caption
- <caption></caption> 标签用来定义标题的标签
- 必须写在 <table></table> 中，和 <thead></thead>平级
相关代码可以参考 表头标签 的代码。
5、单元格合并
- 适用于 <td></td>、<th></th>
- colspan 跨列合并（水平合并）
- rowspan 跨行合并（垂直合并）
相关代码可以参考 表头标签 的代码。
