html -table 實現復雜表頭


轉自: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>

效果:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM