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

第6章 使用表格

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

学习目标

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

6.1 创建表格

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

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

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

说明:

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

举例:

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

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

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

语法:

举例:

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

提示

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

语法:

说明:


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

举例:

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

时间: 2024-12-05 07:11:38

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

《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 第02章 HTML基本标记

第02章 HTML基本标记 HTML CSS JavaScript 网页制作从入门到精通 第3版 一个完整的HTML文档必须包含3个部分:一个由元素定义的文档版本信息:一个由 定义各项声明的文档头部:一个由定义的文档主体部分.作为各种声明信息的包含元素出现在文档的顶端,并且要先于出现.而用来显示文档主体内容.文字是网页中最基本的信息载体,文字通过不同的排版方式.不同的设计风格排列在网页上,提供了丰富的信息.文字的控制与布局在网页设计中占了很大比例,因此掌握好文字的使用,对于网页制作来说是最基本的

《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 导读

前言 HTML CSS JavaScript 网页制作从入门到精通 第3版十多年前,Internet在国内开始流行.其中,网页作为互联网的主要媒介受到了电脑爱好者的广泛关注.由于当时网速的限制,网页主要承载文本.图片等简单数据,使用Dreamweaver或Frontpage软件即可轻松制作网页.而今天,Internet领域已经改变了太多,在软件上点几下.拖几下即可完成整个网站的方法已经完全不适用了.现在的网页制作领域综合了多种技术,新一批的初学者该怎样学习网页制作?目前大部分制作网页的方式都是运

《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 2.5 标题字

2.5 标题字 HTML文档中包含有各种级别的标题,各种级别的标题由 到 元素来定义.其中, 代表最高级别的标题,依次递减, 级别最低. 2.5.1 标题字标记h 到 元素中的字母h是英文headline的简称.作为标题,它们的重要性是有区别的,其中 标题的重要性最高, 的最低. 语法: <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5

《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 2.9 练习题

2.9 练习题 1.填空题(1)一个完整的HTML文档必须包含3个部分:一个由元素定义的 :一个由 定义各项声明的 :一个由定义的 .(2)meta元素提供的信息不显示在页面中,一般用来定义页面信息的 . . 等.HTML页面中可以有多个meta元素. (3)使用标记可以使网页在经过一定时间后自动刷新,这可通过将http-equiv属性值设置为 来实现. 2.操作题制作一个如图2.13所示的基本文本网页.

《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 1.3 使用浏览器浏览HTML文件

1.3 使用浏览器浏览HTML文件 1.3.1 查看页面效果 打开index.htm文件,在IE浏览器窗口中可以看到编辑的HTML页面效果,如图1.6所示. 1.3.2 查看源文件 可以使用以下方法方便快捷地打开HTML文档进行编辑. 在页面空白处,单击鼠标右键,在弹出的快捷菜单中选择[查看源文件]选项. 在页面空白处,单击一次鼠标左键,按下键盘上最下边一行的[右键]快捷键,选择[查看源文件]选项. 在浏览器菜单栏上,选择[查看]|[源文件]命令,可以查看源文件,如图1.7所示,可以查看源文件.

《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 1.2 HTML文件的编写方法

1.2 HTML文件的编写方法 HTML文件的编写方法有两种:一种是利用记事本编写:另一种是在Dreamweaver中编写HTML代码. 1.2.1 使用记事本手工编写HTML HTML是一款以文字为基础的语言,并不需要什么特殊的开发环境,直接在Windows自带的记事本中编写就可以.HTML文档以.html为扩展名,将HTML源代码输入到记事本并保存之后,可以在浏览器中打开文档以查看其效果.使用记事本编写HTML文件的具体操作步骤如下. 01 选择菜单中的[开始]|[所有程序]|[附件]|[记

《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 1.1 HTML的基本概念

标记:用来指明文档的主体区域,网页所要显示的内容都放在这个标记内,其结束标记

《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 2.8 其他标记

床前明月光,疑似地上霜. 举头望明月,低头思故乡.       床前明月光,     疑似地上霜.       举头望明月,     低头思故乡.

《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 2.6 段落标记

公司视质量为生命,为客户提供高效服务,以实现买卖双方达到双盈为目的,在客户中建立了良好的信誉. 在这个给人们带来欢乐的阳光行业中,我们相信我们的合作能让我们彼此感到欢乐和获得更好的利益. 公司视质量为生命,为客户提供高效服务,以实现买卖双方达到双盈为目的,在客户中建立了良好的信誉.在这个给人们带来欢乐的阳光行业中,我们相信我们的合作能让我们彼此感到欢乐和获得更好的利益.

《HTML、CSS、JavaScript 网页制作从入门到精通》——6.6 单元格属性

6.6 单元格属性 HTML.CSS.JavaScript 网页制作从入门到精通 单元格是表格中最基本的单位.< td >单元格全部包含在行< tr >中,一个行里面可以有任意多个单元格.可以自定义设置单元格的各项属性,这些样式将覆盖< table >和< tr >已经定义的样式. 6.6.1 单元格大小width.height 默认情况下,单元格的宽度和高度会根据内容自动调整,也可以通过width.height设置单元格的宽度和高度. 语法: 说明: 单元