HTML学习打卡

表格标签

1.1表格的主要作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能把繁杂的数据表现得很有条理。

1.2表格的基本语法

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

1.<table></table>是用于定义表格的标签。

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

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

4.字母td指表格数据（table data），即数据单元格的内容。

1.3表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

<th>标签表示HTML表格的表头部分
 

<table>
  <tr>
    <th>姓名</th>
    ...
  </tr>
  ...
</table>

 1.4表格属性

表格标签这部分属性我们实际开发我们不常用，后面通过css来设置。

目的有两个：

1.记住这些英语单词，后面css会使用。

2.直观感受表格的外观形态。

1.5表格结构标签

使用场景：因为表格可能很长，为更好地表示表格的语义，可以将表格分割成表格头部和表格主体两大部分，在表格标签中，分别用：<thead>标签表格的头部区域、<tbody>标签表格的主体区域。这样可以更好的分清表格结构

 

1.6合并单元格

合并单元格方式 ：

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

合合并单元格​​​​三部曲：

1.先确定是跨行还是跨列合并。

2.找到目标单元格。写上合并方式=合并的单元格数量。比如:<td colspan="2"></td>。

3.删除多余的单元格.

效果图