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:
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
Recommend
JS 9 Promise Interview Questions
Table of contents 1. Multiple .catch 2. Multiple ...
HTML meta usage examples
Example Usage Copy code The code is as follows: &l...
Web Design Experience: Self-righteous Web Designers
1. Trash or Classic? Web technology updates very ...
Common usage of hook in react
Table of contents 1. What is a hook? 2. Why does ...
Example code for using CSS to implement the style of logistics progress
Effect: CSS style: <style type="text/css&...
Reasons and solutions for prompting to save action after uploading files in form
The json data must be returned in html format That...
Solution to the problem of var in for loop
Preface var is a way to declare variables in ES5....
Installation and usage analysis of Portainer, a visual UI management tool for Docker
Portainer is an excellent Docker graphical manage...
Several ways to connect tables in MySQL
The connection method in MySQL table is actually ...
A brief discussion on the invalidation or implicit conversion of MySQL integer and string indexes
Table of contents Problem Overview Problem Reprod...
Linux CentOS6.9 installation graphic tutorial under VMware
As a technical novice, I am recording the process...
MySQL deduplication methods
MySQL deduplication methods 【Beginner】There are v...
Code to enable IE8 in IE7 compatibility mode
The most popular tag is IE8 Browser vendors are sc...
Detailed description of the life cycle of React components
Table of contents 1. What is the life cycle 2. Lo...
Detailed steps to install mysql5.7.18 on Mac
1. Tools We need two tools now: MySQL server (mys...