效果圖
表格有用的屬性rowspan
础钠、colspan
浩峡、align
rowspan
是跨行屬性毙替,圖中的"名稱"就是跨了兩行岸售,rowspan="2"
就實(shí)現(xiàn)了跨兩行的功能。
colspan
是跨列屬性厂画,圖中"總價(jià)"跨了三列凸丸,colspan="3"
就實(shí)現(xiàn)了跨三列的功能。
在每個(gè)td
里設(shè)置align="center"
實(shí)現(xiàn)了單元格居中的樣式袱院。
源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p align="center">購物車</p>
<table border="1" align="center">
<tr>
<td align="center" rowspan="2">名稱</td>
<td align="center" colspan="2"><b>2016-11-22</b></td>
<td align="center" rowspan="2">小計(jì)</td>
</tr>
<tr>
<td align="center">重量</td>
<td align="center">單價(jià)</td>
</tr>
<tr>
<td align="center">蘋果</td>
<td align="center">3公斤</td>
<td align="center">5元/公斤</td>
<td align="center">15元</td>
</tr>
<tr>
<td align="center">香蕉</td>
<td align="center">2公斤</td>
<td align="center">6元/公斤</td>
<td align="center">12元</td>
</tr>
<tr>
<td align="center" colspan="3">總價(jià)</td>
<td align="center">27元</td>
</tr>
</table>
</body>
</html>