表格

表格标签

1. table用于定义一个表格标签。

2. tr标签 用于定义表格中的行，必须嵌套在 table标签中。

3. td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

4. 字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。

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

表格属性

tt.png

<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="10">
  <tr>
    <td>单元格内的文字</td>
    ···
  </tr>
  ···
</table>

07table表格属性.jpg

表头单元格标签th

一般表头单元格位于表格的第一行或第一列，并且文本加粗居中
th 也是一个单元格 只不过和普通的 td单元格不一样，它会让自己里面的文字居中且加粗

<table border="1" align="center" width="300" height="100" cellpadding="20" cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>24</td>
            <td>男</td>
        </tr>
        <tr>
            <td>里斯</td>
            <td>24</td>
            <td>男</td>
        </tr>
    </table>

01-表头.PNG

表格标题caption

1. caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
2. caption 标签必须紧随 table 标签之后。
3. 这个标签只存在 表格里面才有意义。

<table>
   <caption>表格标题</caption>
</table>

合并单元格

• 跨行合并：rowspan="合并单元格的个数"
• 跨列合并：colspan="合并单元格的个数"
  合并的顺序我们按照先上后下，先左后右的顺序
  步骤：

1. 先确定是跨行还是跨列合并
2. 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 ： <td colspan="3"> </td>
3. 删除多余的单元格 单元格

<td rowspan="2">目标单元格</td>

<td >合并后多余的单元格</td>  （直接删除）

表格总结

总结表.PNG

拓展：表格划分结构

1. <thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签！
2. <tbody></tbody>：用于定义表格的主体。放数据本体 。
3. <tfoot></tfoot>放表格的脚注之类。

4. 以上标签都是放到table标签中。

   
   
   thead.png