返回列表 发新帖
楼主: 静雅 - 

网络教程六《在HTML编辑模式下制作表格之完全篇》

[复制链接]

605

主题

1万

帖子

2万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
20340
发表于 2004-9-2 23:15:35  | 显示全部楼层
以下是引用靓妈妈在2004-4-28 20:31:56的发言:黑马我按你的说明把我的图片放进去,可为什么终是错的呀!请教。。。
黑马我按你的说明把我的图片放进去,可为什么终是错的呀!请教。。。

<img src="图片地址">一句必须放在<td>……</td>之间,并注意用换行符(<br>)或段落标志符(<p></p>)将图片与文字隔开。 ---------------------------------------------- 欢迎光临黑马在线动力 交互版 精华版

★★★∈∈∈忘忧岛岛主∝∝∝★★★

回复

使用道具 举报

605

主题

1万

帖子

2万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
20340
发表于 2004-9-2 23:17:22  | 显示全部楼层

背景色:bgcolor=#000000 暗边框颜色:#008000 亮边框颜色:#008060

[此贴子已经被作者于2004-6-15 20:24:56编辑

★★★∈∈∈忘忧岛岛主∝∝∝★★★

回复

使用道具 举报

605

主题

1万

帖子

2万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
20340
发表于 2004-9-2 23:17:50  | 显示全部楼层
第五讲:表格的嵌套(二) 先来看看以下表格:
你应该可以看得出来,上表中有一个一级表格(父表格),里面有两个二级表格(子表格),二级表格一上一下,位置十分清楚。如果你愿意,你还可以在二级表格里再嵌套次级别的表格。 现在我们来看代码,每一种颜色的文字代码一个表格的完整代码,注意观察起始标识符号的前后关系。 <table border=6 bordercolor=#888888 width="100%"> <tbody><tr><td> <table border=5 bordercolor=#ffcc00 width="100%" height=200> <tbody><tr><td></td></tr></tbody> </table> <table border=5 bordercolor=#ffcc00 width="100%" height=200> <tbody><tr><td></td></tr></tbody> </table> </td></tr></tbody> </table> 这种方式的嵌套可以让你有更多的创意,比如,上面的二级表格里放置一个背景图并用透明Flash动画来修饰它,下面一个表格里放置滚动图文,总之,发挥你的想象力,充分利用这种格式制作出令人赞叹的效果来! ---------------------------------------------- 欢迎光临黑马在线动力 交互版 精华版

★★★∈∈∈忘忧岛岛主∝∝∝★★★

回复

使用道具 举报

605

主题

1万

帖子

2万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
20340
发表于 2004-9-2 23:18:34  | 显示全部楼层

点击美女,支持论坛,嘿嘿嘿......

----------------------------------------------

★★★∈∈∈忘忧岛岛主∝∝∝★★★

回复

使用道具 举报

605

主题

1万

帖子

2万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
20340
发表于 2004-9-2 23:19:33  | 显示全部楼层

朋友是一种相遇

朋友是一种相助

笑看花落

★★★∈∈∈忘忧岛岛主∝∝∝★★★

回复

使用道具 举报

605

主题

1万

帖子

2万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
20340
发表于 2004-9-2 23:19:55  | 显示全部楼层
第五讲:表格的嵌套(三)
与上一讲的嵌套效果相比,我们可以明显地看到:上面表格中的两个二级表格是并列放在父表里的。如何做到这个效果呢? 首先,在父表格里,我们用两次“<td>……</td>”将父表分隔成左右各一半,即父表是一个有一行两列的表格。其次,我们在父表的左、右单元格里分别放置一个表格,就形成了以上效果。请研究以下代码清单,为了区分层次,黑马把每一个表格的代码用一种颜色表示,请特别注意父表的代码: <TABLE borderColor=#ccffcc width="100%" border=4> <TBODY> <TR> <TD width="50%"> <TABLE borderColor=#666666 height=300 width="100%" border=4> <TBODY><TR><TD></TD></TR></TBODY> </TABLE> </TD> <TD width="50%"> <TABLE borderColor=#666666 height=300 width="100%" border=4> <TBODY><TR><TD></TD></TR></TBODY> </TABLE> </TD> </TR></TBODY> </TABLE> 上述代码里,黑马定义了二级表格的高度,在实际使用中,你可以根据情况定义或不定义,但要注意两个子表格的高度要一致,否则就很难看。此外,表格的border值要不要应该根据实际需要而定,黑马之所以定义为4,是为了使效果更加明显。 表格是HTML文档里的元素之一,它还可以是容器,因此,表格里甚至是表格的单元格里又有表格是正常的,我们就是充分利用这一特点来装饰我们的文档(或贴子)。 第五讲的三个讲义专门研究了表格嵌套,嵌套原理到嵌套格式及嵌套方法我们都应该学会了。讲义里的例子是简单的,但它们已经将表格的嵌套结构展示完毕,在这个基础上,我们可以制作出复杂而美观的贴子来。所有多层次嵌套及嵌套中的嵌套都是通过一个又一个简单的嵌套来实现的,这就看你的了。
[此贴子已经被作者于2004-4-30 12:22:13编辑过]
---------------------------------------------- 欢迎光临黑马在线动力 交互版 精华版

★★★∈∈∈忘忧岛岛主∝∝∝★★★

回复

使用道具 举报

605

主题

1万

帖子

2万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
20340
发表于 2004-9-2 23:20:24  | 显示全部楼层

好好学习 天天向上 这里真棒 嘻嘻哈哈
哈哈。。。今天有幸坐第一排.
[此贴子已经被作者于2004-4-30 14:16:38编辑过]

★★★∈∈∈忘忧岛岛主∝∝∝★★★

回复

使用道具 举报

605

主题

1万

帖子

2万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
20340
发表于 2004-9-2 23:21:16  | 显示全部楼层
节 日 快 乐

开心橄榄祝黑马老师节日快乐

开心橄榄的习作
----------------------------------------------

★★★∈∈∈忘忧岛岛主∝∝∝★★★

回复

使用道具 举报

605

主题

1万

帖子

2万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
20340
发表于 2004-9-2 23:22:45  | 显示全部楼层
谢谢黑马老师,谢谢左右手老师

请问老师,表格的上下为什么会留出那么一大截呢?这不是很不好看?

★★★∈∈∈忘忧岛岛主∝∝∝★★★

回复

使用道具 举报

605

主题

1万

帖子

2万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
20340
发表于 2004-9-2 23:23:05  | 显示全部楼层

代码有几处错误,另有几处空格代码,还用上了<br>强制换行(这些可能是系统自动更正造成的)。修改过的代码清单如下: <TABLE borderColor=#000080 border=8> <TBODY><TR><TD> <TABLE borderColor=#ff0000 width="100%" border=8> <TBODY><TR><TD> <TABLE borderColor=#0099cc width="100%" border=8> <TBODY><TR><TD> <TABLE borderColor=#ffff00 width="100%" border=8> <TBODY><TR><TD> <P ALIGN=CENTER><IMG src="http://znrs.2000y.net/uploadFace/3238_2004511053688876.jpg"> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR> </TBODY> </TABLE>
[此贴子已经被作者于2004-5-1 18:26:42编辑过

★★★∈∈∈忘忧岛岛主∝∝∝★★★

回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
关于我们
友情链接
联系我们
帮助中心
网友中心
购买须知
支付方式
服务支持
资源下载
售后服务
定制流程
关注我们
官方微博
官方空间
官方微信
快速回复 返回顶部 返回列表