HTML基础-表格、列表、表单

HTML进阶

哔哩哔哩视频链接：https://www.bilibili.com/video/BV14J4114768?p=30&share_source=copy_web

1.表格标签

1.1表格的基本使用

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

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 head）的缩写。

<table>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>电话</th>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
        ...
    </tr>
</table>

pink老师总结：表头单元格也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。

1.4表格属性

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对其方式
border	1 或者“”	规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认像素为1
cellspacing	像素值	规定单元格之间的空白，默认像素为2
width	像素值或百分比	规定表格的宽度

案例

案例分析：

1. 第一行里面是th表头单元格；
2. 第二行开始里面是td普通单元格；
3. 单元格里面可以放任何元素，文字链接图片等都可以；
4. 用到宽度和高度边框cellpadding和cellspacing；
5. 表格浏览器中对其align；

1.5表格结构标签

• 使用场景:因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分.在表格标签中，分别用：**<thead>**标签 表格的头部区域、 **<tbody>**标签 表格的主体区域. 这样可以更好的分清表格结构。
• 内容
  1. <thead></thead>：用于定义表格的头部，<thead>内部必须拥有<tr>标签，一般是位于第一行。
  2. <tbody></tbody>：用于定义表格的主体，主要用于放数据本体。
  3. 以上标签都是放在<table></table>标签中。

1.6合并单元格

特殊情况下，可以把多个单元格合并为一个单元格，这里同学们会最简单的合并单元格即可。

1. 合并单元格
2. 目标单元格
3. 合并单元格的步骤