这是我参与「第四届青训营 」笔记创作活动的的第3天

表格标签

1、表格标签的主要作用

• 页面布局
• 展示数据

2、基本语法

<table>
<!-- table标签用于定义表格 -->
    <tr>
    <!-- tr标签用于定义表格的行 -->
        <td>单元格内容<td>
        <!-- td标签用于定义表格中的单元格内容 -->
        ···
    </tr>
    ···
</table>

3、表头单元格标签

表头单元格也是单元格，常用于表格的第一行，突出重要性，表头单元格里的文本内容会加粗居中显示

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
        ···
    </tr>
</table>

• th标签（table head 的缩写）用于表示表格的表头部分

4、表格属性

（表格标签的这些属性我们在实际开发中并不常用，一般在CSS中来设置）

了解目的：

1. 先做了解，记住属性名，后面CSS使用；
2. 先来直观地感受一下表格的外观形态。

五大属性如下图：

我们现学现卖，尝试复刻这个表，在笔记中试着去用代码画出这个表,代码如下：

<table border=1 cellspacing=0>
    <tr>
        <th>属性名</th>
        <th>属性值</th>
        <th>描述</th>
    </tr>
    <tr>
        <td>align</td>
        <td>left、center、right</td>
        <td>规定表格相对周围元素的对齐方式</td>
    </tr>
    <tr>
        <td>border</td>
        <td>1或""</td>
        <td>规定表格单元是否有边框，默认为“”，表示无边框</td>
    </tr>
    <tr>
        <td>cellpadding</td>
        <td>像素值</td>
        <td>规定单元边沿与其单元格内容之间的空白，默认1像素</td>
    </tr>
    <tr>
        <td>cellspacing</td>
        <td>像素值</td>
        <td>规定单元格之间的距离，默认2像素</td>
    </tr>
    <tr>
        <td>width</td>
        <td>像素值或百分比</td>
        <td>规定表格宽度</td>
    </tr>
</table>

效果如下：

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

5、总结

对于一个具体的表格，一般分为两步

1. 先制作表格的主体结构，th标签来绘制表格第一行的表头单元格，td标签来绘制剩余行的单元格； （单元格中可以放任意元素，包括文本、图片，链接、音视频等）

2. 再对表格的属性进行定义，如border、cellpadding和cellspacing等，还有align等。