HTML table to achieve complex header example code

Time:2020-9-13

Use HTML to make complex tables. Complex tables generally use two attributes of TD: rowspan and colSpan attribute values.

In HTML, the < td > tag defines the standard cells in the HTML table.

(1) The rowspan property specifies the number of rows a cell can span;

(2) The colSpan property specifies the number of columns a cell can span.

<html>   
<head>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    < title > multi header table   
</head>   
<body>   
<table id="tab" cellpadding="1" cellspacing="1" border="1">   
<tr>   
 < th rowspan = "2" > serial number < / th >
 < th rowspan = "2" > monitoring location < / th >
 < th rowspan = "2" > power supply path < / th >
 < th rowspan = "2" > supply voltage < / th >
 < th rowspan = "2" > load current < / th >
 < th rowspan = "2" > number of lightning strikes < / th >
 < th rowspan = "2" > last lightning strike time < / th >
 < th colSpan = "2" > backup protection air switch status
 < th rowspan = "2" > number of SPD damage < / th >   
 < th colSpan = "2" > output air switch status < / th >
</tr>   
<tr>   
 < th > grade B < / th > 
 < th > grade C
 < th > 1 way 
 < th > 2 routes  
</tr> 
<tr> <th rowspan="4">1</th>
</tr>  
<tr>   
    <th>1</th>   
    <th>78</th>   
    <th>96</th>   
    <th>67</th>   
    <th>98</th>   
    <th>88</th>   
    <th>75</th>   
    <th>94</th>   
    <th>69</th>   
    <th>23 </th>   
 <th>33 </th> 
</tr> 
<tr>
 < th colSpan = "2" > tips and suggestions   
    < th colSpan = "2" > intelligent lightning protection box status < / th >   
    < th colSpan = "2" > lightning protection box model < / th >   
    < th colSpan = "3" > lightning protection box serial number < / th >   
    < th colSpan = "2" > lightning protection box version < / th >
</tr>  
<tr>   
    It is suggested that the whole machine should be tested according to the regulations   
    < th colSpan = "2" > online < / th >   
    <th colspan="2">2018041201-035PF</th>   
    <th colspan="3">2018041201-256</th>   
    <th colspan="2">V1.0.0</th>   
</tr>    
</table>   
</body>   
</html>

design sketch:

HTML table setting no border, no split line

no border


<table id="tbl" border=1 width="80%" frame=void ></table>

The frame property specifies the rules for the border display. The following settings can be selected:

  • Void set no border;
  • Above only displays the top border;
  • Below only shows the bottom border;
  • Vsides only displays left and right borders;
  • Hsides only displays the top and bottom borders;
  • LHS only displays the left border;
  • RHS shows only the right border.

No split line


<table id="tbl" border=1 width="80%" rules=none ></table>

The rules attribute specifies the rules for displaying split lines. “None” indicates that there is no split line at all. In addition, “rows” and “cols” can be set. It is easy to mislead in literal sense. Here, it should be noted that: rows indicates that there is no split line between rows, that is, the data in the same row is not segmented; cols indicates that there is no split line between columns, that is, the data in the same column does not There are dividing lines.

This article on the HTML table to achieve complex header example code to introduce this, more related HTML table complex header content, please search the previous articles or continue to browse the related articles below, I hope you will support developeppaer more in the future!

Recommended Today

Oracle scheduled tasks

Timing task query To query Oracle scheduled tasks, you can use: –Scheduled tasks for all users SELECT * FROM dba_jobs; –Timing task of the user select * from user_jobs; In the query results, the what field generally stores the name of the stored procedure (or the specific stored procedure content). Broken = n indicates that […]