轉自:https://blog.csdn.net/hht006158/article/details/79913765
使用html做復雜的表格。復雜表格一般是用到td的兩個屬性:rowspan 、colspan屬性值。
在html中<td> 標簽定義 HTML 表格中的標准單元格。
(1)rowspan 屬性規定單元格可橫跨的行數;
(2)colspan 屬性規定單元格可橫跨的列數。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多表頭表格</title> </head> <body> <table id="tab" cellpadding="1" cellspacing="1" border="1"> <tr> <th rowspan="2">序號</th> <th rowspan="2">監測位置</th> <th rowspan="2">供電通路</th> <th rowspan="2">供電電壓</th> <th rowspan="2">負載電流</th> <th rowspan="2">雷擊次數</th> <th rowspan="2">最近一次雷擊時間</th> <th colspan="2">后備保護空開狀態</th> <th rowspan="2">SPD損害數量</th> <th colspan="2">輸出空開狀態</th> </tr> <tr> <th>B級</th> <th>C級</th> <th>1路</th> <th>2路</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">提示建議</th> <th colspan="2">智能防雷箱狀態</th> <th colspan="2">防雷箱型號</th> <th colspan="3">防雷箱序列號</th> <th colspan="2">防雷箱版本</th> </tr> <tr> <th colspan="2">建議整機按規程檢測</th> <th colspan="2">在線</th> <th colspan="2">2018041201-035PF</th> <th colspan="3">2018041201-256</th> <th colspan="2">V1.0.0</th> </tr> </table> </body> </html>
效果: