Example code for implementing complex table headers in html table

Use HTML to create complex tables. Complex tables generally use two attributes of td: rowspan and colspan attribute values.

In HTML, the <td> tag defines a standard cell in an HTML table.

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

(2) The colspan attribute specifies the number of columns a cell can span.

<html>   
<head>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <title>Multiple header tables</title>   
</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 Strike</th>
 <th rowspan="2">Latest lightning strike time</th>
 <th colspan="2">Backup protection open state</th>
 <th rowspan="2">SPD damage quantity</th>   
 <th colspan="2">Output open state</th>
</tr>   
<tr>   
 <th>Class B</th> 
 <th>C-level</th>
 <th>1st Road</th> 
 <th>2nd Road</th>  
</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>   
    <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>   
    <th colspan="2">It is recommended that the whole machine be inspected according to the regulations</th>   
    <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>

Effect picture:

HTML Table settings without borders and dividing lines

Borderless

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

The frame attribute specifies the rules for border display. The available settings are as follows:

void Set no border;
above only displays the top border;
below only displays 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 Show only the right border.

No dividing line

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

The rules attribute specifies the rules for displaying dividing lines. "none" means no dividing line at all. You can also set "rows" and "cols". It is easy to be misleading just from the literal meaning. Please note here: rows means no dividing line between rows, that is, the data in the same row is not separated by a dividing line; cols means no dividing line between columns, that is, the data in the same column is not separated by a dividing line.

This is the end of this article about the sample code for implementing complex headers in html table. For more related content on complex headers in html table, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Introduction to possible problems after installing Tomcat

>>: 10 key differences between HTML5 and HTML4