Create a line table in html and a line table

Create a line table in html and a line table

Baidu may have the answer to the question about how to create this thin-line table: set the border = "0" cellspacing = "1" bgcolor = "#990033" values for the table, and set the background color for the cells separately, for example, bgcolor = "# fff ". However, there is no detailed explanation on why we need to set these values!

Today, I suddenly want to record the principle of this thin-line table. It is also because the basic courses have been provided to students over the past few days. The students are not very familiar with the principle of this thin-line table. If you want to learn this for a beginner, it is estimated that similar problems will occur, so here we will explain why to set these values.

First, let's take a look at the effect when setting the border Value of the table to 1, even if border = "1", the distance between cells is cellspacing = "0 ", the table thickness looks rough:

Let's take a look at the effect produced by creating a thin-line table:

In contrast, the following table is more refined.

Now I will summarize the steps for creating a line table:

Steps for creating a line table:

Analysis: the background color of the table is actually the line that the table looks like visually. Because we set border to 0 and the spacing between cells is set to 1, the background color of the table is the color that is transparent through the gap of the pixel. The background color is set for the cell to distinguish it from the background color of the table. For better understanding, I will analyze the image here:

1. Assume that the following table border = "1" is displayed as follows:

2. When the cell spacing is set to cellspacing = "0", the borders of two 1-pixel edges will look very thick:

Therefore, you cannot use border = "1" to set the line effect.

Then we will use the fine line method to create the principle as follows:

If this article is helpful to you, remember to recommend it.