03 表格

Posted 2020-12-15 wzos

1. 表格 table

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

• table：表格标签
• tr：表格中的行，必须嵌套在 <table> 标签中
• td：表格中的单元格，必须嵌套在 <tr> 标签中，用来存储数据

---

2. 表格属性

属性名	含义	值
border	表格的边框	px（默认0）
cellspacing	单元格与单元格之间的距离	px（默认2）
cellpadding	单元格内容与单元格边框的距离	px（默认1）
width	表格的宽度	px
height	表格的高度	px
align	表格在网页中的水平对齐方式	left、center、right

无边框：三参为0，border 、cellpadding 、cellspacing 为 0

---

3. 表头单元格 th

一般表头单元格位于表格的第一行或第一列，并且文本加粗居中

语法：用表头标签<th> </th>替代相应的单元格标签<td> </td>

---

4. 表格标题 caption

定义表格标题，标题会被居中且显示于表格之上

语法：写在 <table> 之下 <tr> 之上

<table>
   <caption>我是表格标题</caption>
   <tr></tr>
</table>

---

5. 合并单元格

1. 确定合并方式	2. 找到的目标单元格	3. 合并语法
跨列	左边第一个	<td rowspan="合并的数量" >
跨行	上方第一个	<td colspan="合并的数量" >

注意：最后删除多余的单元格

---

6. 表格划分结构

可以更好的分清表格结构，以下标签都是放到 table 标签中包裹着 tr td

表格头部：<thead> </thead>（内部必须有 <tr> 标签）

表格主体：<tbody> </tbody>

表格脚注：<tfoot> </tfoot>

---