實(shí)現(xiàn)如下表格
分析:
該表格為五行四列回季,其中頭部包括兩行,內(nèi)容為兩行正林,最后一行為統(tǒng)計(jì)的內(nèi)容泡一;
??其中“名稱”、“2016-11-22”觅廓、“重量”鼻忠、“單價(jià)”、“小計(jì)”、“蘋果”帖蔓、“香蕉”矮瘟、“總價(jià)”均加粗可視為標(biāo)題,
??第一行中時(shí)間橫跨兩列塑娇,最后一行中“總價(jià)”橫跨三列澈侠;
??第一行的“名稱”豎跨兩行,最后一列中的“小計(jì)”豎跨兩行埋酬。
代碼內(nèi)容
<table border="1">
<theader>
<tr>
<th rowspan="2">名稱</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小計(jì)</th>
</tr>
<tr>
<th>重量</th>
<th>單價(jià)</th>
</tr>
</theader>
<tbody>
<tr>
<th>蘋果</th>
<td>3公斤</td>
<td>5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<th>香蕉</th>
<td>2公斤</td>
<td>6元/公斤</td>
<td>12元</td>
</tr>
</tbody>
<tfoot>
<th colspan="3">總價(jià)</th>
<td>27元</td>
</tfoot>
</table>
代碼分析:
通過colspan以及rowspan實(shí)現(xiàn)跨列和跨行哨啃;
??使用th標(biāo)簽達(dá)到加粗的標(biāo)題