A detailed introduction to CSS basic style tables

This article is mainly for everyone CSS basic style table detailed introduction, with a certain reference value, interested in small partners can refer to

A.css Table properties can help us to greatly improve the appearance of the table

B. Table border

<table>    <tr>        <th> name </th>        <th> age </th>        <th> gender </th >    </tr>    <tr>        <td> Xiao Wang </td>        <td>20</td>        <td> Male </td>    </tr>    <tr>        <td> Xiao Wang </td>        <td>20</td>        <td> men </td>    </tr>    <tr>        <td> Xiao Wang </td>        <td>20</td >        <td> men </td>    </tr></table>

This creates a table with no border effect.

You can now add a border to the table

<table border = "1" >

But this notation does not apply to all of the table

So you can choose to use CSS styles as a better way to

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

You can see the outermost blue outer border of the table.

You can set the inside of the table:

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

The group selector is used here. That is, an ID selector and a 3 element selector are grouped together, separated by commas

C. Folding borders

In the table above, a bilateral box is displayed

This is obviously unreasonable.

You can synthesize a line between the two sides.

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

D. Table width 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 padding

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;}