HTML&CSS Table元素详细解说

1.预热

css样式多如牛毛,我不可能一个一个去讲,那样好像背字典一样,我相信你们也不喜欢这样的方式。所以,我会在实战中慢慢和你讲解,然后,你记住一些重要的css属性就可以了。关键是,你要学会去查资料,最好的查资料方法,不是那种去W3C School上,一页一页看过去,那样的话不知道要看到什么时候,而是应该去看一些网页的源码,看看他们的网页是怎么做起来的,用了哪些css属性?这里面,肯定有很多css属性你连见都没见过,我的建议是,先大概去猜一下,然后用浏览器的F12调试功能去倒腾倒腾。不需要你对每一个css属性都了如指掌,你只要大概理解意思,然后掌握一些基本的css属性就可以了。普通的网页能自己画出来,复杂的网页能从别的地方拷贝过来,并且看懂,就可以了。

那么今天呢,我带大家用table来做一个简单的demo,通过一个具体的例子,来看一下table怎么用?首先,打开Eclipse,新建一个HTML页面。

1489021441090048056.png

首先,我们要在body区域弄出个空间来,专门存放这个table。之前我们都是直接在body上面弄的,而事实上,在实际开发中是不会这么做的。好的,我们来一个div元素,加一个class叫做wrap,wrap表示包裹,我们需要一个div来包裹table。

接着,在head元素上挂载一个style元素,专门用来设置样式表。接着,给wrap设置一点点样式。

效果:

如何让这个div元素居中呢?是不是只要让它左右两边的margin自适应就OK了呀?OK,我们加上:

哇,是不是有了,太棒了。现在我做一个事情,看好,我把wrap变成span元素,会怎样?

看效果哈:

卧槽,画风突变,这是什么情况?对了,span是什么元素啊,是不是行内元素啊。我们给一个行内元素设置宽度和高度是没有效果的。所以就变成了这样,那么,怎么办呢,我们需要把span强制转换成块级元素,是不是就好了呀?

效果:

2.编写工具类样式文件 tool.css

在刚才的例子中,我们把一个div元素或者span元素都相对于父元素居中显示了,我现在请问一下大家,在实际开发中,让一个元素相对于父元素居中显示,这样的需求是不是很常见呀?

那有没有什么办法,让我们下次再遇到这个需求的时候,直接用起来就行了呢?答案肯定是有的,我们可以封装一个通用的工具类,然后把一些经常要用到的样式放进去,就OK了。现在我们来编写一个tool.css工具类。

1489026181387098368.png

引入这个css:

然后,在span元素上绑定对应的class:

这样就OK啦。

3.终于开始画table了

现在,我们开始画一个table,比如来一个一行三列的table:

为了看出效果,我们需要另外给这个table元素,tr和td元素设置样式:

刷新页面:

就这样,一个简单的table就画好咯~

4.合并单元格

既然学table,肯定会遇到一个问题,那就是怎样合并单元格呢?

比如,我希望在第二列和第三列下面增加一行,怎么办?很简单,我只需要在后面再写一个tr,里面有两个td:

这个tr希望和它平级:

可惜效果不对,这一行被挤下来了,原因很简单,因为第一列没有占据两行,所以如果我们硬是在后面添加一行,就会被挤下来。解决方法,是在第一列的td元素上,绑定一个rowspan属性,设置为2:

1489026700715061544.png

这样就可以了吧,这就是所谓的行合并,那么怎样列合并呢?

如图,我在</tr>下面重新写了一个tr,这表示重起一行,然后,挂载一个td元素,并且绑定colspan属性,这个属性的含义就是列合并。

各位,再看一下之前的这个例子,是不是一共有三列啊,那么我就colspan=3,表示合并三列,效果:

还有个问题,这个table没有默认占满父容器,那么我就得手动设置它的width为100%:

1489027220387037348.png

这样是不是就好了呀?

5.画一张请假单?

接下来我们加快一点进度,来做一个请假单吧。我们把颜色调成黑色。

再添几行:

把文字填进去:

最后是班主任审批:

效果:

这样就有一个问题,对于领导批示,宽度应该比较窄才会比较好看,可是现在的话明显太宽了,有没有什么办法呢?第一个想到的,肯定是给它设置宽度:

刷新页面,无效,这又是什么原因呢?原来,现在我们每一行是三列,第一列就只能这么宽,除非我们给它多加一列。

这表示给第一行第一列设置列合并为2,那么每一行就有了4列。一共有几列是以第一行为准的。这样一来,下面这几个地方也要跟着改:

最后,手动调一个高度出来:

接着,就好像撘房子一样,房子搭好了,就可以把一些辅助工具撤销掉了,比如border。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏AzMark

Python 学习之 Tkinter「下」

2195
来自专栏逸鹏说道

Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)

如果要语法高亮就在```后面加小写语言名,eg:html,css,javascript,python,cs(csharp)等等

56811
来自专栏阮一峰的网络日志

如何做到 jQuery-free?

jQuery是现在最流行的JavaScript工具库。 据统计,目前全世界57.3%的网站使用它。也就是说,10个网站里面,有6个使用jQuery。如果只考察使...

3204
来自专栏python成长之路

Pygame常用方法

6085
来自专栏Windows Community

New UWP Community Toolkit - RotatorTile

概述 UWP Community Toolkit  中有一个为图片或磁贴提供轮播效果的控件 - RotatorTile,本篇我们结合代码详细讲解  Rotato...

3138
来自专栏九彩拼盘的叨叨叨

jQuery 最佳实践(译)

原文 http://shichuan.github.io/javascript-patterns/#jquery-patterns

753
来自专栏技术博客

Knockout.Js官网学习(创建自定义绑定)

你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等)。你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定。例如,你可...

1104
来自专栏Google Dart

AngularDart Material Design 选择 顶

可以手动(在模板中)或通过SelectionOptions实例指定选项。 可以通过模板或通过检查选择模型将选项标记为已选择。

1122
来自专栏更流畅、简洁的软件开发方式

表单控件续(1)——应用接口来简化和分散代码

上次有点仓促,有几个地方没有明确。 后者是整个流程,前者是其中的一个步骤,是一个简单的思路说明,其中前三段代码都是表单控件里面的。 2、我要写的是一个表单控...

2059
来自专栏王磊的博客

史上最易懂——ReactNative分组列表SectionList使用详情及示例详解

React Native系列 《逻辑性最强的React Native环境搭建与调试》 《ReactNative开发工具有这一篇足矣》 《解决React N...

90414

扫码关注云+社区

领取腾讯云代金券