Graphic tutorial on how to control the inner and outer borders, color and size of Table with html5+CSS

By default, our CSS clears the border of the Table. Let’s share with you the styles of CSS to control the inner and outer borders, colors, and sizes of the Table. Friends who want to learn can refer to it

In fact, according to common sense, the current website should have abandoned some forms long ago. Now p+CSS must be in power! However, the client's website was always dissatisfied with the border effects when adding content: either there were none or they were very thick. It was obvious that this client was a perfectionist.

By default, our CSS clears the border of the Table. There is no border. The effect you see is this.

Borderless Table

In order to add a border to the table, I wrote this sentence in CSS:

.table{border:solid 1px #add9c0;}

Hey, It seems that I am too naive. The effect I see in the browser is this:

Table with only outer border

Okay , I admit that I have not touched Table for some years, but this is not my responsibility at all, because Table has actually been abandoned by popular designers. So I deleted the CSS style sentence and re-wrote it like this:

.td{border:solid 1px #add9c0;}

But the problem still happened. How can someone with such a thin request like the customer tolerate the thick inner border of the Table?

Table with very thick inner border

There is no other way but to use a trick. Delete the CSS code you just wrote and write directly:

.td{border:solid #add9c0; border-width:0px 1px 1px 0px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

Okay, now you dare to be arrogant? Isn’t this just a matter of submitting obediently?

Table with a very thin border

It is not a sin to be intimate, but if the text content and the table border are so close that there is no gap, it will affect the appearance, so Slightly modify the two lines of code just now:

.td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding-left:10px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

If you need both parties to be so intimate, just write like this:

.td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding:10px 0px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

Okay, now let’s take a look at the final effect. , at this time the customer is already very happy, this is the effect he wants!

Table with ideal effect

If you use this method in other places, you must pay attention to the standardized writing of CSS code:

Recommended writing method: border-width:0px 1px 1px 0px;

Not recommended: border-width:0 1 1 0;

Finally, I would like to remind everyone, try not to use Table if you can. Use Talbe. After all, it’s not such an advanced technology. You should try to work on p+CSS!

The above is the detailed content of Graphic tutorial on how to control the inner and outer borders, color and size of Table with html5+CSS. For more information, please follow other related articles on the PHP Chinese website!