网页中表格的运用

表格(table)是页面的重要元素,是页面排版的主要手段。尽管DHTML中的层(layer)也可以实现网页元素的自由定位,但是表格显然更加方便编辑与修改。熟练掌握和运用表格的各种属性,可以让您的页面看起来赏心悦目。

本文将分两部分详细介绍表格在网页设计中的运用。包括表格的基本用法和表格运用的注意点。

一.表格的基本用法。

表格的基本用法相信您已经非常熟悉了。但为了保证文章的完整性,阿捷在这里还是再罗列一遍。

●表格的HTML基本语法

-定义表格 -定义表行 -定义表头 -定义表元(表格的具体数据)

例如:

1 2 3
A B C

1

2

3

A

B

C

●table标签的参数。table标签可以含下列参数。

border表格边框cellspacing表元之间的空白距离cellpadding表元内部的空白距离width表格宽度(可以用%或者具体数据表示)height表格高度

例如:

1 2 3
A B C

1

2

3

A

B

C

●表格的对齐方式

1.表格内的文字对齐。

语法:

其中#可以设定的参数有:

left横向居左center横向居中right横向居右top纵向居顶middle 纵向居中bottom纵向居底

例如:

A

B

C

2.表格在页面内的对齐。

如果你需要与表格并排放一段文字,就需要用到table标签的另一个个参数:

例如:

1 2 3
A B C

这里的文字
是和表格并排排放的

1

2

3

A

B

C

这里的文字是和表格并排排放的

●表格的嵌套

表格嵌套就是在表格里插入表格,嵌套的排版方法就是将要插入的表格当做文字来处理同样使用

语句。

例如:

●表格的色彩

表格的色彩也在

bgcolor背景颜色bordercolor边框颜色bordercolorlight立体边框亮色bordercolordark立体边框暗色

语法为:

例如:

borderColorDark=#ffffff borderColorLight=#000000 cellPadding=5

cellSpacing=0 bordercolorlight="#000000">

以上是表格的基本用法。现在frngtpage,dreamweaver等所见即所得的网页编辑软件都不用编写代码,就可以轻松的实现表格的排版和嵌套,但是掌握一些基本语法,关键时刻还是很有用处的。

表格的嵌套并不是表格处理最困难的地方,无论多复杂的版面,悉心琢磨一番总能找到解决的办法。我们需要考虑的是:

○用什么样的嵌套排版方式使网页的下载速度达到最快。

我们知道:浏览器在读取网页html原代码时,是读完整一个table再将它显示出来。也就是说从

标签时,才将表格中的内容显示在屏幕上。而且显示也有优先级,先读到的先显示。这样的话,如果一个大表格中含有多个子表格,必须等大表格读完,才能将子表格一起显示出来。

我们在访问一些站点时,等待多时无结果,按"停止"按钮却一下显示出页面就是这个原因。

因此,我们在设计页面表格的时候,应该做到:

1.整个页面不要都套在一个表格里,尽量拆分成多个表格;

2.单一表格的结构尽量整齐;3.表格嵌套层次尽量要少.

实验证明:越复杂,嵌套层次越多的表格下载速度越慢。

关于网页的表格设计今天就写到这里。阿捷没有很多的技巧提供,关键在于您自己的实践和运用,还是那句古话:“熟能生巧”。

动物网页html5设置思想,网站设计思想相关推荐

  1. 学生HTML个人网页作业作品下载网站设计——大圣娶亲电影(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设

    HTML5期末大作业:学生HTML个人网页作业作品下载网站设计--大圣娶亲电影(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品 作品介绍 1.网页作品简介 :HTML期末大学 ...

  2. HTML5 网站大观:12个优秀的 HTML5 黑色风格网站设计

    本期 HTML5 网站大观向大家分享12个精美的 HTML5 黑色风格网站设计作品欣赏.作为下一代网页语言,HTML5 加入众多的语义化标签,例如 video.audio.section.articl ...

  3. java计算机毕业设计HTML5“守护萌宠”网站设计与实现MyBatis+系统+LW文档+源码+调试部署

    java计算机毕业设计HTML5"守护萌宠"网站设计与实现MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计HTML5"守护萌宠"网站设计与 ...

  4. HTML XHTML CS3 JS网页制作(IT培训网站设计+当当网首页设计)

    HTML XHTML CS3 JS网页制作(IT培训网站设计+当当网首页设计) 百度云链接:http://pan.baidu.com/s/1hrH6qck 密码:bc4n 01.HTML基本标签_理论 ...

  5. JAVA毕业设计HTML5“守护萌宠”网站设计与实现计算机源码+lw文档+系统+调试部署+数据库

    JAVA毕业设计HTML5"守护萌宠"网站设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计HTML5"守护萌宠"网站设计与实现计算机源码 ...

  6. java计算机毕业设计HTML5“守护萌宠”网站设计与实现源码+mysql数据库+系统+lw文档+部署

    java计算机毕业设计HTML5"守护萌宠"网站设计与实现源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计HTML5"守护萌宠"网站设计与实 ...

  7. 互联网产品一网易网站设计(思想)

    很多人可能认为门户网站首页设计只是把一些导航.资讯内容和广告堆积起来摆放得好看就可以 了,虽然这个观点也并不是完全错误的,确实门户网站首页是由这三方面内容组织而成,但随着互联网的快速发展,用户对访问网 ...

  8. 基于Spring框架的Wap门户网站设计思想(转)

    在Wap手机门户网站的程序设计过程中,我们使用了Spring 框架结构.在前台的jsp页面中,重点应用了web MVC设计思想和Spring 对JDBC的封装策略.MVC即Model –View-Co ...

  9. html大作业网页代码 景点介绍网站设计——汉中印象景点介绍 (19页) HTML+CSS+JavaScript 学生旅行 游玩 主题住宿网页

    HTML5期末大作业:景点介绍网站设计--汉中印象景点介绍 (19页) HTML+CSS+JavaScript 学生旅行 游玩 主题住宿网页 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅 ...

最新文章

  1. linux的翻译系统开发,Linux系统下的翻译神器——Goldendict
  2. Python Module — WSME
  3. C++11如何减少内存拷贝次数
  4. NgRx Store createSelector 返回的 selector 执行取数逻辑的单步调试
  5. rpm 安装RabbitMQ 3.7.24版本-User can only log in via localhost
  6. [Node.js] mySQL数据库 -- 英雄英雄管理系统接口
  7. C# 关闭主窗口后让所有线程都停止工作
  8. java修改请求url_spring cloud zuul修改请求url的方法
  9. LeetCode(2)——两数相加(JavaScript)
  10. CS224N笔记——依存句法分析
  11. linux num_fds文件描述符数量限制 too many openfiles 错误
  12. 实现数据库版的图书管理系统
  13. 可能改变前端工程化未来的特性:ESM Loader Hooks
  14. 送给年轻而不服输的你
  15. linux系统显卡显存容量,Linux 查看显卡显存大小
  16. 2022-2028年中国半导体集成电路产业竞争现状及发展前景规划报告
  17. php 通联支付demo,通联支付接口示例源码(.net/php/java)
  18. 一步步教你轻松学逻辑回归模型算法
  19. 全程复制粘贴,在家用手机就可以做自媒体,每月稳定4000多
  20. 为知笔记有linux版本吗,为知笔记Linux版

热门文章

  1. dm8127 A8 yuv420sp 送入到videoM3编码--已经解决
  2. 一步一步实现微信抢红包
  3. 平面设计如何做出空间创意作品?
  4. 电子学会2023年3月青少年软件编程python等级考试试卷(一级)真题,含答案解析
  5. 缔造评测领先品牌的鲁大师,近日将有一个大举措
  6. 阿里云ECS服务器搭建Mysql数据库
  7. “要么增长要么死”,狼性文化正在毁掉什么?
  8. 超强的波多黎各,值得尊敬的美国队
  9. 求解多目标优化问题的邻域采样和代理辅助进化算法
  10. 概率论-分布函数(高斯分布、复高斯分布、瑞丽分布、Nakagami-m分布、均匀分布、卡方分布)