"HTML" Table markers

When you design a Web page, you often use tables to organize page information, which divides the page into any number of rectangular areas, each of which can contain navigation, text, images, animations, and so on, and designers can put any page elements into it.

1. definition of the table:<table></table>

1) inserting a pair of <table></table> tags in a table where necessary, you can complete the insertion of the table. Definition tables are commonly used for tags that have

Label	Description
<table>	Table markers, for inserting tables
<tr>	row markers, for inserting rows
<td>	column tags, for inserting columns
<th>	Header tags for setting header information
<caption>	Table title, setting title

Instance:

Effect:
2) partition structure table
 dividing a structure table is a table of three parts, using three tags, respectively

 
 

  
  
 
   
 
    
Label
 
    
Description
 
   
 
   
 
    
<thead></thead>
 
    
Define a set of header rows
 
   
 
   
 
    
<tfoot></tfoot>
 
    
Add a callout to a table
 
   
 
   
 
    
<tbody></tbody>
 
    
Defining the body part of a table
 
   
 
  
 
 
2. Table Properties
 in the design of Web pages, it is often necessary to make some formatting settings on the table <table> in the Web page, which is done by setting the properties of the table tag.

 
 

  
  
 
   
 
    
Property name
 
    
Description
 
   
 
   
 
    
Width
 
    
Width of table
 
   
 
   
 
    
Border
 
    
Border thickness
 
   
 
   
 
    
Frame(8 attribute values)
 
    
Set the border style of a table
 
     
 
      
 
       
 
        
Property value
 
        
Description
 
       
 
       
 
        
void
 
        
Do not display borders
 
       
 
       
 
        
Border
 
        
Show Upper and lower borders
 
       
 
       
 
        
Above
 
        
Show Top Border
 
       
 
       
 
        
Below
 
        
Show Bottom Border
 
       
 
       
 
        
Hsides
 
        
Show top and bottom borders
 
       
 
       
 
        
Lhs
 
        
Show left Border
 
       
 
       
 
        
Rhs
 
        
Show right Border
 
       
 
       
 
        
Vsides
 
        
Show left and right border
 
       
 
      
 
     
 
   
 
   
 
    
rules(5 attribute values)
 
    
Set the properties of the inner border of a table
 
     
 
      
 
       
 
        
Property value
 
        
Description
 
       
 
       
 
        
All
 
        
Show all internal borders
 
       
 
       
 
        
None
 
        
Do not display internal borders
 
       
 
       
 
        
Groups
 
        
Display between row and column borders
 
       
 
       
 
        
Cols
 
        
Show Column borders only
 
       
 
       
 
        
Rows
 
        
Show only row borders
 
       
 
      
 
     
 
   
 
  
 
 
Instance:
Effect:
3. table row and Cell properties
        in the table, set the properties of a row in the table by <TR>  tag, using the <TD> the property of the  sets the properties of the table cell. 

 
   

  
    
 
     
 
      
Property name
 
      
Description
 
     
 
     
 
      
Align(3 attribute values)
 
      
Set the horizontal alignment of line content
 
       
 
        
 
         
 
          
Property value
 
          
Description
 
         
 
         
 
          
Left
 
          
Align Left
 
         
 
         
 
          
Right
 
          
Align Right
 
         
 
         
 
          
Center
 
          
Center Alignment
 
         
 
        
 
       
 
     
 
     
 
      
valign(4 attribute values)
 
      
Set the vertical alignment of line content
 
       
 
        
 
         
 
          
Property value
 
          
Description
 
         
 
         
 
          
Top
 
          
Top Align
 
         
 
         
 
          
Middle
 
          
Center Alignment
 
         
 
         
 
          
Bottom
 
          
Bottom alignment
 
         
 
         
 
          
Baseline
 
          
Baseline
 
         
 
        
 
       
 
     
 
     
 
      
RowSpan
 
      
Set the cross-row, which is the vertical merging of cells
 
     
 
     
 
      
colspan
 
      
Set a cross-column, which is a horizontal merge of cells
 
     
 
    
 
   
Instance:
Effect:
4. use of multiple tables
       The  table can be nested to represent a hierarchical relationship, <TABLE>  tag after inserting the table, you can <TD></TD>  and insert <TABLE>  To insert a table in a cell, or to use multiple sibling tables at the same time, there are two commonly used properties for easy table layout and landscaping. 

 
    
 
  
     
 
      
 
       
CellSpacing
 
       
Set spacing for cells
 
      
 
      
 
       
cellpadding
 
       
Set the spacing between the contents of a cell and the border
 
      
 
     
 
 
    
Summary:
 table is a very simple page layout tool, its application makes the Web page simple and intuitive, and more convenient to read. Master the relevant attributes of the main table tag to improve productivity
"HTML" Table markers