Now let's take a look at how to use css syntax to beautify the table. Note: Unless otherwise stated, the cellspacing, cellpadding, and border values of the tables inserted in each example in this document are 0. Example 1: The 1px table shows how to use css syntax to beautify the table. Note: Unless otherwise stated, the cellspacing, cellpadding, and border values of the tables inserted in each example in this document are 0. Example 1: 1px table
Now let's take a look at how to use css syntax to beautify the table. Note: Unless otherwise stated, the cellspacing, cellpadding, and border values of the tables inserted in each example in this document are 0. Example 1: 1px table
Many people are keen on creating 1px tables, so they have invented a variety of methods that can be made flexibly with css. If you want to create a 1px table of 1x1, you just need to define the border value. We first insert a 1x1 table with a width of 50 using Dreamweaver, and then define
Border: 1 solid teal, The effect of the table is as follows:
However, creating a non-1x1 table (such as 2x2) is a little tricky, because if you directly define the td style border: 1 solid teal, the effect is as follows:
You will find that the outer box of the table is 1px, and the inside is 2px, which is due to the superposition. To solve this problem, we can do this:
First, define the style for td:
Border: # cc0000 solid; border-width: 0 1 1 0In this way, the table is displayed
Then define the style for the table ::
Border: # cc0000 solid; border-width: 1 0 0 1In this way, you can create a complete 1px table.
Example 2: 1px table with a thick border
The inner line of this table is 1 px, and the outer border is 3 px. It is not difficult to do it based on Example 1. You just need to modify the border-width value.
The code for the style used for the table is:
Border: blue solid; border-width: 3 2 2 3, The code for the style used by td is:
Border: blue solid; border-width: 0 1 1 0Example 3: dotted box table
Similar to Example 1, border-style is changed from solid to dashed. The code for the style used for the table is:
Border: black dashed; border-width: 1 0 0 1, The code for the style used by td is:
Border: black dashed; border-width: 0 1 1 0Example 4: dotted line border table
Note that the minimum pixel of dotted is 2. The code for the table style is as follows:
Border: green dotted; border-width: 2 0 0 2, The code for the style used by td is:
Border: green dotted; border-width: 0 2 2 0Example 5: Dual-line border table
Note that the minimum pixel of the double line (double) is 3. The code for the style used for the table is:
Border: teal 4 dou, The code for the style used by td is:
Border: teal 1 solidExample 6: outset outer box table
The code for the style used for the table is:
Border: 3 outset, The code for the style used by td is:
Border: 1 solidExample 7: inset outer box table
The code for the style used for the table is:
Border: 3 inset, The code for the style used by td is:
Border: 1 solidExample 8: ridge outer frame table
The code for the style used for the table is:
Border: # ee0000 3 ridgeThe code for the style used by td is:
Border: 1 solid
# P # Example 9: Integrated use 1
The outer frame of this table uses a spine, and the inner cell border is a trough. Note that cellspacing is set to 1 when the table is inserted. The code for the style used for the table is:
Border: skyblue 4 ridgeThe code for the style used by td is:
Border: navy 1 grooveExample 10: Comprehensive use II
Don't think this is nine tables. They are actually nine cells in a table. You can't see it because the outer border of the table is 0. You only need to use the style for td:
Border: maroon 3 doubleAlso, do not forget to set the cellspacing of the table to 1. Example 11: Comprehensive use III
The top, bottom, and left borders of this table use different styles. You can change them as you like. The code for the style used for the table is:
Border: purple 4; border-style: dashed doubleThe code for the style used by td is:
Border: 1 solidExample 12: Comprehensive use 4
This is a 1px table with a double-line border. It looks delicate compared with example 5. The specific method is as follows:
1. Create a 1px table of 1x1 and set cellspacing to 1;
2. Create a 3x3 1px table and set the width and height to 100%;
3. Insert the following table into the previous table. Example 13: background frame 1
By changing the cellspacing value, you can make the background into a border. The above table is created as follows:
1. Create a 1x1 table, set the background, and set the cellspace value to 3;
2. Create a 3x3 1px table with width and height set to 100%;
3. Insert the following table into the previous table. If you use a GIF animation that will change color, the border of the table automatically changes the color continuously. Example 14: Background border 2
The method for creating this table is similar to the previous one. You can certainly study it! Example 15: 3D border table
This is a table with a 3D border effect. It is a little tricky to do it. Let's learn how to make it 1x1 first.
Step 1: create two styles as follows:
.out { border-width:1px;border-style:solid;border-color:#dddddd #777777 #777777 #dddddd }.in { border-width:1px;border-style:solid;border-color:#777777 #dddddd #dddddd #777777;background:#ffcccc }
Step 2: Create a 1x1 table with the height and width of 100 and set cellspacing to 1, as shown below:
Step 3: Use the out style for the entire table (that is, the table label), while the cell (that is, the td label) adopts the in style. Save the disk and check the effect. Is it the same as the following?
After learning how to create a table with a 3D border of 1x1, it is not difficult to make the results of this example. You may wish to explore it yourself.
# P #
The previous examples show how to beautify the border of a table with css. You can try different combinations to make a more beautiful table! To facilitate your learning, we provide you with all the code for various results tables. You can copy the code to the WordPad to generate a txt file and change its extension to htm, in this way, you can use Ie to open it directly. The Code is as follows:
Beautify the table border with css
The above is the HTML table markup tutorial (48): CSS to modify the content of the _ HTML/Xhtml _ webpage. For more information, see the PHP Chinese website (www.php1.cn )!
