深入理解CSS中的table标签(第一部分)

什么是table标签，以及table标签的组成？

不叨叨，直接上代码

    <table>
        <tr>
            <td></td>
        </tr>
    </table>

我们可以看到table标签的组成是由table tr td 构成的.
其中table指的是整个表格,tr指的是行,td指的是列.

那我们如果要表示三行四列要如何表示呢?

三行肯定要三个tr,四列肯定要四个td,那它们如何嵌套的呢?看代码!

    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

我们可以看到tr里面要嵌套td,表示的意义也就是第一行中有四个列,第二行中有四个列…所以最终就是四行四列.
我们现在看一下在浏览器上的效果?

我们发现这里面毛都没有,这是因为我们没有给table设置属性.

那我们可以给table设置哪些属性呢?

(1).设置height width属性:
<1>给table设置:

   <style>
        table{
            width: 200px;
            height: 150px;
            border: 1px solid black;
        }
    </style>

可以看到给table设置宽高是指整个表格的宽高!
<2>给tr设置

   <style>
        table{
            width: 200px;
            height: 150px;
            border: 1px solid black;
        }
        tr{
            width:50px;
            height: 50px;
            border: 1px solid red;
        }
    </style>

我们可以看到给tr设置宽高毛效果都没有.
<3>给td设置

 <style>
        table{
            width: 200px;
            height: 150px;
            border: 1px solid black;
        }
        td{
            width:50px;
            height: 50px;
            border: 1px solid red;
        }
    </style>

给td设置就有效果了,可以看到有三行四列,但每个单元格的宽高是50吗?答案显然不是,我们可以看到每个单元格之间都有一定的边距.!
那我们把table的宽高去掉,只留下border看一下效果:

      table{
            border: 1px solid black;
        }
        td{
            width:50px;
            height: 50px;
            border: 1px solid red;
        }

现在每个单元格的宽高就是50了.

注意:table标签和td标签都需要设置border,不然默认情况下不会显示!

2.水平居中属性

<1>table标签(方便查看,我给每个单元格加上了序列)

      table{
            border: 1px solid black;
            margin: 0 auto;
        }
        td{
            width:50px;
            height: 50px;
            border: 1px solid red;
        }

使用margin : 0 auto;

<2>td: text - align : center;(让文本居中)

        table{
            border: 1px solid black;
            margin: 0 auto;
        }
        td{
            width:50px;
            height: 50px;
            border: 1px solid red;
            text-align: center;
        }

<3>tr使用text - a text - align : cente;也可以让文本居中,我们使用td就可以了,我这里就不演示了!

3.垂直居中:这里主要看一下td的,tr同样也可以!

因为已经垂直居中了,为了看到效果,我先改一下!

现在是顶部对齐!

现在我再改一下:


现在就已经是水平和垂直都居中了!

4.

    table{
            border: 1px solid black;
            margin: 0 auto;
            border-collapse:collapse;
        }
        td{
            width:50px;
            height: 50px;
            border: 1px solid red;
            text-align: center;
            /* vertical-align: top; */
            vertical-align: center;
        }

<2>如果我们不想要将内外边框合并,那就要用到这一个属性:

      table{
            border: 1px solid black;
            margin: 0 auto;
        }
        td{
            width:50px;
            height: 50px;
            border: 1px solid red;
            text-align: center;
            /* vertical-align: top; */
            vertical-align: center;
        }

所以这个值的默认值就是 border-spacing: 2px;那我们现在修改一下:

     table{
            border: 1px solid black;
            margin: 0 auto;
            border-spacing: 10px;
        }
        td{
            width:50px;
            height: 50px;
            border: 1px solid red;
            text-align: center;
            /* vertical-align: top; */
            vertical-align: center;
        }

我们可以看到箭头处的间隙明显大了!

5.padding属性:

<1>table:

       table{
            border: 1px solid black;
            margin: 0 auto;
            padding: 10px;
        }
        td{
            width:50px;
            height: 50px;
            border: 1px solid red;
            /* text-align: center; */
            /* vertical-align: top; */
            /* vertical-align: center; */
            /* padding: 10px; */
        }

我们可以看到给table加padding属性,与border-spacing: 10px;还有些不一样,这个只是改变四周的距离,不是改变每个单元格之间的距离!

<2>td

未加padding属性：

     table{
            border: 1px solid black;
            margin: 0 auto;
            /* padding: 10px; */
        }
        td{
            width:50px;
            height: 50px;
            border: 1px solid red;
            /* text-align: center; */
            /* vertical-align: top; */
            /* vertical-align: center; */
            /* padding: 10px; */
        }

可以看到文本距离边框的间距很小！

加上padding之后：

      table{
            border: 1px solid black;
            margin: 0 auto;
            /* padding: 10px; */
        }
        td{
            width:50px;
            height: 50px;
            border: 1px solid red;
            /* text-align: center; */
            /* vertical-align: top; */
            /* vertical-align: center; */
            padding: 10px;
        }

我们可以看到间距大了很多！