A simple example of creating a thin line table in html

Regarding how to create this thin-line table, a search on Baidu may yield an answer telling you to set these values: set border="0" cellspacing="1" bgcolor="#990033" for the table, and also set the background color for the cells individually, for example: bgcolor="#fff". But there is probably no detailed explanation as to why these values ​​should be set!

Today I suddenly thought of recording the principle of this thin line table. This is also because I have been teaching basic courses to students these days. Students don’t quite understand the principle of this thin line table. So beginners will probably encounter similar problems. So here I will explain why these values ​​are set.

First, let's look at the effect of setting the border value of the table to 1. Even if border="1" and cellspacing="0", the thickness of the table still looks rough:

Let's take a look at what effect is produced by making a thin line table method:

In comparison, the following table is more refined.

Now let me summarize the steps of making a thin line table:

Steps to create a thin line table:

1. Set the background color of the table (that is, the visual color of the table border);
2. Set the background color of td (cell) (the overall color of the entire table visually)
3. Set the border value of the table to 0 (border="0") and the spacing value to 1 (cellspacing="1", so that the background color of the table shows through this spacing and becomes a visual border).

Analysis: The background color of the table is actually the thin line that the table looks like visually. Because we set the border to 0 and the cellspacing between cells to 1, the background color of the table is the color that appears through the gap of this pixel. Setting the background color for the cell is to distinguish it from the background color of the table. For a better understanding, let me analyze it with pictures:

1. Assume that the following table border="1", it will be displayed as follows:

2. When cellspacing="0" is set, two 1-pixel borders next to each other will make the border appear very thick:

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

Then we use the thin wire method to make the principle as follows:

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

Original URL: http://www.cnblogs.com/xcaocao/p/5643351.html