学习HTML(十)——HTML可用标签介绍

1)表格标签<table>
如果一个网页中只有图片、标题、段落,那可能看着比较单调,如果再加上一些表格数据,看着可能就比较
饱满了。而且在表格中不仅可以包含文本,也可以包含我们前几章提到的那些标签,比如图片、超链接等。通过
包含不同的内容,就可以使网页变得丰富多彩。
表格标签按照层层嵌套方式分为三层,首先定义表格结构<table></table>,在这两个标签内,我们可以定义
表格行<tr></tr>,tr是table row的缩写。每个tr标签内又可以包含多个td标签<td></td>,一个td标签相当于一个单
元格,如果有个多td的话,就相当于当前的行有多个列。
<table>标签有一个border属性,用于定义表格的边框,如果没有border属性,则表格就是没有边框,反之则
每个单元格都会被边框包围。
下面是一个简单的例子
<!DOCTYPE html>
<html>
<head><title>海贼王任务介绍</title></head>
<body>
<h3 style="color:red;text-align:center">草帽海贼团人物</h3>
<table>
<tr>
<td>路飞</td>
<td>索隆</td>
<td>乌索普</td>
<td>娜美</td>
<td>罗宾</td>
</tr>
<tr>
<td><img src="http://t12.baidu.com/it/u=910373783,361094217&fm=56" ,width=100,height=200 /></td>
<td><img src="http://t12.baidu.com/it/u=3623769914,4265082447&fm=56" ,width=100,height=200 /></td>
<td><img src="http://t10.baidu.com/it/u=120184296,1375367712&fm=56" ,width=100,height=200 /></td>
<td><img src="http://t3.baidu.com/it/u=1008847720,1344517186&fm=21&gp=0.jpg" ,width=100,height=200 /></td>
<td><img src="http://t12.baidu.com/it/u=4066531577,374745625&fm=56" ,width=100,height=200 /></td>
</tr>
</table>
</body>
</html>
 
  2)表格标签的另外一种结构
除了刚才介绍的三层结构外,一个<table>标签内部还可以分为三个部分:表头<thead></thead>,表主体<tbody></tbody>,
表的页脚<tfoot></tfoot>。我们在第一节中介绍的内容其实是在<tbody></tbody>内部。
下面是来自w2school的介绍:thead、tfoot以及tbody元素可以对表格中的行进行分组。当创建某个表格时,可以拥有一个标
题行,一些带数据的行和位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的
表格被打印时,表格的表头和页脚可以被打印在包含表格数据的每张页面上。
出了上面几个标签,还有一个<th>标签。表格中的数据分为两类:正常文本和标题文本。正常文本被<td></td>包围,标题文本
被<th></th>包围,标题文本是居中加粗加黑的。
 
 
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值