CSS Basic style ———— table

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> Sex </th>    </tr>    < Tr>        <td> Xiao Wang </td>         <td>20</td>        <td> male &LT;/TD >    </tr>    <tr>         <td> Xiao Wang </td>        <td>20</td>         <td> Men </td>    </tr>     <tr>        <td> Xiao Wang </td>         <td>20</td>        <td> male </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;}

CSS Basic style ———— table