目標(biāo)效果
目標(biāo)效果
html標(biāo)簽
- <tr>標(biāo)簽定義表格中的一行
- <th>標(biāo)簽定義表格中的表頭
- <td>標(biāo)簽定義表格中的一列
- <thead>標(biāo)簽定義表格的頁頭
- <tbody>標(biāo)簽定義表格的主體
- <tfoot>標(biāo)簽定義表格的頁腳
- rowspan和colspan屬性分別設(shè)置表格的占用標(biāo)準(zhǔn)表格的幾行和幾列
詳細(xì)的教程請點(diǎn)擊這里：HTML Table學(xué)習(xí)
實(shí)現(xiàn)代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table border="1">
<caption>購物車</caption>
<thead>
<tr>
<td rowspan="2">名稱</td>
<td colspan="2">2016-11-22</td>
<td rowspan="2">小計</td>
</tr>
<tr>
<td>重量</td>
<td>單價</td>
</tr>
</thead>
<tbody>
<tr>
<th>蘋果</th>
<th>3公斤</th>
<th>5元/公斤</th>
<th>15元</th>
</tr>
<tr>
<th>香蕉</th>
<th>2公斤</th>
<th>6元/公斤</th>
<th>12元</th>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">總價</td>
<td>27元</td>
</tr>
</tfoot>
</table>
</body>
</html>
