码迷,mamicode.com
首页 > 其他好文 > 详细

表格标签的详解

时间:2016-04-04 17:58:20      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:

表格标记

表格是有行、有列。作用:显示表格类的数据。

文字、图片、表格套表格

一个表格的结构:

图示:以下是一个两行四列的一个表格

名称

苹果

价格

6

总价

12

?

?

语法结构:

<table>

<caption>表格的标题</caption>

????<tr>

????????<th></th>

<th></th>

<th></th>

<th></th>

</tr>

????<tr>

????????<td></td>

<td></td>

<td></td>

<td></td>

</tr>

</table>

<table>的常用属性

Width:设置表格宽度

Height:设置表格的高度

Border:表格边线的粗细

Bordercolor:设置表格边框线的颜色

Align:设置表格的对齐方式:left左对齐 right右对齐 center居中对齐

bgColor:设置表格的背景色

background:URL 设置表格的背景图片

Cellpadding:内填充。用于设置单元格与内容之间的距离(内填充),属性值可为整数的像素值或百分比值

技术分享

cellspacing::外填充。用于设置单元格与单元格之间的距离,属性值可为整数的像素值或百分比值

技术分享

?

<tr>的常用属性

技术分享

技术分享

<td>或<th>的常用属性

学生信息登记表

?

姓名

性别

年龄

身高

小明

18

180

老王

30

175

th在显示上的效果区别是:

?

合并单元格

?

<caption>表格标题

描述:<caption>是给一个表格增加一个标题

格式:<caption>内容</caption>

说明:

????<caption>标记是<table>的子标记;

????<caption>应该紧跟表格的开始标记,在所有的行之前的位置;

????一个表格只有一个<caption>

thead、tbody、tfoot

可以使用火狐浏览器里面的firebug工具查看:

thead、tbody、tfoot

作用:对表格进行逻辑上的划分。

thead、tfoot 以及 tbody标签实现一个表格示例,这三个标签分别代表表格的头部(th)、主体、和底部,能让表格更加语义化的同时,也能让我们更加方便的控制表格的表现

技术分享

人为划分演示代码:

技术分享

?

firebug工具解析后的显示效果如下:

技术分享

练习:

技术分享

分析

综合:

技术分享

技术分享

?

效果:

技术分享

表格标签的详解

标签:

原文地址:http://www.cnblogs.com/nyxd/p/5352405.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!