Detailed introduction to CSS basic style tables

This article is mainly a detailed introduction to Css basic style tables. It has certain reference value. Interested friends can refer to it

a.Css table attributes can help us greatly improve tables. The appearance

b.Table border

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
</table>

This can generate a table without border effect

You can add a border to the table at this time

<table border = "1">

But this writing method cannot be applied to all tables

So you can choose to use Css style as a better way

<table id="tb">
#tb{
    border: 1px solid blue;
}

At this time, you can see the final form of the table The outer blue outer border

can set the inside of the table:

#tb,tr,th,td{
    border: 1px solid blue;
}

A grouping selector is used here. That is, an id selector and three element selectors are combined, separated by commas

c. Collapse border

In the above table, double borders are displayed

This is obviously unreasonable

You can combine the double borders into one line

#tb,tr,th,td{
    border: 1px solid blue;
    border-collapse: collapse;
}

d. Table width and height

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
}

e.Table text alignment

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
    text-align:center;
}

f.Table margin

g.Table color

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
    text-align:center;
    background-color: aqua;
}

The above is the detailed content of Detailed introduction to CSS basic style tables. For more information, please follow other related articles on the PHP Chinese website!