Css syntax for adjusting table borders using Dreamweaver

Fire Station Building Institute (Bkjia.com) Create a web pageAccording to the statistics of the fire station building school, more than 60% of the large webmasters in China are still using Dreamweaver and FrontPage for Web pages. Among these webmasters, the number of webmasters who know CSS is less than 50%, so they cannot be separated from DW and FT. Most of the webmasters are "half-bottle vinegar". Apart from the style of each major website, then, we use DW or FT to create a webpage. Because the webpage is in the form of a table, we can't talk about the W3C quality of the webpage, as long as it looks beautiful. The following describes how to adjust the CSS of the table.

In general, the table CSS syntax includes --Border width, border color, border style, border, width, height, related labelsAnd so on.

　　Border width border-width: <value> 

Allowed value: [thin (thin line) | medium (middle and coarse line) | thick (thick line) | <length>}

Initial Value: medium

Applicable to: all objects

Backward compatible: No

Syntax: Upper border-top-width: <value>(Example: border-top-width: thick)

Right border-right-width: <value>(Example: border-right-width: medium)

Bottom border-bottom-width: <value>(Example: border-bottom-width: thin)

Left border-left-width: <value>(Example: border-left-width: 12px)

The Border Width attribute sets the Border width of an element. If the four values are given, they are applied to the pattern of the top, right, bottom, and left border respectively. If a value is given, it is applied to each edge. If two or three values are given, the omitted value is equal to the logarithm.

Border color border-color: <value>

　　Allowed value: the <color> {} border color can be the default HTML color, such as RED, BLUE, and GREEN. It can also be a hexadecimal color code, such as #006699 # F8E5DA. It can also be an RGB value, for example, RGB (142,230,169 ).

Initial Value: Color Attribute Value

Applicable to: all objects

Backward compatible: No

The border color attribute sets the border color of an element. If the four values are given, they are applied to the pattern of the top, right, bottom, and left border respectively. If a value is given, it is applied to each edge. If two or three values are given, the omitted value is equal to the logarithm.

　　Border style border-style: <value>

Acceptable value: [none (borderless line) | dotted (dotted line composed of points) | dashed (dotted line composed of short lines) | solid (solid line) | double (double line. The width of the double-line width plus the white space between them is equal to the width defined by border-width) | groove (3D groove border) | ridge (3D ridge border) | inset (3D embedded border, darker color) | outset (3D embedded border, lighter color}

Initial Value: none

Applicable to: all objects

Backward compatible: No

The border style attribute is used to set the style of an element border. This attribute must be used to specify the visible border. If the four values are given, they are applied to the pattern of the top, right, bottom, and left border respectively. If a value is given, it is applied to each edge. If two or three values are given, the omitted value is equal to the logarithm. You can also use the slightly written border attribute. Note: if the system does not support the attribute values of these borders, "dotted", "dashed", "double", "groove", "ridge", "inset", and "outset" will be replaced by "solid.

　　Border: <value>

　　Allowed value: <Border Width >||< border style >||< color>

Initial Value: Undefined

Applicable to: all objects

Backward compatible: No

Syntax: upper border-top: <value> right border-right: <value> lower border-bottom: <value> left border-left: <value>

You can set only four border types. You can only specify the width and style of a border group. To give different values of the four borders of an element, the Web Builder must use one or more attributes, such: top border, right border, bottom border, left border, border color, Border width, border style, top Border width, Right Border width, Bottom Border width or Left Border width.

Reference content is as follows: Border: # cccccc thin solid H2 {border: groove 3em} A: link {border: solid blue} A: visited {border: thin dotted #800080} A: active {border: thick double red} Width: <value> height: <value>

　　Allowed value: <length >|< percentage> | auto

Initial Value: auto

Applicable to: block-level and replacement Elements

Backward compatible: No

The initial value of the width attribute is "auto", that is, the original width of the element (that is, the width of the element itself ). For the percentage, see the width of the upper-level element. Negative Length values are not allowed.

　　Related labels

　　Table: table label. The definition of the entire table style should be placed in the table;

Td: the cell label. The definition of the cell style should be placed in td.

Reference content is as follows: <Table width = "600" border = "0" align = "center" cellpadding = "0" cellspacing = "0" bgcolor = "# f5f5f5" style = "border-top: # cccccc 1px dashed; border-bottom: # cccccc 2px dashed "> <Tr> <! --Bkjia.com --> <Td width = "20%" style = "border-right: #404040 1px solid"> & nbsp; </td> <td width = "20%" style = "border-right: #404040 1px solid"> & nbsp; </td> <Td width = "20%" style = "border-right: #404040 1px solid"> & nbsp; </td> <Td width = "20%" style = "border-right: #404040 1px solid"> & nbsp; </td> <Td> & nbsp; </td> </tr> </table>

Reference content is as follows: <Table width = "600" border = "0" align = "center" cellpadding = "0" cellspacing = "0" style = "border-style: solid; border-width: thin thick; border-color: # cccccc #404040 #404040 "> <Tr> <Td> www.bkjia.com </td> </Tr> </Table>

Use border lines of different widths and colors in a border. Of course, this effect can be achieved using the method in the above example, but there is too much code, and another merge method can be used to classify the attribute values of the four sides. The border line type, width, and color can be defined together. Note the following points:

1. The positions of the four border lines are as follows: the upper frame line, the right frame line, the lower frame line, and the left frame line;

2. In this example, the border line type is only one solid line type. In fact, the four sides can also define different types;

3. the attribute value can be one, two, three, or four. If only one attribute value is defined, the other three automatically take the same value, such as border-style: solid and border-style: solid; if only two or three values are given, the attribute value of the missing edge is the same as the value of the opposite edge. For example, boder-width: thin thick has the same effect as border-width: thin thick, while border-width: 1px 2px 3px has the same effect as border-width: 1px 2px 3px 2px.

Also, try not to add the style to the <TR> label, and the effect may not be displayed. The attribute definitions are separated by semicolons (;). All the preceding operations directly add styles to tags. If a CSS Style table is compiled to define common border lines at a time, you can call them at a time, very convenient and efficient. Of course it's great to make HTC. It is very convenient to define CSS in dreamweaver (right-click menu --> CSS style) without coding.