HTML Table Table

Tag: bar height does not show des set HSI body degraded footer

Previous words

The table element is often used for layout before the CSS appears. This practice is no longer recommended after HTML4. And now some overkill, using table display data can be said to be nonstandard. This article will detail the HTML table table

Table

"Default Style"

Ie7-Browser does not support border-spacingtable{border-collapse:separate;　　border-spacing:2px; border:1px solid Gray;}

Properties

1, border (in HTML5, border can only be "1" or "") (HTML5 has been discarded)

Border= "0"//No Border border= "8"//8 pixel wide border

2, CellPadding (px/%) (HTML5 has been discarded)

Specify the spacing between cell boundaries and cell content

3, CellSpacing (px/%) (HTML5 has been discarded)

Specify the spacing between cells

4, Summary (HTML5 has been discarded)

Summary of table contents

5, Width (HTML5 has been discarded)

Table width

<table border= "2" cellpadding= "5" cellspacing= "3" summary= "Test Form" width= ">    <tr>        <td> Row 1, cell 1</td>        <td>row 1, cell 2</td>    </tr>    <tr>        <td>row 2, Cell 1</td>        <td>row 2, cell 2</td>    </tr></table>    

6, FRAME (ie7-browser does not display properly) (HTML5 deprecated)

value	Description
void	The outer border is not displayed.
Above	Displays the outer border of the upper side.
Below	Displays the outer border of the lower part.
Hsides	Displays the outer border of the upper and lower sides.
Vsides	Displays the outer border of the left and right sides.
Lhs	Displays the outer border of the left side.
Rhs	Displays the outer border of the right side.
Box	Displays an outer border on all four sides.
Border	Displays an outer border on all four sides.

7, rules (ie7-browser does not display properly) (HTML5 obsolete)

value	Description
None	No lines.
Groups	A line between a row group and a column group.
Rows	Lines that are located between rows.
Cols	The lines that lie between columns.
All	A line that is between rows and columns.

< demo box > click on the corresponding attribute values below to demonstrate

Style

1. border-spacing[can replace HTML attribute cellspaing] (ie7-not supported)

[note] This style is valid only if the Border-collapse value is separate

Border-spacing:x y//x: Horizontal pitch y: Vertical spacing. If there is only one value, the horizontal and vertical spacing are equal. Note that negative values are not allowed.

2, Empty-cells (ie7-not supported)

Empty-cells:hide not draw borders and backgrounds around empty cells, similar to hidden effects empty-cells:show (default) draw borders and backgrounds around empty cells

3, CSS actually has two different border models. In terms of layout terminology, if the cells are separated from each other, the delimited border model is in effect, and the other is the merge 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 column groups.

Border-collapse:collapse;

In the merge border model, the table cannot set the padding padding, and there is no spacing between the cell borders. The border between cells is centered on the imaginary table line between the cells, and the table width contains only half 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, a merge border of Border-style is none, it has the lowest priority

C, wide border takes precedence over narrow borders

D, if the width is the same, double\solid\dashed\dotted\ridge\outset\groove\inset, the priority gradually reduced

E, if the same style, Cell\row\row group\column\column group\table, priority gradually degraded

< demo box > click on the corresponding attribute values below to Border-style

4, Table-layout

table-layout:auto//Automatic Width layout

"Steps for automatic Layout"

A, for cells in a column, calculates 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 width is equal to the minimum cell width of the cross-column cell

table-layout:fixed//Fixed Width layout

[note] For long text of table cells, use Word-wrap or word-break to force line breaks, and using Text-overflow to implement text overflow control requires setting table-layout:fixed

"Steps to fix a layout"

A, the Width property value is not auto, and all column elements of the column are set to the widths of the columns based on the width value

b, if the width of a column is auto, the column width is set according to that cell, and if it spans multiple columns, the width is evenly distributed

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

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

5, Vertical-align

vertical-align:top;//top align vertical-align:bottom;//bottom align vertical-align:middle;//middle align vertical-align:baseline (default); /baseline Alignment

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

Yes

"<tr><th><td>"

  <tr> row table row   <th> Header table Head  <td> Tabular data table

"Default Style"

th{    padding:1px;    Text-align:center;    Font-weight:bold;} td{    padding:1px;}

Properties

1, colspan

Specify the number of columns that a cell can span

2, RowSpan

Specify the number of rows that a cell can span

[Note] table elements on rows generate rectangular boxes with content, padding, and borders, but no margin margins. Table header rendered as centered bold text

< demo box > click on the corresponding attribute values below to demonstrate

Column

"<col><colgroup>"

<col> column

Define property values for one or more columns in a table

<colgroup> Column Group

Combine columns in a table to format them

Properties

Span

Specifies the number of columns that the COL element should span

Style

1, Visibility:collapse

All cells of the column or column group do not display (not set to other values)

2, border

You can set border only if you are Border-collapse:collapse

3, background

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

4. Width

Define the minimum width of a column or column group

<table border="1"style="Border-collapse:collapse"> <colgroup span="2"style="width:100px; background-color:red"></colgroup> <col style="background-color:green; width:200px; border:3px solid blue ;"> <tr> <td> Digital </td> <td> Chinese </td> <td> english </td> </tr> <tr> <td>1</td> <td> </td> <td>a</td> </tr> <tr> <td>2</td> <td> two </td> <td>b</td> </tr></table>

Other table elements

"<thead><tbody><tfoot>"

<thead> table Header <tbody> table body <tfoot> table Footer

[note] They appear in order: THEAD, TFOOT, tbody, so the browser can render the footer before all data is received

"<caption> table title"

"Default Style"

caption{    Text-align:center;}

Style

Caption-side:top (default) Caption-side:bottom

[Note that the]<caption> tag must be followed by the <table> tag, and only one title can be defined for each table

<table border= "1" > <caption style= "caption-side:bottom" > Beijing weather </caption>  <thead>    <tr>      <th> Regions </th>      <th> weather </th>    </tr>  </thead>  < tfoot>    <tr>      <td> Beijing </td>      <td> all haze </td> </tr>    <  /tfoot>  <tbody>    <tr>      <td> City eight </td>      <td> Haze </td>    </tr>    <tr>      <td> suburbs </td>      <td> Haze </td> </tr>  </tbody></table>

Display

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;}

Note Ie7-Browser does not support setting display values for HTML elements that are related to tables

Anonymous Table Object

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

1. Insert an anonymous Table-row object if the parent element of the Table-cell element is not a table-row element

2. Insert an anonymous TABLE element if the parent element of the Table-row element is not a table, inline-table, or table-row-group element

3. Insert an anonymous TABLE element if the parent element of the Table-column element is not a table, inline-table, or table-row-group 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, The anonymous table element is inserted

5. If the child elements of the table element or inline-table element are not Table-row-group, Table-header-group, Table-footer-group, Table-column-group or Table-caption, the anonymous table-row element is inserted

6. Insert an anonymous Table-row element if the child element of the Table-row-group, Table-header-group, table-footer-group element is not a table-row element

7. Insert an anonymous Tabel-cell element if the child element of the Table-row element is not a Table-cell element

Table Layer

The CSS defines 6 different layers, and the styles for each aspect of the table are drawn on their respective layers. By default, all element backgrounds are transparent, and if cells, rows, columns, and so on do not have their own backgrounds, the background of the table element is transparent and the inner elements are visible.

< demo box > click on the corresponding attribute values below to demonstrate

Margin settings

"<table>"

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

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

"<thead><tbody><tfoot><tr><col><colgroup>"

Neither margin nor padding can be set

"<td><th>"

Margin cannot be set, but can be set padding

"<caption>"

Both margin and padding can be set

Reprint:http://www.cnblogs.com/xiaohuochai/p/5008466.html

HTML Table Table