HTML5背景颜色表格作业,HTML快速入门5——不规则表格、表格背景、边框颜色

不规则表格

例子：

1,1	1,2	1,3
2,1 2,2	2,3

显示：

1,1

1,2

1,3

2,1 2,2

2,3

说明：

colspan是col span，=2意思是该格占两列。随后的

就变成第三列了。

例子：

1,1	1,2 2,2	1,3
2,1	2,3

显示：

1,1

1,2

2,2

1,3

2,1

2,3

说明：

rowspan和colspan完全类似，=2表示该格占两行。

注意第二行第一个td是2,1而第二个td就是2,3了，2,2被第一行的占去了。

然后大家很容易举一反三了，多么不规则的表格都可以画出来了。

不知道大家是如何设想来实现不规则表格的呢？(这是上课的思考题呦)

是不是觉得很奇妙，就这么简单的实现了！？

而且表格同样符合嵌套规则，比如：

其他文字１ 标题一 标题二 其他文字２

其他正文

显示：

其他文字１

标题一

标题二

其他文字２

其他正文

而且一般来说用表格嵌套更简单些，colspan,rowspan相对复杂一些。

 将border=0会隐藏表格线，就可以实现排版了，实际上象新浪网易这些站点的首页都是用表格排版的。

今天内容相对比较少，顺便再把表格的背景颜色讲一下

表格背景、边框颜色

例子：

文字

显示：

文字

聪明的学生马上又可以举一反三了，table有，那tr呢？td呢？

当然也有！

例子：

文字１	文字２
文字３	文字４

显示：

文字１

文字２

文字３

文字４

爱动脑筋的学生可能已经想过如何改变文字背景颜色的问题了。

实际上在引入style(我们会在比较后面讲述他)之前，

用表格几乎是唯一能改变文字背景颜色的方法。

上面的边框颜色显然不太好。可以改一改。

例子：

文字

显示：

文字

练习题

尝试用新学的table属性，并结合以前学的，设计一些你想象中的简单的页面。

思考题

回顾一下已经学过的东西，想想你现在都可以做什么了？

基本的外表设计都讲到了，大家发现没有，直到现在所有学的似乎更象MS WORD的功能，而网上一些特有的东西似乎都没提到。

其实一点都不用奇怪，下一代的WORD很有可能直接用类似HTML的XML来保存文件。你该知道HTML一个重要的用途就是用简单的纯文本来表达复杂的界面。

下一课我们将接触WWW的核心——连接。

似乎今天的内容多了？不让大家交作业，可是学生们该反馈一些信息呀。

比如进度快了慢了？内容深了浅了？有什么感想感触？

我很想知道大家是在硬着头皮学，还是满怀着兴奋和激情？

AngularJS快速入门指南08：表格

ng-repeat指令非常适合用来显示表格. 在表格中显示数据 在AngularJS中显示表格非常容易:

AngularJS快速入门指南09：SQL

我们可以将之前章节中的代码用来从数据库中读取数据. 通过PHP Server从MySQL数据库中获取数据

AngularJS快速入门指南07：Http对象

$http是AngularJS提供的一个服务,用来从远程服务器读取数据. 提供数据 下面的数据由Web服务器提供: { "records": [ { "Name&quot ...

AngularJS快速入门指南01：导言

AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...

解决百度Ueditor编辑器表格不显示边框问题

一.主要内容 CMS使用百度Ueditor编辑器中的表格功能,在编辑模式下可以正常显示边框,而文章发布之后表格不能显示边框.本博文经过查阅相关资料,最终解决了该问题. 二.使用平台 1. dedecm ...

Jqgrid入门-显示基本的表格(一)

首先对Jqgrid网格插件做个简要的说明.在众多的表格插件中,Jqgrid的特点是非常鲜明的.         特点如下: 完整的表格呈现与运算功能,包含换页.栏位排序.grouping.新增.修改及 ...

Bootstrap入门(四)表格

Bootstrap入门(四)表格

element table 表格 修改背景为透明并去除边框

.el-table{ /* 表格字体颜色 */ color:white; /* 表格边框颜色 */ /* border: 0.5px solid #758a99; */ height: 500px; ...

Bootstrap入门(2)表格

Bootstrap入门(四)表格

随机推荐

动画--android图片点击放大动画，并遮挡旁边的控件

http://blog.csdn.net/s13488941815/article/details/40649823: 首先是点击放大可以使用android自带的缩放动画,因为要遮盖其他控件,就需要控 ...

a与a:link、a:visited、a:hover、a:active