《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

相关文章
|
7月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
7月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
6月前
|
开发框架 JavaScript 前端开发
精选HTML、JavaScript、ASP代码片段集锦
这些代码片段代表了HTML, JavaScript和ASP的基本应用,可被集成到更复杂的项目中。它们注重实用性,并且易于理解,旨在帮助开发者快速开始项目构建或进行学习。尽管ASP不如其他服务器端技术(如Node.js, PHP, Ruby等)现代,但它在遗留系统中仍非常普遍,了解基础仍具有价值。
222 14
|
7月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
7月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
7月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
JavaScript 前端开发
JavaScript HTML DOM
JavaScript HTML DOM
132 2
JavaScript HTML DOM
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
149 5
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
128 5