The finished effect is as follows:
2. Use the dark border (bordercolordark) and light border (bordercolorlight) attributes of the table to make a thin line table:
Or press Ctrl+Alt+T to insert the table, and set it as shown in the dialog box (items with red boxes are fixed, otherwise they will have no effect)
After selecting the table, press F9 to expand the "Tag Inspector" panel group and set the settings in the "Attributes" panel as shown below:
After completion, it looks like this:
3. Set the CSS attribute border-collapse of the table to collapse: Press Ctrl+Alt+T to insert the table. The setting of the dialog box is the same as method 2. Select the table and set the border color of the table in the properties panel:
Press F9 to expand the "Tag Inspector" panel, and fill in "border-collapse:collapse;" in "style" in the "Attributes" panel.
After completion, it looks like this:
Note: The thin line table made by method 3 is only suitable for IE5+. The most compatible method is method 1. Method 2 is not a thin line table in the strict sense.
Tip: In Method 1, you can use CSS to define the background color of table cells to reduce the amount of code:
<style>
.thin{background:#000000}
.thin td{background:#FFFFFF}
</style>
<table width="200" border="0" cellspacing="1" cellpadding="0" class="thin">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>