Table label Summary

One,table label: Define a table

A simple table consists of a TABLE element and one or more TR (row label), th (table header cell label), TD (normal cell label)

<table border=1>
<tr>
<th> header 1</th>
<th> header 2</th>
</tr>
<tr>
<td> content 1</td>
<td> content 2</td>
</tr>
</table>

Complex tables also include caption (table headings), col (definition Columns), colgroup (Combinations of columns in a table), Thead (grouped header contents) tbody (the subject content of a combination table), TFOOT (footer contents of a combined table)

<table width= border= "1" >
<caption> table title </caption>
<col align= "left"/>
<col align= "left"/>
<col align= "left"/>
<thead>
<tr>
<th> Header 1</ th>
<th> table head 2</th>
<th> header 3</th>
</tr>
</thead>
< tbody>
<tr>
<td> content 1</td>
<td> content 2</td>
<td> content 3</ td>
</tr>
</tbody>
<tfoot>
<tr>
<td> footnote 1</td>
<td> footnote 2</td>
<td> footnote 2</td>
</tr>
</tfoot>
</ Table>

A. width: Specify the height of the table:

If you do not set the width height, the table automatically adjusts the width of the table to B based on the table contents . Align Property: Specify the alignment of the table relative to the surrounding elements

A row appears before and after the table, but using the Align property enables other HTML elements to work around the table. Equivalent to using the Float property of CSS 1. Left

<table border=1 align= "left" >
<tr>
<th> header 1</th>
<td> data 1</td>
<td> data 2</td>
</tr>
<tr>
<th> header 2</th>
<td> data 1 </td>
<td> Data 2</td>
</tr>
</table>
<p>demo</p>

2.center

Align=center table or occupy a whole line

<table border=1 align= "center" >
<tr>
<th> header 1</th>
<td> data 1</td >
<td> data 2</td>
</tr>
<tr>
<th> header 2</th>
<td > Data 1</td>
<td> data 2</td>
</tr>
</table>
<p>demo</p >

3.right

<table border=1 align= "right" >
<tr>
<th> header 1</th>
<td> data 1</td>
<td> data 2</td>
</tr>
<tr>
<th> header 2</th>
<td> data 1 </td>
<td> Data 2</td>
</tr>
</table>
<p>demo</p>

C. bgcolor Property: Specify the background color of the table

Equivalent to using CSS Background-color property 1. ColorName: The color value is the background color of the color name 2. Hex_number: The color value is 16 in the background color 3. Rgb_number: Color value is the background color of RGB code D. Background Property: Specify the background image of the table

Background the value of a property to write a URL directly

<table border=1 background= "image/demo.jpg" >
<tr>
<th> header 1</th>
<td> data 1 </td>
<td> Data 2</td>
</tr>
<tr>
<th> header 2</th>
< td> data 1</td>
<td> data 2</td>
</tr>
</table>

E. Border Property: Specify the width of the table border

The Border property applies a border to each cell and surrounds the table with a border

Border property value changes, only changes the table border, the table inside the border does not change, or 1px

<table border=10>
<tr>
<th> header 1</th>
<td> data 1</td>
<TD > Data 2</td>
</tr>
<tr>
<th> header 2</th>
<td> data 1</td >
<td> data 2</td>
</tr>
</table>

F. cellspacing Property: Specify the spacing between cells

CellSpacing set to 0 o'clock, there is no spacing between the tables, the table border will appear next to each other, to make the table border merge, you need to use the CSS Border-collapse:collapse

<table border=1 cellspacing= "0" >
<tr>
<th> header 1</th>
<td> data 1</td>
<td> data 2</td>
</tr>
<tr>
<th> header 2</th>
<td> data 1 </td>
<td> Data 2</td>
</tr>
</table>

<table border=1 cellspacing= "Ten" >
<tr>
<th> header 1</th>
<td> data 1</td >
<td> data 2</td>
</tr>
<tr>
<th> header 2</th>
<td > Data 1</td>
<td> data 2</td>
</tr>
</table>

G. cellpadding Property: Sets the spacing between the cell boundary and the cell content by default of 0

<table border=1 cellpadding= "Ten" >
<tr>
<th> header 1</th>
<td> data 1</td >
<td> data 2</td>
</tr>
<tr>
<th> header 2</th>
<td > Data 1</td>
<td> data 2</td>
</tr>
</table>

H. Frame Property: Specify that part of the outer border is visible 1.void: Do not show outer border

<table border=1 frame= "void" rules= "none" >
<tr>
<th> header 1</th>
<td> data 1 </td>
<td> Data 2</td>
</tr>
<tr>
<th> header 2</th>
<td> data 1</td>
<td> data 2</td>
</tr>
</table>

2.box: All outer borders are displayed

<table border=1 frame= "box" rules= "None" >
<tr>
<th> header 1</th>
<td> data 1 </td>
<td> Data 2</td>
</tr>
<tr>
<th> header 2</th>
<td> data 1</td>
<td> data 2</td>
</tr>
</table>

3.border: All outer borders are displayed

Same as the frame= "box" display effect 4. Above: Shows the outer border of the upper side

<table border=1 frame= "Above" rules= "None" >
<tr>
<th> header 1</th>
<td> data 1 </td>
<td> Data 2</td>
</tr>
<tr>
<th> header 2</th>
< td> data 1</td>
<td> data 2</td>
</tr>
</table>

5.below: Show the lower outer border

<table border=1 frame= "below" rules= "none" >
<tr>
<th> header 1</th>
<td> Data 1</td>
<td> data 2</td>
</tr>
<tr>
<th> Header 2</th>
<td> Data 1</td>
<td> data 2</td>
</tr>
</table>

6.LHS: Show left Border

<table border=1 frame= "LHS" rules= "None" >
<tr>
<th> header 1</th>
<td> data 1< /td>
<td> Data 2</td>
</tr>
<tr>
<th> header 2</th>
<td > Data 1</td>
<td> data 2</td>
</tr>
</table>

7.RHS: Show right Border

<table border=1 frame= "RHS" rules= "None" >
<tr>
<th> header 1</th>
<td> data 1 </td>
<td> Data 2</td>
</tr>
<tr>
<th> header 2</th>
<td> data 1</td>
<td> data 2</td>
</tr>
</table>

8.hsides: Display the outer border of the upper and lower sides

<table border=1 frame= "Hsides" rules= "None" >
<tr>
<th> header 1</th>
<td> data 1 </td>
<td> Data 2</td>
</tr>
<tr>
<th> header 2</th>
< td> data 1</td>
<td> data 2</td>
</tr>
</table>

9.vsides: Display the outer border of left right side

<table border=1 frame= "Vsides" rules= "None" >
<tr>
<th> header 1</th>
<td> Data 1</td>
<td> data 2</td>
</tr>
<tr>
<th> Header 2</th>
<td> Data 1</td>
<td> data 2</td>
</tr>
</table>

I. Rules property: Specify that part of the inner border is visible 1.None: No interior lines

<table border=1 frame= "void" rules= "none" >
<tr>
<th> header 1</th>
<td> data 1 </td>
<td> Data 2</td>
</tr>
<tr>
<th> header 2</th>
< td> data 1</td>
<td> data 2</td>
</tr>
</table>

2.all: Show all the lines inside

<table border=1 frame= "void" rules= "all" >
<tr>
<th> header 1</th>
<td> data 1 </td>
<td> Data 2</td>
</tr>
<tr>
<th> header 2</th>
<td> data 1</td>
<td> data 2</td>
</tr>
</table>

3.rows: Show lines between lines

<table border=1 frame= "void" rules= "Rows" >
<tr>
<th> header 1</th>
<td> data 1 </td>
<td> Data 2</td>
</tr>
<tr>
<th> header 2</th>
< td> data 1</td>
<td> data 2</td>
</tr>
<tr>
<th> Header 2</th >
<td> Data 1</td>
<td> data 2</td>
</tr>
</table>

4.cols: Show lines between columns

<table border=1 frame= "void" rules= "cols" >
<tr>
<th> header 1</th>
<td> data 1 </td>
<td> Data 2</td>
</tr>
<tr>
<th> header 2</th>
<td> data 1</td>
<td> data 2</td>
</tr>
<tr>
<th> Header 2< /th>
<td> Data 1</td>
<td> data 2</td>
</tr>
</table>

5.groups: Show lines between row Group and column group

<table border=1 frame= "void" rules= "groups" >
<colgroup span= "2" ></colgroup>
<colgroup Span= "3" ></colgroup>
<tr>
<th> header 1</th>
<th> header 2</th>
<th> table Head 3</th>
<th> header 4</th>
<th> header 5</th>
<th> header 6</th >
</tr>
<tr>
<td> data 1</td>
<td> data 2</td>
<TD > Data 3</td>
<td> data 4</td>
<td> data 5</td>
<td> data 6</td>
</tr>
</table>

Second, caption tags: Define the title of the table

The table header is centered by default and the table border does not include the caption.

<table border=1>
<caption> table title </caption>
<tr>
<td> data 1</td>
<td> Data 2</td>
<td> data 3</td>
<td> data 4</td>
</tr>
<tr>
<td> Data 1</td>
<td> data 2</td>
<td> data 3</td>
<TD > Data 4</td>
</tr>
</table>

Align property: Specify where the table caption is displayed 1.Top: The table headings appear above the table, and the default 2.bottom: The table caption appears below the table

<table border=1>
<caption align= "bottom" > table title </caption>
<tr>
<th> Data 1</th>
<th> data 2</th>
<th> data 3</th>
<th> data 4</th>
</tr>
<tr>
<td> data 1</td>
<td> data 2</td>
<td> data 3< /td>
<td> Data 4</td>
</tr>
</table>

3.left: The table caption appears on the left side of the table (some browser support, such as: Firefox) 4.right: The table title appears to the right of the table (some browser support, such as: Firefox) III. TR Tags: defining rows in a table

The TR label can not directly write content, the form must be written in the TD or TH tags inside A. Align Property: Specify the horizontal alignment of the content in the table row 1.Right: right-aligned content 2.left: Left-aligned content (default) 3.center: Align content horizontally 4.justify: Stretches the line, each line is equal in length

<table border=1 width= "M" >
<tr align= "Justify" >
<th> data 11111111</th>
< th> data 222222222222222</th>
<th> data 3333333333333333333</th>
<th> data 444444< /th>
</tr>
</table>

B. valign Property: Specify the vertical alignment of content in table rows 1.top: Align content 2.middle: Align content vertically to the center 3.bottom: Bottom aligned content 4.baseline: Content aligned to baseline C. bgcolor Property: Sets the background color of table rows Four, cell tags: th label and TD tag A. th Label: Define table header cells

Cell text is generally displayed as a centered bold text B. TD Tags: Define table standard cells

Cell text generally appears as normal text C with left aligned . rowspan Property: Specify the number of rows that the cell spans

<table border=1 >
<tr>
<td rowspan= "3" > Data </td>
<td> data </td>
<td> Data </td>
<td> data </td>
</tr> <tr>
<td> data </td>
<td> Data </td>
<td> data </td>
</tr>
<tr> <td> data </td>
<td> data </td>
<td> data </td>
</tr>
</ Table>

D. colspan Property: Specify the number of columns that the cell spans

<table border=1 >
<tr>
<td colspan= "2" > Data </td>
<td> data </td>
</tr>
<tr>
<td> data </td>
<td> data </td>
<td> data </td>
</tr>
<tr>
<td> data </td>
<td> data </td>
<td> data </td>
</tr>
</table>

E. Width Property: You can set the width of a cell F. Height Property: You can set cell heights G. Align Property: Specify the horizontal alignment of the contents of a cell H. valign Property: Specify vertical horizontal alignment of cell contents I. nowrap Property: Specify that cell contents do not wrap Five, table content grouping Tags: thead tags, tbody tags, tfoot tags

THEAD, TFOOT, and tbody elements group the rows in the table to facilitate control of the table's performance. When long tables are printed, the table headers and footers can be printed on every page that contains tabular data (some browser support, such as Firefox).

These tags are mainly used to increase the loading of the table label and display, that is, partial load, do not wait until the entire table is loaded and then display cell data A. thead Tags: table header contents of a combined table B. tbody Tags: the main contents of a combined table C. tfoot Tags: the footer/footer contents of a combined table

Pages are always displayed in Thead>tbody>tfoot order, regardless of the order of the Code

<table border=1>
<tfoot>
<tr>
<td> Total </td>
<td> data </td>
</tr>
</tfoot>
<tbody>
</tr><tr>
<td> data </td >
<td> data </td>
</tr>
</tbody>
<thead>
<tr>
<th> table Head </th>
<th> header </th>
</tr>
</thead>
</ Table>

six, column label: Colgroup label, col label 1.align: Specify the horizontal alignment of the content in the column 2.valign: Specify the vertical alignment of content in the column 3.span: Specify the number of columns across 4.width: Specify the widths of the columns

A. colgroup Label: Used to group columns in a table so that they can be formatted Colgroup labels can only be used in table labels

<style>
one{
background-color: #c00;
}
. two{
background-color: #f00;
}
</style>
<body>
<table border=1 width= "A" >
<colgroup class= "one" >
<col/>
<col/>
</colgroup>
<colgroup span= "3" class= "two" ></colgroup >
<tr>
<td> data </td>
<td> data </td>
<td> data </td>
<td> Data </td>
<td> data </td>
<td> data </td>
</tr>
<tr>
<td> Data </td>
<td> data </td>
<td> data </td>
<TD > Data </td>
<td> data </td>
<td> data </td>
</tr>
</table >

B. Col Label: Defines a property value for one or more columns in a table

Col labels can only be used in table labels or colgroup labels

The col label is an empty element that contains only the attributes, and the contents of the columns are displayed in the TD element within the TR element

<style>
one{
background-color: #c00;
}
. two{
background-color: #f00;
}
</style>
<body>
<table border=1 width= "A" >
<col class= "one"/>
<col class= "Two"/>
<tr>
<td> data </td>
<td> data </td>
</tr>
<tr>
<td> data </td>
<td> data </td>
</tr>
</table >