I teach my girlfriend to learn programming HTML Series (5) Use and examples of table in HTML

　　

Girlfriend is not learning computer, but now engaged in computer industry, do technical support, she wants to learn programming, so I intend to teach her a little, accumulate, take her to learn programming, if other beginners interested, can follow the study.

In order to introduce the table simple, vivid, with actual combat, I spent 3.5 hours, wrote 5 columns, the table some of the key knowledge to speak, directly look at the code bar, while looking at the side of the knock, more hands-on practice.

1, border does not overlap 3 Rows 3 Column Table

usage and examples of table in HTML </title>1  , the border does not overlap the 3 rows of the 3-column table <table border="1" ><tr><td> study number </td>  <td> name </td>  <td> gender </td></tr><tr><td>001</td>    <td> roaches </td> <td> men </td></tr><tr><td>002</td>   <td> Fang </td> <td> women </td></tr></table></body>

(1) Table tag stands for "table", border is its attribute, "border" meaning, here set border 1 pixels (1px).

(2) The TR tag stands for "line", each table is made up of multirow (TR)

(3) TD labels represent "cells" and each line (TR) includes multiple cells (TD).

(4) Each cell of the table has a border, the default is not to display the border, when the table is set to Border= "1", the border is displayed, but the border does not overlap.

(5) The border does not overlap is not very ugly? Do you know how to make a border overlap? Look down.

2, Merge Border 3 rows 3 columns Table

 html  </title>2   3 Rows 3 columns table  <table border= 1   " style=  "  Border-collapse:collapse;   ><tr><td> number </td> <td> name </td> <td> gender </td></tr><tr><td>001  </td> <td> Jack Bauer </   td> <td> male </td></tr><tr><td>002  </td> <td> Fang </td> <td> female </td></tr></table></body> 

(1) Merge the border of the table, need to add style to table, style is appearance, appearance, appearance, can be style= "" to
Any HTML tag to add a style, double quotation marks inside the "Property name: property value;" , note "Property name" and "Property value"
The middle is a colon, not an equal sign, and the property value is followed by a semicolon.

(2) attribute name Border-collapse means "border folding way", border is the meaning of the border, collapse is the meaning of "folding", border-collapse corresponding to the value of 3: separate (border separated), Collapse (border collapse), inherit (the value inherited from the parent element Border-collapse).
The default value for Border-collapse is separate, so if you need a border collapse, you need to set the border-collapse:collapse.

(3) The table has no title, the content is very crowded, not beautiful, look down.

3, table with title, Width set

use and examples of table in HTML</title>"1"style="border-collapse:collapse;width:80%;"><caption align="Top"> Student Information Sheet </caption><tr><td style="width:30%;"> Study number </td> <td style="width:60%;"> Name </td> <td style="width:10%;"> Sex &LT;/TD&GT;&LT;/TR&GT;&LT;TR&GT;&LT;TD >001</td> <td > Cockroach </td> <td> men </td></tr><tr><td>002</td> <td> Fang </td> <td> women </td></tr></table></body>

(1) The caption label is the title label of the table, and the caption tag must follow the table label. And you can define only one title per table. The default caption appears in the middle of the table, and you can use the Align property to
Set the title position, the value has top (top), bottom (bottom), left (on the right side)

(2) width:80%; the width of table is set to 80%, which is the percentage of table that is the parent element (here is the body tag). Other than that
The width of the 3 columns of "study number", "Name" and "gender" respectively is set to 30%, 60%, 10%, which refers to TD as a percentage of TR, and TR
Represents a row, and the default width is the width of the table.

(3) For a table, just set the width of each cell in the first row, the cells of the other rows inherit the width of the same column cell, and I experimented with it, if the first column of the second row is set to 70%, then all the first columns are 70% of the width, so
It is recommended that you only set the width of the first row of cells, not all the cells are set to width, do not confuse yourself.

(4) Do you know how to make a cell span multiple columns? and center your content? Table fixed pixel width? Please look down.

4, fill the title with cross-column TD, table fixed width, cell center display

use and examples of table in HTML</title>4, fill the header with cross-column TD, table fixed width, cell center display<table border="1"style="border-collapse:collapse; width:300px; "&GT;&LT;TR&GT;&LT;TD colspan="3"align="Center"> Student Information Sheet </td></tr><tr><td style="width:50px;"> Name </td> <td style="width:200px;"> Classic </td> <td style="width:50px;"> Sex </td></tr><tr><td > Cockroach </td><td >How are you doing, Xiao Qiang, Xiao Qiang? You don't want to die. We have been through thick and thin for so many years, has been to you for the book teaching, can't think of now the bald man sent to the black head. What am I going to do when you die, Johnny? You wake up, cockroach! </td> <td> male </td></tr><tr><td> Fengjie </td> <td>with my IQ and my ability, I pushed forward for 300 years and pushed back for 300 years, and there won't be a second person over me for 600 years. </td> <td> Women </td></tr></table></body>

(1) Fixed width directly using pixel representation, such as table width is set to 300 pixels, width:300px;

(2) colspan= "3" shows a cell across 3 columns, col is the meaning of the column, span is the meaning of tiling, the combination is "tiling 3 columns", if the cross 3 rows, with rowspan= "3", row is the meaning of rows, the combination is "tiling 3 rows", that is, "across 3 rows."

(3) The cell has a property align, which means the content on which side of the meaning, its value has left (on the right), the Center (center), align= "center" is to let the content "center" meaning, so the title is centered. The default is left, so the contents of the other cells are left.

(4) Hold on, and finally tell you the table "fixed table layout" and "Automatic table layout".

5, "Fixed table layout" and "Automatic table layout"

use and examples of table in HTML</title>5, fixed table layout, and automatic table layout<table border="1"style="border-collapse:collapse; table-layout:fixed; width:300px ;"&GT;&LT;TR&GT;&LT;TD colspan="3"align="Center"> Student Information Sheet </td></tr><tr><td style="width:50px;"> Name </td> <td style="width:200px;"> Classic </td> <td style="width:50px;"> Sex </td></tr><tr><td > Cockroach </td><td >How are you doing, Xiao Qiang, Xiao Qiang? You don't want to die. We have been through thick and thin for so many years, has been to you for the book teaching, can't think of now the bald man sent to the black head. What am I going to do when you die, Johnny? You wake up, cockroach! </td> <td> male </td></tr><tr><td> Fengjie </td> <td>with my IQ and my ability, I pushed forward for 300 years and pushed back for 300 years, and there won't be a second person over me for 600 years. </td> <td> Women </td></tr></table></body>

(1) Table has one more style table-layout:fixed, which means to set the table layout algorithm to "fixed table layout". When fixed, the column width is set by the table width and column widths, "fixed" means that the width is fixed, sometimes set the width of the table cell, but it does not work (can be tested on IE6, IE7, IE8), you need to increase the style table-layout:fixed;
I tested it for 1 hours on the IE10 and Cheetah browsers, with the result that the table-layout:fixed was added, and the width didn't work, but when I used the IE8 test program in the company, not adding table-layout:fixed would cause the width to not work, so The parsing of Table-layout is different for different browsers.

(2) Table-layout There is another value, automatic, corresponding to the "Automatic table layout", also the default value, the width of the column is set by the widest content in the column cell without the row, that is, the cell width and the longest row of the content consistent, cell width is not fixed, Dynamic calculations are required.

(3) In general, it is necessary to use the "fixed table layout", set the table and the width of the cell, to prevent the table because the content of the different deformation.

In the browser view, I intercepted 2, as follows:

2: