- html5表格标签
- 表格
- 2019-01-09第三天
- 2015年11月5日
- 2018-11-28
- 第5单元 个性月历
- 零基础Web前端开发(5)
- html基础
- HTML基础
- 2-12. 表格标签中的其他标签
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
网友评论