定义表格标签（table）

前言：定义表格标签是一个标签，是以html的形式写出来的，不需要设置样式也可以写出表格的样式，如果想要更好的样式，也可以用css来设置。

目录

一、定义表格标签的基本属性及属性值

1.tr 代表行

2.th 代表单元格表头

3.td 设置单元格

4.border  设置表格的边框

5.caption 设置标题

6.cellspacing 设置边框合并

7.border-spacing  设置单元格合并

8.border-collapse  设置单元格合并

9.colspan  合并横向单元格

10.rowspan  合并纵向单元格

二、单元格里的内容居中

1. text-align 水平方向

2.vertical-align 垂直方向

3.cellpadding 设置内容区与边框的距离

三、表格的结构优化

---

一、定义表格标签的基本属性及属性值

1.tr 代表行

意思是有多少行就设置几个tr就可以了

2.th 代表单元格表头

意思是设置第一行的内容，相当于是小标题

3.td 设置单元格

意思是设置表格的基本内容

4.border  设置表格的边框

意思是设置表格的边框，也可以用内部样式写，即在表格标签table的开始标签里写，也可以在内联样式或外联样式写

<table border="1" width="200px">
        <tr>
            <th>姓名</th>
            <th>薪资</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>8K</td>
        </tr>
    </table>

如图所示：这里设置边框用的是内联样式写的，写出来的效果是这样的一个效果

5.caption 设置标题

意思是设置表格的标题，不会被边框所包裹

6.cellspacing 设置边框合并

意思是设置单元格的边框合并

  <table border="1" width="200px" cellspacing="0">
        <caption>123</caption>
        <tr>
            <th>姓名</th>
            <th>薪资</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>8K</td>
        </tr>
    </table>

 

如图所示：设置了cellspacing=0后，单元格的边框由两个变成了一个，这样能够美化表格的样式

7.border-spacing  设置单元格合并

 意思是设置单元格的边框合并，效果和cellspacing一样

8.border-collapse  设置单元格合并

 意思是设置单元格的边框合并，效果和border-spacing ，cellspacing一样

9.colspan  合并横向单元格

意思是可以把一横多个单元格合并成一个单元格

    <table border="1" width="200px" cellspacing="0">
        <caption>123</caption>
        <tr>
            <td>123</td>
            <td>456</td>
            <td>123</td>
        </tr>
        <tr>
            <td colspan="2">张三</td>
            <td></td>
        </tr>
    </table>

如图所示：设置了colspan=2后，并且设置比上一行少一个td，这样的话本来是两个单元格的就合并成了一格 

10.rowspan  合并纵向单元格

意思是可以把一列多个单元格合并成一个单元格，设置的步鄹和colspan的设置相似

二、单元格里的内容居中

1. text-align 水平方向

意思是设置文本内容在表格中水平方向的居中

2.vertical-align 垂直方向

意思是设置文本内容在表格中垂直方向的居中

设置内容区的样式
 <style>
        table{
            text-align: center;
            vertical-align: middle;
        }
    </style>
内容区
    <table border="1" width="200px" height="200px" cellspacing="0">
        <caption>123</caption>
        <tr>
            <td>123</td>
            <td>456</td>
            <td>123</td>
        </tr>
        <tr>
            <td colspan="2">张三</td>
            <td></td>
        </tr>
    </table>

如图所示：设置了 vertical-alig和 text-align居中后，文本内容在表格中处于居中状态，用于美化表格

3.cellpadding 设置内容区与边框的距离

意思是设置了cellpadding后，文本也可以居中，效果和设置 text-align和vertical-align后的效果一样

三、表格的结构优化

1.thead 代表表格的头部

意思是用来包裹标题部分

2.tbody 代表表格的主体

意思是用来包裹主体部分

3.tfoot 代表表格的底部

意思是用来包裹底部部分

作用在于优化表格的结构，帮助浏览器翻译，从而更好的呈现给客户，起到一个优化作用，三个标签位置写错了也不会改变文本内容的位置