Paste_Image.png
要完成此表格,主要是要使用table中的
<tr><td><caption><colspan><rowspan>及要將文字居中的格式.下面就來介紹一下有關table中的所包含的一些tag.
<table>:定義HTML文檔中的表格楞艾。
給表格設置邊框:<table border=”value”> (value可為1,2,3...)
<tr>:定義表格中的一行
<th>:定義表格中的表頭
<td>:定義表格中的一列
Paste_Image.png
<table border="1">
<tr>
<th>姓名</th>
<th>出生年月</th>
</tr>
<tr>
<td>張三</td>
<td>1991年7月</td>
</tr>
效果圖展示如下：
**-
<thead>:標簽定義表格的頁頭
<tbody>:標簽定義表格的主體
<tfoot>:標簽定義表格的頁腳
使用以上三種標簽可以劃分table表格，使代碼結構更加清晰拌蜘。
caption標簽:給表格設置標題榛泛，在<table>標簽內(nèi)添加標題靖诗。
colspan和rowspan分別設置表格的占用標準表格的幾行和幾列徐紧。
<table border="1">
<caption>購物車</caption>
<tr>
<td id="name" rowspan="2" align="center">名稱</td>
<td colspan="2">2016-11-22</td>
<td id="total" rowspan="2" align="center">小計</td>
</tr>
<tr>
<td align="center">重量</td>
<td align="center">單價</td>
</tr>
<tr>
<td>蘋果</td>
<td>3公斤</td>
<td>5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<td>香蕉</td>
<td>2公斤</td>
<td>6元/公斤</td>
<td>12元</td>
</tr>
<tr>
<td colspan="3" align="center">總價</td>
<td>27元</td>
</tr>
</table>
結果如下啦
Paste_Image.png
**-
Paste_Image.png
