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

This article mainly explains "HTML Table example Analysis". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor to take you to learn "HTML table case analysis" bar!

Table

[default style]

Copy the code

/ / IE7- browser does not support border-spacing

Table {

Border-collapse: separate

Border-spacing: 2px

Border: 1px solid gray

}

Copy the code

[attribute]

1. Border (in html5, border can only be "1" or ") (html5 is obsolete)

Border= "0" / / No border

Border= "8" / / 8 pixel wide border

2. Cellpadding (px/%) (html5 has been abandoned)

Specify the distance between the cell boundary and the cell content

3. Cellspacing (px/%) (html5 has been abandoned)

Specify the spacing between cells

4. Summary (html5 has been abandoned)

Summary of the contents of the table

5. Width (html5 has been abandoned)

Table width

Copy the code

Row 1, cell 1

Row 1, cell 2

Row 2, cell 1

Row 2, cell 2

Copy the code

IFrame

6. Frame (IE7- browser cannot display properly) (html5 has been discarded)

Value description

Void does not display the outside border.

Above displays the upper outer border.

Below displays the outer border of the lower part.

Hsides displays the outer borders of the upper and lower parts.

Vsides displays the left and right outer borders.

Lhs displays the outside border on the left.

Rhs displays the outside border on the right.

Box displays the outer border on all four edges.

Border displays the outer border on all four edges.

7. Rules (IE7- browser cannot display normally) (html5 has been discarded)

Value description

None has no lines.

The groups is a line between a row group and a column group.

The line where the rows is between the lines.

The cols is a line between columns.

The all is a line between a row and a column.

Click the following corresponding attribute values to demonstrate

IFrame

[style]

1. Border-spacing [can replace HTML attribute cellspaing] (not supported by IE7-)

[note] this style is valid only if the border-collapse value is separate

Border-spacing: x y

/ / x: horizontal spacing y: vertical spacing. If there is only one value, the horizontal and vertical spacing are equal. Note that it cannot be negative.

2. Empty-cells (not supported by IE7-)

Empty-cells: hide does not draw borders and backgrounds around empty cells, similar to the hidden effect

Empty-cells: show (default) draws borders and backgrounds around empty cells

3. CSS actually has two completely different border models. In layout terms, if the cells are separated from each other, the separated border model is at work; the other is to merge the border model, and the cell borders are merged with each other.

Border-collapse:separate

[note] in a delimited border model, borders cannot be set for rows, row groups, columns, and column groups.

Border-collapse:collapse

In the merged border model, the table cannot set the inner margin padding, and there is no spacing between cell borders. The border between cells is centered on the imaginary table line between cells, and the width of the table is only half the width of the table border.

[rules for border merging]

A. The border-style of a merged border is hidden, which takes precedence over all other merged borders. All borders in this position are hidden

B. The border-style of a merged border is none, which has the lowest priority.

C, wide border takes precedence over narrow border

D. If the width is the same, double\ solid\ dashed\ dotted\ ridge\ outset\ groove\ inset, the priority decreases gradually.

E. If the style is the same, cell\ row\ row group\ column\ column group\ table, the priority is gradually lowered.

Click the following corresponding attribute values to demonstrate border-style

IFrame

4 、 table-layout

Table-layout:auto// automatic width layout

[steps for automatic layout]

A. for cells in a column, calculate the minimum and maximum cell widths

B. for each column, calculate the minimum and maximum column widths

C. if the cell spans columns, the sum of the minimum column widths should be equal to the minimum cell width of the cells across the columns.

Table-layout:fixed// fixed width layout

[note] for long text in table cells, using word-wrap or word-break to force line wrapping, and using text-overflow to implement text overflow control need to set table-layout:fixed

[steps to fix layout]

A, all column elements whose width attribute value is not auto will set the width of the column according to the width value

B. If the width of a column is auto, the width of the column is set according to the cell. If it spans multiple columns, the width is evenly distributed.

C. if the column width is still auto, automatically determine its size so that its width is as equal as possible

[note] using a fixed-width layout, the user agent can calculate the layout of the table more quickly

5 、 vertical-align

Vertical-align: top;// top alignment

Vertical-align: bottom;// bottom alignment

Vertical-align: middle;// middle alignment

Vertical-align: baseline (default); / / baseline alignment

[note] vertical-align:sub\ super\ text-top\ text-bottom is ignored when applied to table cells

OK

[]

Line table row

Header table head

Tabular data table data

[default style]

Copy the code

Th {

Padding: 1px

Text-align: center

Font-weight: bold

}

Td {

Padding: 1px

}

Copy the code

[attribute]

1 、 colspan

Specify the number of columns that a cell can span

2 、 rowspan

Specifies the number of rows that a cell can span

[note] Table elements about rows generate rectangles with content, inner margins, and borders, but no outer margins margin. The header is rendered as centered bold text

Click the following corresponding attribute values to demonstrate

IFrame

Column

[]

-> column column

Define attribute values for one or more columns in a table

-> column group column group

Combine the columns in the table to format them

[attribute]

Span

Specifies the number of columns that the col element should span

[style]

1 、 visibility:collapse

All cells of this column or column group are not displayed (invalid if set to other values)

2 、 border

Border can be set only when border-collapse:collapse

3 、 background

The background of a column or group of columns is visible only if the cell and its rows have a transparent background

4 、 width

Define the minimum width of a column or group of columns

Copy the code

Figures

Chinese

English

one

one

A

two

two

B

Copy the code

Other table elements

[]

Table header

Form body

Table footer

[note] the order in which they appear is: thead, tfoot, tbody, so that the browser can render the footer before receiving all the data.

[table title]

[default style]

Caption {

Text-align: center

}

[style]

Caption-side: top (default)

Caption-side: bottom

[note] the label must follow the label, and only one title can be defined for each table

Copy the code

Beijing weather

Area

Weather

Beijing

All haze

City8 District

Haze

Suburb

Haze

Copy the code

Display

Copy the code

Table {display: table;}

Thead {display: table-header-group;}

Tbody {display: table-row-group;}

Tfoot {display: table-footer-group;}

Tr {display: table-row;}

Td,th {display: table-cell;}

Col {display: table-column;}

Colgroup {display: table-column-group;}

Caption {display: table-caption;}

Copy the code

[note] IE7- browsers do not support setting table-related display values for HTML elements

Anonymous table object

CSS defines a mechanism for inserting missing components as anonymous objects. The detailed insertion rules are as follows:

1. If the parent element of the table-cell element is not a table-row element, insert an anonymous table-row object

2. If the parent element of the table-row element is not a table, inline-table, or table-row-group element, insert an anonymous table element

3. If the parent element of the table-column element is not a table, inline-table, or table-row-group element, insert an anonymous table element

4. If the parent element of table-row-group, table-header-group, table-footer-group, table-column-group, or table-caption is not a table element, insert an anonymous table element

5. If the child element of the table element or inline-table element is not table-row-group, table-header-group, table-footer-group, table-column-group, or table-caption, insert an anonymous table-row element

6. If the child elements of the table-row-group, table-header-group, table-footer-group elements are not table-row elements, insert anonymous table-row elements

7. If the child element of the table-row element is not a table-cell element, insert an anonymous tabel-cell element

Table layer

CSS defines six different layers, and the styles for each aspect of the table are drawn on their respective layers. By default, the backgrounds of all elements are transparent, and if cells, rows, columns, and so on do not have their own background, the background of the table element will be transparent and visible to these internal elements.

Click the following corresponding attribute values to demonstrate

Margin settin

[]

If you are in a separated border model, both margin and padding can be set

If you are in a merged border model, you can only set margin

[]

Neither margin nor padding can be set

[]

Margin cannot be set, but padding can be set

[]

Both margin and padding can be set

At this point, I believe that you have a deeper understanding of the "HTML table example analysis", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.