Parsing HTML Language (vii) TABLE tags

The role of

<TABLE> <TR> <TD> <TH> <CAPTION>

<TABLE> <TR> <TD>:

These three marks are the most important mark of the definition table, it can be said that only learn these three is enough. &lt;TABLE&gt; is a container tag, meaning that it declares that it is a form and that other forms of marking can only be applied within his scope, and that the container is marked with other. &lt;TR&gt; to mark table column (ROW) &lt;TD&gt; to mark storage (cell) <TABLE> parameter setting (commonly used): For example: <table width= " border" = "1" cellspacing= "2" cellpadding= "2" align = "CENTER" valign= "Top" background= "Myweb.gif" bgcolor= "#0000FF" bordercolor = "#FF00FF" bordercolorlight= "#00FF00" bordercolordark= "#00FFFF" cols= "2" > The width = " " table width, accepting an absolute value (such as 80) and relative values (such as 80%). border = "1" table border thickness, different browsers have different default values, so please indicate. cellspacing = "2" Table gridline thickness, see example three , That's the grid line that's thickened to 5. cellpadding = "2" the distance between the text and the grid, see example four , That's the padding plus to 10. align = "CENTER" Table placement (horizontal), optional value: left , right , center , see example five or six , the form is placed in the middle, in order to be afraid that some browsers do not support, so special with the center tag <center>, only multi-layer guarantee, of course, only <CENTER> can. The valign = "Top". The placement position of the calligraphy and painting in the table (vertical), the optional value is: top , middle , bottom . background = "Myweb.gif" Form paper, not with bgcolor. bgcolor = "#0000FF" table background, not with background, see example six . bordercolor = "#FF00FF" table border color, NC and IE have different effects, see example six . bordercolorlight = "#00FF00" Table border Light part of the color, see example two . bordercolordark = "#00FFFF" Table border back The color of the light part, see example two , BorderColor will be invalidated when using bordercolorlight or Bordercolordark. cols = "2" table field number, just let the browser in the download form is the first to draw the entire table and their own. <tr> parameter Settings (Common): For example: <tr align = "Right" Font color= "#ff0000" >valign = "Middle" bgcolor = "#0000FF" = "#FF00FF" bordercolorlight = "#808080" = #FF0000 > align = "Right" the placement position (horizontal) of the calligraphy and painting in this column, with an optional value of: left , center , right . valign = "Middle" the placement position of the calligraphy and painting in this column (vertical), the optional value is: Top , middle , bottom . bgcolor = "#0000FF" This column of background, see example five . bordercolor = "#FF00FF" The column border color, see example three . bordercolorlight = "#808080" This column border Light part of the color, see example three . bordercolordark = "#FF0000" This column border back Light part of the color, please see example three , BorderColor will fail when using Bordercolorlight or Bordercolordark. <td> parameter Settings (Common): For example: <td width = "48%" height = "colspan =" 5 "rowspan = "4" align = "right" valign = "BOTTOM" bgcolor =" #FF00FF "bordercolor =" #808080 " = "#FF0000" bordercolordark = "#00FF00" = "Myweb.gif" > width = "48%" the width of the cell, accepting an absolute value (such as 80) and relative values (such as 80%). height = "=" The height of the cell. colspan = "5" The number of columns to the right of the storage grid. See example six rowspan = "4" The number of columns that the storage grid is down.　See example six align = "Right" the display of calligraphy and painting in this storage box Location (horizontal) with optional values: left , center , right . valign = "BOTTOM" The placement position (vertical) of the calligraphy and painting in the storage lattice, optional values are: top , middle , bottom . bgcolor = "#FF00FF" This storage background, see example four . bordercolor = "#808080" This cell border color, see example three . bordercolorlight = "#FF0000" The one-cell border the color of the light part, see example three . bordercolordark = "#00FF00" This cell border back the color of the light part, see example three , BorderColor will fail when you use Bordercolorlight or Bordercolordark. background = "Myweb.gif" The one-cell paper, and the bgcolor appointment. Example One: Original code <table width= "60%" border= "1" > <tr> <td> table with only one cell (cell) </td></tr> </table> Show results Table with only one cell (cell) Example Two: Original code <table width= "60%" border= "5" bordercolorlight= "#FF00FF" bordercolordark= "#FF0000" > <tr> <td> first column </td><td> first column second column </td></tr> </table> Show results First column First column, second column. Example Three: original code <table width= "60%" border= "1" cellspacing= "5"       <tr bordercolor= "#0000FF" <TD> First column </TD> <TD> first column second Column </td>       </t R>       <tr bordercolorlight= "#FF00FF" Borderc olordark= "#00FF00" <TD> the first column of the second row </td> <TD> second column </td>       </tr> </table> Show results   first column first column, second column second column The first column second column example four: original code <table width= "60%" border= "1" cellpadding= "ten"       <tr> <td bgcolor= "#FFCCE6" first column A column </td> <td bgcolor= "#FFFFC6" &G t; The first column </td>       & Lt;/tr>       <TR> <td bgcolor= "#FFD9FF" second column, the first column </TD> <td bgcolor= "#DAB4B4" second column </td>       </tr> & Lt;/table> Show results   first column first column, second column second column The first column second column example five: original code < Font color= "#004f9d" ><center> <table width= "60%" cellspacing= "0" cellpadding= "2" align= "CENTER"      <tr> <td bgcolor= "#FFD2E9" first column </td> <td bgcolor= "#FFDAB5" first column of the second columns </TD&G t; <td bgcolor= "#FFFFB5" first column </td>       </tr>       ; <tr bgcolor= "#C0C0C0" <td> the second column </td> <td> second column </TD> <td> second column </TD>   &nbs p;   </TR> </TABLE> </CENTER> Show results First column First column, second column. The first column, the third column The first column of the second row Second column Second column, third. example Six original code < Font color= "#004f9d" ><center> <table width= "1" border= " 0 "cellpadding=" 2 "align=" CENTER "bgcolor=" #FFC4E1 "bordercolor=" #0000FF "       <tr> <TD> first column </td> <td colspan=" 2 " the second column of the first column and the third column </td>       </TR>       <tr> <td Rowspan= "2" the first column of the second and third columns </TD> & LT;TD> second column <TD> second column </td>       </TR>     & nbsp <TR> <td> the second column </TD> <td> third column </TD>   &nbs p;   </TR> </TABLE> </CENTER> Show results First column The second and third columns of the first column The first column of the second and third columns Second column Second column, third. Column II, third Third column Third

<TH>:

&lt;TH&gt; and &lt;TD&gt; are also marked with a single cell, the only difference being that the text in the cell marked by &lt;TH&gt; appears in bold and is usually used in the first column of the table to indicate the column. Its use is to replace the position of &lt;TD&gt; can be, its parameters set please refer to &lt;TD&gt;. of course, if the text in the &lt;TD&gt; labeled cells plus bold tags &lt;B&gt; such as &lt;TH&gt; effect. Example: Original code <CENTER> < Table width= "border=" "1" cellspacing= "0" cellpadding= "2" align= "CENTER"       <tr align= "CENTER" <TH> Month Font color= "#ff0000" ></th><th> % of IE visitor </TH><TH> % of NC visitor </th>       & Lt;/tr>       <tr align= "CENTER" <td> August </TD><TD> 61% </td><td> 39% </TD>    & nbsp;  </TR> &Nbsp;     <tr align= "CENTER" <td> July 46% </TD>       </tr>       <tr align=" CENTER " <td> June </TD><TD> 52% </td><td> 48% </TD>    & nbsp;  </TR> </TABLE> </CENTER> Show results Month % of IE visitor % of NC visitor August 61% 39% July 54% 46% June 52% 48%

<CAPTION>:

&lt;CAPTION&gt; is to mark a table with a header column , like an open column with no grid line above the table. It is also, of course, placed below, usually for the title of the form. <CAPTION> parameter setting (commonly used): For example: <caption Align= "Top" valign= "Top" ></caption> Align= "Top" The table Title column is relative to the placement position of the table (horizontal), and the optional values are: Left , center, right, top, Middle, Bottom, if align= "bottom" then the title column will appear to the bottom of the table, regardless of your original code to put <caption> in <table> The head or tail in. valign= "Top" The table Header column is positioned relative to the table (up and down), and the optional value is: Top, bottom. and Align= "top" or align= "BOTTOM" is the same, although the function is repeated, but if you want to put the title column below and to the right or left to paste, then two parameters can be used. When you have only one parameter, you prefer align, because valign is a parameter that starts with HTML 3.0. Example: original code < Font color= "#004f9d" ><center> <table width= "1" border= " 0 "cellpadding=" 2 "align=" CENTER " <CAPTION> Web crash August Visitor Browser usage Analysis Font color= "#ff0000" ></caption>      <tr align = "CENTER" <th> Month </TH> <th> % of IE visitor </TH> <th> % of NC visitor </TH> & nbsp;     </TR>       <tr align= "CENTER" <td> August </TD> <td> 61% </TD> <td> 39% </TD>    & nbsp;  </TR> </TABLE> </CENTER> Show results Web page Crash August Visitor Browser usage Analysis Month % of IE visitor % of NC visitor August 61% 39%