20-表格标签

表格标签

• 在页面中用于绘制表格，也可以用作页面布局

   1.  `<table>`
1.  `<!-- 行标签 -->`
1.  `<!-- 四行三列表格 -->`
1.  `<tr>`
1.  `<!-- 单元格标签 -->`
1.  `<th>学号</th>`
1.  `<th>姓名</th>`
1.  `<th>性别</th>`
1.  `</tr>`
1.  `<tbody>`
1.  `<tr>`
1.  `<!-- 单元格标签 -->`
1.  `<td>1</td>`
1.  `<td>小王</td>`
1.  `<td>男</td>`
1.  `</tr>`
1.  `<tr>`
1.  `<!-- 单元格标签 -->`
1.  `<td>2</td>`
1.  `<td>小红</td>`
1.  `<td>女</td>`
1.  `</tr>`
1.  `<tr>`
1.  `<!-- 单元格标签 -->`
1.  `<td>3</td>`
1.  `<td>小张</td>`
1.  `<td>女</td>`
1.  `</tr>`
1.  `</tbody>`
1.  `</table>`

• table：表示表格，一个table表示一个表格
• tr：表示行标签，一个tr表示一行
• td：表示单元格，一个td就是一列
• th：特殊的单元格标签，通常用于表头，文字有居中和加粗效果
• thead：h5新增标签，表示表格头部
• tbody：h5新增标签，表示表格内容
• tfoot：h5新增标签，表示表格尾部

单元格合并

• rowspan：跨行合并
• colspan：跨列合并

单元格样式调整

• border：边框设置
• border-spacing：单元格和单元格之间的距离
• border-collapse: collapse;：边框合成一条