Implementation of the HTML Thin Line table

In web authoring, we often use tables to make the information we need to express clearer and clearer.

<TableBorder= "1"cellspacing= "0"bordercolor= "#000000"width= "80%">    <TR>        <th>Name</th>        <th>Age</th>    </TR>    <TR>        <TD>111</TD>        <TD>22</TD>    </TR> 　　  <TR>        <TD>222</TD>        <TD>21st</TD>    </TR></Table>

This code defines a table with border = 1pix, but actually the actual border width of the table is 2pix, because the table border consists of two parts: the outer box of the table and the border of the cell.
So how do you define a thin-line table (the actual siding is 1pix)?

1. Using cellspacing and background color technology:

<Tableborder= "0"cellspacing= "1" bgcolor= "#000000"width = "80%"> 　　  <tr bgcolor= "#ffffff">        <th>Name</th>        <th>Age</th>    </TR>    <tr bgcolor= "#ffffff" >        <TD>111</TD>        <TD>22</TD>    </TR> 　　  <tr bgcolor= "#ffffff" >        <TD>222</TD>        <TD>21st</TD>    </TR></Table>

2. Use the Border-collapse property:

<Tableborder= "1" cellspacing= "0" bordercolor= "#000000" width = "80%" Style= "border-collapse:collapse;">   　　  <TR>        <th>Name</th>        <th>Age</th>    </TR>    <TR>        <TD>111</TD>        <TD>22</TD>    </TR> 　　  <TR>        <TD>222</TD>        <TD>21st</TD>    </TR></Table>

Reminder: For thin-line tables made from Method 1, there may be problems with the table border not being printed when printing. and Method 2 does not have this problem, recommended to use.

Implementation of the HTML Thin Line table