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>标签内添加标题。
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
