《HTML、CSS、JavaScript 网页制作从入门到精通》——第6章 使用表格-阿里云开发者社区

开发者社区> 异步社区> 正文

《HTML、CSS、JavaScript 网页制作从入门到精通》——第6章 使用表格

简介:
+关注继续查看

本节书摘来自异步社区《HTML、CSS、JavaScript 网页制作从入门到精通》一书中的第6章,第6.1节,作者:【美】John Resig(莱西格) , Bear Bibeault(贝比奥特) 译者: 徐涛 更多章节内容可以访问云栖社区“异步社区”公众号查看。

第6章 使用表格

表格是网页制作中使用最多的工具之一,在制作网页时,使用表格可以更清晰地排列数据。但在实际制作过程中,表格更多地用在网页布局定位上。很多网页都是以表格布局的,这是因为表格在文本和图像的位置控制方面都有很强的功能。灵活、熟练地使用表格,在网页制作时会有如虎添翼的感觉。

学习目标

  • 掌握创建表格
  • 掌握设置表格基本属性
  • 掌握设置表格的边框
  • 掌握设置表格背景
  • 掌握设置表格的行属性
  • 掌握调整单元格属性

6.1 创建表格

表格是网页排版布局不可缺少的一个工具,能否熟练地运用表格将直接影响到网页设计的好坏。下面就讲述表格的创建。

6.1.1 表格的基本构成table、tr、td
表格由行、列和单元格3部分组成,一般通过3个标记来创建,分别是表格标记table、行标记tr和单元格标记td。表格的各种属性都要在表格的开始标记< table >和表格的结束标记 table >之间才有效。

  • 行:表格中的水平间隔。
  • 列:表格中的垂直间隔。
  • 单元格:表格中行与列相交所产生的区域。
    语法:

screenshot

说明:

< table >标记和< /table >标记分别表示表格的开始和结束,而< tr >和 tr >则分别表示行的开始和结束,在表格中包含几组< tr>… tr >就表示该表格为几行;< td >和< /td >表示单元格的起始和结束。

举例:
screenshot

在代码中加粗部分的代码标记是表格的基本构成,在浏览器中预览可以看到在网页中添加了一个2行2列的表格,表格没有边框,如图6.1所示。
screenshot

在制作网页的过程中,一般都使用表格来排列网页数据,如图6.2所示。
screenshot

6.1.2 设置表格的标题caption
可以使用screenshot来设置标题单元格,表格的标题一般位于整个表格的第1行。一个< table >表格只能含有一个表格标题。

语法:
screenshot

举例:
screenshot

在代码中加粗部分的标记为设置表格的标题,在浏览器中预览,可以看到表格的标题,如图6.3所示。
screenshot

提示

使用screenshot标记创建表格标题的好处是标题定义包含在表格内。如果表格移动或在HTML文件中重定位,标题会随着表格相应地移动。
6.1.3 表头th
表格的表头screenshotscreenshot单元格的一种变体,实质上仍是一种单元格。它一般位于第一行和第一列,用来表明这一行或列的内容类别。在一般情况下,浏览器会以粗体和居中的样式显示screenshot元素中的内容。

语法:
screenshot

说明:

screenshot
元素的起始标记必须有,但是结尾标记是可选的。

举例:
screenshot

在代码中加粗部分的代码标记为设置表格的表头,在浏览器中预览可以看到表格的表头效果,如图6.4所示。
screenshot

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java Swing编程:JTable表格
表格是GUI编程中使用较多,但也是最麻烦的一个控件之一。表格是用来显示二维数据,提供编辑,选择等功能。如果只是显示数据,这还是非常easy的,只要在JTable中传入二维数组或集合就可以了。 表格是GUI编程中使用较多,但也是最麻烦的一个控件之一。表格是用来显示二维数据,提供编辑,选择等功能。如果只是显示数据,这还是非常easy的,只
1304 0
javascript:使用document.getElementById读取数据为空分析
  今天写个网页,想在页面加载onLoad时,动态显示由后台其他程序传来的数据时,用document.getElementById获取控件对象总是为空。但是检查了这个id确实是存在的。在网上查阅一番后才知道了其中的原因。
892 0
[喵咪大数据]Hbase搭建和基本使用
说完了Hive我们接着来看另外一个建立在Hadoop基础上的存储引擎**HBase**,HBase以内存作为缓存数据落地到HDFS的Key-Value数据库,因为使用内存缓存极大保障了数据的实时性和实时查询能力,在实时场景的大数据存储HBase是不可或缺的解决方案,常见又在使用这项技术的业务就是**短链**,比如你在微信给你的朋友发个URL最终你的朋友获取到的是微信的一个短链接(QQ淘宝都是如此),在HBase中就存储了这样一个对应关系,这一切都归功于HBase的吞吐量和实时响应速度.
222 0
《圣殿祭司的ASP.NET4.0专家技术手册》---- 1-16 IIS 7.5 Express精简版网页服务器
如果你的操作系统(如Windows XP)的IIS不是最新版IIS 7.5,但正式的网页服务器又是执行IIS 7.5功能,故用IIS 5或IIS 6可能某些功能测不到。这时可通过Web Platform Installer【安装Web组件】安装IIS 7.
1348 0
JavaScript实现的网页放大镜效果
今天在观看视频学习的时候,学到了一个小技巧。就拿过来与大家进行分享一下啦。 实现的原理 分析需求:需要两张图,一大一小。然后根据鼠标的动作显示出不同的区域块的图像。 核心:鼠标事件的获取和处理。
1057 0
javascript之ProtoBuf在websocket中的使用
因为ProtoBuf的序列化效率和大小都非常好,所以它在网络通信上面应用越来越多;而webosocket也随着web3.0应用越来越广泛,而将这两个结合在一起的也会慢慢形成一种趋势;本人是为了测试自已写的一个C# websocket,所以在web上面结合pb也写了一个js实例: 1.
2032 0
如何在网页中制作虚线表格
在制作网页的时候,常常要遇到制作虚线表格的问题,下面的文章就能解决这个问题。 方法一:作一个1X2的图。 半黑半白,再利用表格作成线。这种方法虽然麻烦,但在任何浏览器中均可浏览,兼容性最好。 方法二:在css里面设定。
761 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载