HTML and CSS tutorial-Chapter 8 create a table

 

Chapter 8 create a table
Key points of this Chapter
Basic table Markup
Table attributes
Table advanced Markup
Advanced Table

Directory:
8.1 basic table Markup
8.2 create a simple table
8.3 table attributes
8.4 table advanced Markup
8.5 create an advanced table

8.1 basic table Markup
In HTML syntax, a table consists of three tags: Table tag, row tag, and cell tag.
<Table>... </table>
<Tr>... </tr>
<TD>... </TD>
<Table> marker indicates the beginning of the table, <tr> marker indicates the beginning of the row, and <TD> and </TD> indicate the content of the cell.
These labels are contained layer by layer from the largest table to the smallest cell.
A table can have multiple <tr> and <TD> tags, representing multiple rows and multiple cells respectively.

8.2 create a simple table
......

8.3 table attributes
After creating a table, we also need to adjust the attributes of the table. The basic attributes of the table are shown in the table.
Width, height width, height
Border border
Bordercolor border color
Bgcolor background color
Background Image
Cellspacing cell spacing
Cellpadding cell margin
Align align alignment
Frame table border Style
Border style in the Rules table

1. Table width and height
<Table width = "value" Height = "height">
<Tr width = "value" Height = "height">
<TD width = "value" Height = "height">

Generally, tables with only one column are written in the <Table> label, with only one row. The height is written in the <Table> label and multiple rows and columns, width and height are written in the <TD> label of the first line or column. In short, follow the principle that no more than one height and width controls the size of the same cell, to ensure that any width and height are valid, that is to say, you should see the change in the browser to change any value of width and height in the code. It is not easy to do this. It takes a long time to practice and think.

2. Border border of the table
By default, the table does not display borders. That is, the border attribute value is 0. You can set the Border Width in pixels.
<Table border = "value">

3. Table border color bordercolor
After adding a 5-pixel border, we found that the four border colors on the top and bottom of the table are different. For the extra border, the upper left border is light color, which is called the bright border bordercolorlight. The lower right border is deep in color, which is called the Dark border bordercolordark. The cell border is opposite, the upper left is a dark border, and the lower right is a bright border. We can use the bordercolor attribute to set four borders to the same color, or use bordercolorlight and bordercolordark to set the color of the highlighted border and the hidden border respectively.
<Table bordercolor = "value">
<Table bordercolorlight = "value" bordercolordark = "value">

4. bgcolor
You can use the bgcolor attribute to set the background color of tables, rows, and cells.
<Table bgcolor = "value">
<Tr bgcolor = "value">
<TD bgcolor = "value">

5. background image of the table
In addition to the background color, we can also set the background image for the table.
<Table background = "img_url">

6. Cell spacing cellspacing
You can adjust the spacing between cells by setting the cellspacing attribute.
<Table cellspacing = "value">

7. Cell margin cellpadding
The cell margin refers to the distance between the content of a cell and the border.
<Table cellpadding = "value">

8. Horizontal align
In the horizontal direction, the alignment modes include left, center, and right.
<Table align = "Left">
<Table align = "Left">
<Table align = "Left">
When the align attribute is used in table tag <Table>, the entire table is placed on the left, center, and right sides of the browser.
<Tr align = "value">
When the align attribute is used in the <tr> tag, the cells in all cells in the row are left, center, and right.
<TD align = "value">
When the align attribute is used in the <TD> tag, the content of the cell is left, center, and right in the cell.

9. Frame
In addition to controlling the width and color of the border, we can also control the display style of the border.
<Table Frame = "value">
You can use the frame attribute to control the outer border style of a table. The attribute values are shown in the table.
Show only the upper border
Below only displays the lower border
LHS only displays the Left Border
Ths only displays the right border
Hsides display upper and lower borders
Vsides display left and right borders
Border display upper, lower, and left borders
Box display upper, lower, and left borders
Void does not display borders

10. Border style rules in the table
<Table rules = "value">
You can use the rules attribute to control the border style in the table. The attribute value is shown in the table.
All show all internal borders
None does not display the internal border
Groups does not display the internal border
Cols only displays column borders
Rows only displays row borders

8.4 table advanced Markup
1. Th
The table header is marked as <TH>, which is usually the first row or column of the table. The text in the table can be centered and displayed in bold. You can use <TH> to replace <TD> tags. <TH> it can be seen as a special cell tag with the bold and centered function.

2. Caption
In HTML, You can automatically add titles to a table by TAG.
You can use this tag to directly add the table title and control the arrangement of the title text.
<Caption align = "value" valign = "value"> title content </caption>
<Caption> is the title content;
Use align to set the horizontal alignment of the title text to the table (left, center, right );
Use valign to set the vertical alignment of the title text to the table (Top, bottom );

3. thead, tbody, tfoot
Three row group elements: <thead> </thead>, <tbody>, and <tfoot> allow the browser to support scrolling of long table subject areas, and keep the header and end of the table fixed. We can set styles for the header, table body, and table tail data respectively. When you use a row group, you can have one or more tbody elements, and one or no thead and tfoot elements.
The <thead> flag is used to define the top-most style of a table.
<Tbody> the tag is used to define the style of the table body.
<Tfoot> label is used to define the style at the end of a table.

4. colgroup
<Colgroup> labels are used to combine columns in a table for formatting. To apply a style to all columns, the <colgroup> label is very useful, so that you do not need to apply the style to each unit or row repeatedly.
<Colgroup> labels can only be used in table elements.
<Colgroup span = "value"> </colgroup>
Value indicates the number of columns.

5. colspan, rowspan
In a complex table structure, some cells span multiple cells horizontally. Therefore, the cross-row rowspan attribute must be used, some cells span multiple cells in the vertical direction, which requires the cross-column attribute colspan.
<TD rowspan = "value">
<TD colspan = "value">
Value indicates the number of rows and columns across cells.

8.5 create an advanced table
Web page layout is sometimes complicated. A large external table is required to control the overall layout. However, if some internal typographical details are also implemented using it, it may easily cause a conflict between the Row Height and column width, making table creation difficult. If multiple nested tables are used, the external large tables are responsible for the overall layout, and the internal small tables are responsible for the layout of each section. In this way, they will perform their respective duties and do not conflict with each other.