HTML table markup tutorial (48): CSS modified table

<br />Now let's take a look at how to cleverly use CSS syntax to beautify tables. Note: Unless otherwise stated, the cellspacing, cellpadding, and border values of the tables inserted in the examples in this article are all 0. Example 1: 1px table

Many people are keen on making 1px tables, so they have invented various methods. It is much more flexible to use CSS. If you want to create a 1x1 1px table, just simply define the border value. We first use Dreamweaver to insert a 1x1 table with a width of 50, and then define border:1 solid teal in the table or td of the table. The effect of the table is as follows:

But it is a little more troublesome to make a non-1x1 table (such as 2x2), because if you directly define the td style border:1 solid teal, the display effect will be as follows:

You will find that the outer frame of the table is 1px, while the inner frame becomes 2px. This is due to superposition. To solve this problem we can do this:
First, define the style for td: border:#cc0000 solid;border-width:0 1 1 0 , so the table appears as follows

Then define the style for the table: border:#cc0000 solid;border-width:1 0 0 1 , so that you can make a complete 1px table.
Example 2: 1px table with thick border

The inner grid of this table is 1px and the outer border is 3px. With the foundation of Example 1, it is not difficult to make it. You just need to modify the border-width value.
The style code used for table is: border:blue solid;border-width:3 2 2 3 , and the style code used for td is: border:blue solid;border-width:0 1 1 0 Example 3: Dashed box table

The method is similar to example 1, but change border-style from solid to dashed. The style code used for table is: border:black dashed;border-width:1 0 0 1 , and the style code used for td is: border:black dashed;border-width:0 1 1 0 Example 4: Dotted border table

Note that the minimum pixel size for dotted lines is 2. The style code used for table is: border:green dotted; border-width:2 0 0 2 , and the style code used for td is: border:green dotted; border-width:0 2 2 0 Example 5: Double-line border table

Note that the minimum pixel size for a double line is 3. The style code used for table is: border:teal 4 double , and the style code used for td is: border:teal 1 solid Example 6: Outset table

The style code used for table is: border: 3 outset , and the style code used for td is: border: 1 solid Example 7: Inset frame table

The style code used for table is: border: 3 inset , and the style code used for td is: border: 1 solid Example 8: ridge frame table

The style code used for table is: border:#ee0000 3 ridge The style code used for td is: border: 1 solid

Previous Page 1 2 3 Next Page Read More

<<: Detailed explanation of the production principle of jQuery breathing carousel

>>: Detailed explanation of Truncate usage in MYSQL