表格标签（自用）

目录

一、表格

二、创建表格

三、表格属性（不常用，一般通过css来设置）

四、合并单元格

五、总结表格

---

一、表格

现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。

二、创建表格

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

table、tr、td，他们是创建表格的基本标签，缺一不可

• table用于定义一个表格标签
• tr标签用于定义表格中的行，必须嵌套在table标签中
• td用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
• 字母td指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方是用来存储数据的。td像一个容器，可以容纳所有元素。

表头单元格标签th：一般表头单元格位于表格的第一行或第一列，并且文本加粗居中，只需要用表头标签<th></th>替代相应的单元格标签<td></td>即可。

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

空单元格：在单元中插入一个&nbsp

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

表格	描述
<table>	定义表格
<caption>	定义表格标题
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<thead>	定义表格的页眉，里面必须拥有<tr>一般位于第一行
<tbody>	定义表格的主体。放数据本体
<tfoot>	定义表格的页脚。

三、表格属性（不常用，一般通过css来设置）

属性名	含义	常用属性值
border	设置表格的边框（默认border=“0无边框”）	像素值
cellspacing	设置单元格与单元格之间的空白边框	像素值（默认为2像素）
cellpadding	设置单元格边框和单元格内容之间的空白边框	像素值（默认为1像素）
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网页中的水平对齐方式	left，center，right

其中，三参为0，平时开发的我们这三个参数  border，cellpadding，cellspacing为0 

<table width="500px" height="300px" border="1" cellpadding="5" cellspacing="20">
    
    <tr>
        <th>这是一个宽500px 高300px 边框为1像素<th>
    </tr>

    <tr>
        <td>单元格与单元格之间的距离为20px  单元格与内容之间的距离为5px的表格</td>
    </tr>

四、合并单元格

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

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

书写规则：合并顺序我们按照先上 后下 先左 后右 的顺序，合并完之后需要删除多余的单元格

例：做一个这样的表格：

1		2
3	4	5
6	7

<table>
    
    <tr>
        <td colspan="2">1</td>
        <td>2</td>
    </tr>

    <tr>
        <td>3</td>
        <td>4</td>
        <td rowspan="2">5</td>
    </tr>

    <tr>
        <td>6</td>
        <td>7</td>
    </tr>

</table>

五、总结表格

标签名	定义	说明
<table></table>	表格标签	可以把它看成一个盒子
<tr></tr>	表格行标签	行标签要在table标签内部才有意义
<td></td>	单元格标签	单元格标签是一个容器及元素，可以放任何东西
<th></th>	表头单元格标签	它还是一个单元格标签，但是里面的文字会居中且加粗
<caption></caption>	表格标题标签	表格的标题，跟着表格一起走，和表格居中对齐
clospan	跨列合并	用来合并单元格的
rowspan	跨行合并	用来合并单元格的