html基础学习第十节-表格定义深入讲解第二讲

上两节课,我们说了表格的定义和深入的讲解,这一课,我们继续上一课未讲完的表格定义的其他部分以及一些用法

前面所有的表格,其实仅仅用了三个单词,table,td和tr,其他的都是以前学过的定义方法的套用,呵呵,下面我们来学学三个新的定义单词,分别是<thead>,<tbody>和<tfoot>,这三个分别对应定义标头,主题和脚注三个部分,另外还有<th>表示行头,下面我们来看一组代码

<table width="400" border="1" align="center">
<thead>
<tr>
<th colspan="2">产品</th>
<th colspan="2">描述信息</th>
</tr>
<tr align="center">
<td>公司</td>
<td>编号</td>
<td>用途</td>
<td>价格</td>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2">A</th>
<td>A1</td>
<td>中端客户</td>
<td>100.00</td>
</tr>
<tr>
<td>A2</td>
<td>低端客户</td>
<td>50.00</td>
</tr>
<tr>
<th rowspan="2">B</th>
<td>B1</td>
<td>中端客户</td>
<td>100.00</td>
</tr>
<tr>
<td>B2</td>
<td>低端客户</td>
<td>80.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">备注:该表统计于XX年XX月XX日</td>
</tr>
</tfoot>
</table>

这里大家看到没有,在某个行标记tr的两边,用<thead>,<tbody>和<tfoot>定义起来,这三个部分就是定义了标头,主体和脚注这三块,这个定义只需要记住这三个单词,然后套用即可,呵呵,这里需要大家灵活的去运用了哦,然后看看A和B这两个地方,分别用th标记定义起来,这里表示行头,明白了吧?效果如下,对比一下就明白了!

产品 描述信息
公司 编号 用途 价格
A A1 中端客户 100.00
A2 低端客户 50.00
B B1 中端客户 100.00
B2 低端客户 80.00
备注:该表统计于XX年XX月XX日

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

目前评论:5   其中:访客  4   博主  0   引用   1

  1. avatar Jr 4

    抢到个沙发,睡觉去了

    • avatar yumanutong 5

      @Jr 额,谢谢…

  2. avatar 象牙塔 4

    坐坐板凳,睡觉去了……

    • avatar yumanutong 5

      @象牙塔 吐血啊有人放广告,我给XX了先

评论加载中...

来自外部的引用: 1

  • SDT技术网文章索引-四月份 | yumanutong blog

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情