Create a line table in html and a line table

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.