表格

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