Dreamweaver tutorial: CSS Make a thin box table

Thin-line Box table is our web page production often need to use one of the results, the production of thin-line box form a lot of code compatibility of the highest or cell background filling method, but the general writing generated more garbage code, today we convert the idea of using CSS to achieve this effect. The whole process is done completely under the Dreamweaver visual interface, without the need for everyone to write any code manually, very simple.

Create a new CSS style

To run Dreamweaver, click the menu "window" → "CSS style" to invoke the CSS panel. Click the "New CSS Rule" button in the panel, as shown in Figure 1.

Figure 1

Go to the New CSS Rule dialog box and set the selector type to: Advanced; Type the name of the selector:. BK (the name is arbitrarily determined by everyone, but the style will be called repeatedly, not to be mistaken); the definition is set to only this document, and click OK to complete it, as shown in Figure 2.

Figure 2

The following formally entered the "CSS Rule Definition" dialog box, click to select the category "Background", set "background color" as required, this example value is "#000000", that is, black (using the color selector provided by the software, the specific color code does not require manual input). This is also the table border color that we finally see, click OK to complete the setting, as shown in Figure 3.

Figure 3

Now that the CSS named ". BK" is set up, we'll add a sub selector for it. Continue clicking the "New CSS Rule" button in the CSS panel, the basic settings are shown in Figure 2, but the selector name is defined as ". BK TD" (which means that this is a child style attached to. BK). Still enter the CSS Rule Definition dialog box, continue to set the background color, this example is "#FFFFFF", that is, white, click the "OK" button to complete.

Now you can see two new CSS styles in the CSS panel, so you can call them any time, as shown in Figure 4.

Figure 4