html 第4章 表格table基本格式和使用方法

[复制链接]
ARCHY明星会员实名认证 发表于 2012-7-16 09:33:00 [html] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
在网页中表格是一种经常使用到得设计结构,早期没有DIV+CSS的时候,网站就都是使用table来制作的,所有在HTML 中可以使用的数据,都可以被设置在表格中,所以有关表格设置的标记与属性也特别多,今天的内容包含:1.表格的基本格式;2.<table>标签下的常用属性;3.<table>标签下的边框设置;4.<tr><th><td>标签下的常用属性;5.拆分与合并单元格;6.表格的结构化、直列化、标题;7.表格的嵌套。

一、表格的基本格式

格式:
  1. <table>
  2. <tr><th>… </th><th>… </th><th>… </th></tr>
  3. <tr><td>… </td><td>… </td><td>… </td></tr>
  4. </table>
复制代码
功能:
<table>…</table>用来声明表格开始与结束;
<tr>…</tr>用来设置表格的行;
<th>…</th>用来设置标题栏位;
<td>…</td>用来设置数据栏位。


二、<table>标签下的属性

属性名称    属性值      说明
border     像素       设置表格的边线
cellspacing   像素       绝对设置,存储格框线宽度
        百分比      相对设置,存储格框线宽度
cellpadding   像素       绝对设置,数据与框线的距离
        百分比      相对设置,数据与框线的距离
width     像素       绝对设置,像素表示表格宽度
        百分比相对设置  百分比表表格宽度
height     像素       绝对设置,像素表示表格宽度
        百分比      绝对设置,百分比表表格宽度
align      left       表格往左靠(默认)
        center      表格往中靠
        right       表格网右靠
bgcolor    英文/十六     表格的背景颜色
background   URL      表格的背景图片
summary   字符串      用来描述表格数据说明
bordercolor   英文/十六     边框的颜色
bordercolorlight 同上      边框的亮色
bordercolordark  同上      边框的暗色

三、 <table>标签下的边框设置

属性名称   属性值   说明
frame     void    不要显现表格的边线
       above   只要显现出表格的上边线
       below    只显现出表格的下边线
       hsides    只显示表格的上下边线
       vsides    只显现表格的左右边线
       lhs     只显现表格的左边线
       rhs     只显现表格的右边线
       border/box  会显现出表格的所有边线
       rules rows  只显示出横行的格框线
       cols     只显示出直行的格框线
       all      显示全部格框线
       groups    表示列组合水平部分
       none    不显示任何格框线

四、 <tr><th><td>标签下的常用属性

该属性必须在border的属性值不为0 的状态下!

属性名称     属性值   说明
width       像素    绝对设置,以像素值设置宽
         百分比   相对设置,以百分比设置宽
height       像素   绝对设置,以像素值设置高
         百分比   相对设置,以百分比设置宽
bgcolor      英文/十六  数据栏的颜色设置
align(水平方向)    left     数据靠左
         center    数据靠中
         right     数据靠右
valign(垂直方向)   top     数据靠上
         middle    数据靠中
        bottom    数据靠下
        nowrap    无在单元格中换行

五、拆分与合并单元格

属性名称  属性值  说明
colspan   数字   向两边扩展栏位
rowspan   数字   向下扩展栏位

六、表格的结构化、直列化、标题

1、结构化格式:
  1. <table>
  2. <thead>……</thead> --------表头区
  3. <tbody>……</tbody> --------表体区
  4. ………………………
  5. <tfoot>……</tfoot> --------表尾区
  6. </table>
复制代码
2、直列化格式:<colgroup>….</colgroup>

属性名称  属性值   说明
align    left     靠左
      center   靠中
      right    靠右
valign    top    靠上
      middle   靠中
      bottom   靠下
      span    数字直列数目
width   像素/百分比  宽度

个别直列设置

格式:<col>

功能完全和<colgroup>一样。

3、表格的标题:
  1. <table>
  2. <caption>….</caption>
  3. </table>
  4. <caption>
复制代码
相关的属性值有:
属性名称  属性值  说明
align    top    标题在表格上方
      bottom  标题在表格下方

七、嵌套表格的应用: 看下图

嵌套表格的应用

嵌套表格的应用


作业:做一个简单的嵌套表格的页面,最好可以添加背景颜色和背景图片来美化下。作业不会的话可以参考Dreamweaver视频教程8:用Dreamweaver制作表格和Dreamweaver视频教程9:表格的应用排版

推荐阅读:

第1章 XHTML 学前准备

第2章 HTML 基本结构

第3章 排列清单UL控制标记

第5章 图像 -- 背景图片 插入图片等

第6章 超链接 a标签的使用

第7章 表单from的功能结构

第8章 Flash MP3等多媒体的结构和使用

第9章 其他标记marquee、脚本和meta
参与人数 1帮币 +1 收起 理由
iEamon + 1 很给力!

查看全部评分总评分 : 帮币 +1





上一篇:第3章 排列清单控制标记
下一篇:第5章 图像 -- 背景图片 插入图片等

大神点评14

 发表于 2012-7-16 17:43:46
好人呀 方便那些新手学习
 发表于 2012-7-16 17:43:47
转播微博
设计专用 发表于 2012-9-18 17:49:38 [html] 显示全部楼层
本帖最后由 设计专用 于 2012-9-18 17:55 编辑

做了个小作业,表格里面没问题,但我设置的背景图片怎么就不见显示出来呢,求助楼主,附图一张,看看我的代码里哪有错的


QQ截图20120918174525.png
迅维网:www.chinafix.com.cn 中国最大的电脑维修论坛
rstar 发表于 2012-12-7 20:17:56 [html] 显示全部楼层
设计专用 发表于 2012-9-18 17:49
做了个小作业,表格里面没问题,但我设置的背景图片怎么就不见显示出来呢,求助楼主,附图一张,看看我的代 ...

你好认真的啊。。。
www.ycbbs.net  www.0359rencai.com www.0359fdc.com   www.yc115.com
设计专用 发表于 2012-12-17 17:53:16 [html] 显示全部楼层
rstar 发表于 2012-12-7 20:17
你好认真的啊。。。

过奖过奖,想学点知识就支认真点
迅维网:www.chinafix.com.cn 中国最大的电脑维修论坛
小怪头 发表于 2012-12-26 10:04:40 [html] 显示全部楼层
设计专用 发表于 2012-9-18 17:49
做了个小作业,表格里面没问题,但我设置的背景图片怎么就不见显示出来呢,求助楼主,附图一张,看看我的代 ...

看看  看看 没发现你代码有问题啊
anyta 发表于 2012-12-30 00:08:59 [html] 显示全部楼层
顶帖
光影 发表于 2013-2-3 16:59:17 [html] 显示全部楼层
  1. 沙发沙发
复制代码
www.whrailway.com  出售3K
155120 发表于 2013-2-17 17:13:26 [html] 显示全部楼层
精选视频教程大全》》》http://www.csdn123.com/html/2013/netfriend_0216/222059.html
cjoyren 发表于 2013-5-8 09:50:31 [html] 显示全部楼层
设计专用 发表于 2012-9-18 17:49
做了个小作业,表格里面没问题,但我设置的背景图片怎么就不见显示出来呢,求助楼主,附图一张,看看我的代 ...

可能是中文路径的关系 试试看把 图片放在纯英文的路径下
iEamon 发表于 2014-12-16 15:00:41 [html] 显示全部楼层
第二点的table标签属性名称height,应该是是高度,而不是宽度。不懂英文的同学,可自行尝试操作。
iEamon 发表于 2014-12-16 16:26:33 [html] 显示全部楼层
交作业,毕竟是2012年的,w3c检查十几处提示标签的属性值是过时的,要用CSS表现。
dw.png
可乐鸡腿堡 发表于 2015-11-11 14:16:33 [html] 显示全部楼层
这个有点难
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表