Shulou(Shulou.com)06/02 Report--

Editor to share with you what the attributes of the table in css3 are, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Css3 table attributes: 1, border-collapse;2, border-spacing;3, caption-side;4, empty-cells;5, table-layout;6, width;7, padding;8, text-align, etc.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

1.CSS form

Using CSS can make HTML tables more beautiful. Specifies the border of the CSS table, using the border property.

The abbreviated border property is set to all the border properties in a declaration.

The properties that can be set are (in order): border-width,border-style,border-color. (that is, the width, style, color of the border)

It doesn't matter if one of the above values is missing, for example, border:#FF0000; is allowed.

1.1 border Properties

Value description border-width specifies the width of the border border-style specifies the style of the border border-color specifies the color of the border

1.2 border-width Properties

Value describes the fine border defined by the thin. Medium defaults. Define a medium border. Thick defines a thick border. Length allows you to customize the width of the border.

1.3 border-style attribut

The value description none definition has no borders. Hidden is the same as "none". Except when applied to tables, where hidden is used to resolve border conflicts. Dotted defines a dotted border. Rendered as solid lines in most browsers. Dashed defines dashed lines. Rendered as solid lines in most browsers. Solid defines a solid line. Double defines double lines. The width of the double line is equal to the value of border-width. Groove defines a 3D groove border. The effect depends on the value of border-color. Ridge defines a 3D ridge border. The effect depends on the value of border-color. Inset defines a 3D inset border. The effect depends on the value of border-color. Outset defines a 3D outset border. The effect depends on the value of border-color.

1.4 border-color attribute

The value indicates that color specifies the background color. Transparent specifies that the color of the border should be transparent. This is the default.

Small example:

CSS simple learning table,th,td {border: 1px solid black } English name and Chinese name HTML Hypertext markup language CSS cascading style sheet

Notice that the table in the above example has double borders. This is because tables and th/ td elements have separate boundaries.

To display a single border of a table, use the border-collapse property. As follows:

1.5 border-collapse attribute

Value indicates that the border will be merged into a single border if collapse is possible. The border-spacing and empty-cells properties separate default values are ignored. The frame will be separated. Will not ignore the border-spacing and empty-cells attributes CSS simple learning table {border-collapse: collapse } table,th,td {border: 1px solid black } English name and Chinese name HTML Hypertext markup language CSS cascading style sheet

1.6 border-spacing attribute

(1) function: this property specifies the distance between cell boundaries in the separated border model. This property is ignored unless border-collapse is set to separate. Although this attribute applies only to tables, it can be inherited by all elements in the table.

(2) possible values:

Value

Description

Length length

Specifies the distance between the borders of adjacent cells. Use px, cm and other units. Negative values are not allowed.

If you define a length parameter, you define horizontal and vertical spacing.

If you define two length parameters, the first sets the horizontal spacing and the second sets the vertical spacing.

1.7 caption-side attribute

(1) function: sets the position of the table title, which specifies the location of the table title relative to the table box. The table title appears as if it were a block-level element before (or after) the table.

(2) possible values:

Value

Description

Top

Default value. Position the table title on top of the table.

Bottom

Position the table title under the table.

(3) browser compatibility: all major browsers except IE support the caption-side attribute. If! DOCTYPE is specified, Internet Explorer 8 (and later) supports the caption-side attribute.

1.8 empty-cells Properties

(1) function: this property defines how table cells that do not contain any content are represented. If displayed, the border and background of the cell are drawn. This property is ignored unless border-collapse is set to separate.

(2) possible values:

Value

Description

Hide

Do not draw borders around empty cells.

Show

Draw a border around an empty cell. Default.

(3) browser compatibility: all browsers except IE support the empty-cells attribute. If! DOCTYPE is specified, Internet Explorer 8 (and later) supports the empty-cells attribute.

1.9 table-layout attribute

(1) function: to display the algorithm rules of table cells, rows, and columns, this attribute specifies the layout algorithm used to complete the table layout.

(2) two algorithms:

Fixed table layout: fixed

# advantage: allows browsers to layout tables faster. (in fixed table layouts, horizontal layouts depend only on table width, column width, table border width, and cell spacing, regardless of the contents of the cell. By using a fixed table layout, the user agent can display the table after receiving the first row. )

# disadvantages: not very flexible.

Automatic table layout: automatic

# advantages: better reflect the traditional HTML, (in automatic table layout, the width of the column is set by the widest content in the column cell without a line break. )

# disadvantage: the automatic algorithm is slow because it needs to access all the contents of the table before determining the final layout.

(3) possible values:

Value

Description

Automatic

Default. The column width is set by the contents of the cell.

Fixed

Column width is set by table width and column width.

Inherit

Specifies that the value of the table-layout attribute should be inherited from the parent element.

Width and height of the 2.CSS table (width, height)

The width and height properties define the width and height of the table.

The following example is a table that sets the height of a 30% width, 30 pixel th element, and 20 pixel td element:

Small example:

CSS simple Learning table,th,td {border: 1px solid black;} table {width: 30% } th {height: 30px;} td {height: 20px } name, sex, age Zhang San male 31 Li Si Male 43 Wang Wu male 24

Text alignment of 3.CSS tables (text-align)

Text alignment and vertical alignment attributes in the table.

The text-align property sets the horizontal alignment, left, right, or center.

The vertical-align property sets the vertical alignment, such as top, bottom, or middle.

Small example:

CSS simple learning table,th,td {border: 1px solid black;} th {width: 40%; height: 30px Text-align: center;} td {width: 40%; height: 20px; text-align: center } name, sex, age Zhang San male 31 Li Si Male 43 Wang Wu male 24

4.CSS form fill (padding)

The padding shorthand property sets all the padding properties in a declaration. This property can have 1 to 4 values.

Values indicate the padding values specified by length in specific units, such as pixels, centimeters, and so on. The default value of 0px% specifies that the fill inherit based on the percentage of the width of the parent element specifies that the padding small instance should be inherited from the parent element: CSS simple learning table,th,td {border: 1px solid black } th,td {padding: 15px } name, sex, age Zhang San male 31 Li Si Male 43 Wang Wu male 24

Background color and font color of 5.CSS table (background-color, color) CSS simple learning table,th,td {border: 1px solid black } th {background-color: burlywood; color: aqua;} td {background-color: chartreuse Color: brown;} caption {caption-side: bottom Table 1.1-name and gender of student personal information form Age Zhang San male 31 Li Si male 43 Wang Wu male 24

6.CSS Table Multi-attribute Comprehensive exercise CSS simple Learning / * corresponding to the style of the entire table * / # LOL {font-family: "italics", sans-serif Width: 50%; height: 100%; text-align: center; border-collapse: collapse } / * style of border lines in the corresponding table * / # LOL th,#LOL td {font-size: 20px; border: 1px solid # 00FFF; padding-top: 3px Padding-bottom: 3px; padding-left: 5px; padding-right: 10px } / * corresponding table header style * / # LOL th {font-size: 30px; padding-top: 3px; padding-bottom: 3px Padding-left: 5px; padding-right: 10px; background-color: # 7FFF00; color: deeppink } / * corresponding to the style of the column of behavior an in the table * / # LOL tr.a td {background-color: # DEB887; color: # FF0000 } / * the style of the column corresponding to behavior b in the table * / # LOL tr.b td {background-color: antiquewhite; color: # FF1493 } / * style of the corresponding table title * / caption {font-size: 16px; caption-side: bottom Table 6.66-League of Legends Entertainment Information Table Hero name location Recommended runes optional myths equipped with lava behemoths to assist the immortal AD Carry, goddess of war, holding frost and fire to protect hands, deadly rhythm sea The Shadow of the Devil Killer War against the three Forces of the Conqueror The single conqueror is thirsty for blood Tomahawk in the hand of Norxus. The immortal shield bow of the single conqueror in Guifeng Jianhao

The above is all the content of the article "what are the table properties in css3?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.