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
MySQL 5.7.19 installation tutorial under Windows 10 How to change the root password of MySQL after forgetting it
Take MySQL 5.7.19 installation as an example, fir...
Summary of the differences between Vue's watch, computed, and methods
Table of contents 1 Introduction 2 Basic usage 2....
How to update, package, and upload Docker containers to Alibaba Cloud
This time, we will try to package the running con...
A brief discussion on the design of Tomcat multi-layer container
Table of contents Container Hierarchy The process...
UDP DUP timeout UPD port status detection code example
I have written an example before, a simple UDP se...
Javascript closure usage scenario principle detailed
Table of contents 1. Closure 2. Closure usage sce...
Perfect solution to the problem of MySQL shutting down immediately after startup (caused by ibdata1 file corruption)
The mysql on a server in the computer room had be...
Introduction to the use of base link tag base
<br />When you click the link, the web page ...
Detailed explanation of CSS complex selectors and CSS font styles and color attributes
I have learned some basic selectors of CSS before...
MySQL count detailed explanation and function example code
Detailed explanation of mysql count The count fun...
How to reset Zabbix password (one-step)
Problem Description Since we don't log in to ...
Solve the mysql problem: Unable to continue code execution because MSVCR120.dll is not found
1. Problem The problems encountered when initiali...
Docker uses root to enter the container
First run the docker container Run the command as...
How to build a K8S cluster and install docker under Hyper-V
If you have installed the Win10 system and want t...
Vue login function implementation
Table of contents Written in front Login Overview...