定义表格标签（table）

最新推荐文章于 2024-06-19 10:23:02 发布

原创最新推荐文章于 2024-06-19 10:23:02 发布

· 880 阅读

14 ·

版权

文章标签：

#html #前端 #css

h5 同时被 3 个专栏收录

6 篇文章

订阅专栏

css3

6 篇文章

订阅专栏

定义表格

1 篇文章

订阅专栏

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

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

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

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>