HTML表格显示的笔记

 

• 有时需要显示的复杂表头 
  如图所示 
  

<table id="" cellpadding="0" cellspacing="0" border="1">
  <thead id="thead">
    <tr >
        <th width="20px"  rowspan="2" >序号</th>
        <th width="20px"  rowspan="2" >编号</th>
        <th width="80px"  rowspan="2" >名称</th>
        <th width="70px" colspan="3" >苹果</th>
        <th width="70px" colspan="3" >香蕉</th>           
    </tr>

    <tr >
        <th width="70px">重量（Kg）</th>
        <th width="80px">单价（元/Kg）</th>
        <th width="80px">金额（元）</th>
        <th width="70px">重量（Kg）</th>
        <th width="80px">单价（元/Kg）</th>
        <th width="80px">金额（元）</th>
    </tr>
</thead>    
    <tbody id="tbody">
    </tbody>
</table>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

使用rowspan=”2” 来合并行单元格，使用colspan=”3” 来合并列单元格。

• 点击超链接时调用js方法

<a target="_blank" onclick=" addLog('首页','跳转','外面有双引号，里面可以使用单引号区别开','点击超链接时调用js方法')"
href="http://www.baidu.com">百度</a>

• 1
• 2

点击百度时，会调用addLog这个方法，并打开新窗口跳转到百度首页。