网站设计的思考-网页中表格的运用

设计|网页

表格(table)是页面的重要元素,是页面排版的主要手段。尽管DHTML中的层(layer)也可以实现网页元素的自由定位,但是表格显然更加方便编辑与修改。熟练掌握和运用表格的各种属性,可以让您的页面看起来赏心悦目。
  本文将分两部分详细介绍表格在网页设计中的运用。包括表格的基本用法和表格运用的注意点。

  一.表格的基本用法。

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

  ●表格的HTML基本语法

<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)

例如:

<table border> 
<tr><th>1</th>
    <th>2</th>
    <th>3</th> 
<tr><td>A</td>
    <td>B</td>
    <td>C</td> 
</table>

1 2 3
A B C

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

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

例如:

<table border=5 cellpadding=10>
<tr><th>1</th><th>2</th><th>3</th>
<tr><td>A</td><td>B</td><td>C</td> 
</table>

1 2 3
A B C

  ●表格的对齐方式

  1.表格内的文字对齐。

  语法:<td align=#> 其中#可以设定的参数有:

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

例如:
<table border height=100>
<td valign=top>A</td>
<td valign=middle>B</td>
<td valign=bottom>C</td>
</table>

A B C

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

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

  <table align=#> 其中#可以设定为left(居左),right(居右)

  例如:

<table align="left" border >
<tr><th>1</th><th>2</th><th>3</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
这里的文字<br>
是和表格并排排放的

1 2 3
A B C

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

     ●表格的嵌套

  表格嵌套就是在表格里插入表格,嵌套的排版方法就是将要插入的表格当做文字来处理同样使用<td align=#>语句。

  例如:

<table border width=200 height=100> 
<tr> <td valign="top" > 
<table border><tr><td></td></tr></table>
</td><td valign="bottom">
<table border><tr><td></td></tr></table>
</td></tr>
</table>

  ●表格的色彩

  表格的色彩也在<table>标签里设置,参数有:

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

  语法为:<table bgcolor="#RRGGBB">其中RRGGBB分别为RGB三色的16进制数值

  例如:
<table width=100 border bgColor=#a9d7fb 
borderColorDark=#ffffff borderColorLight=#000000 cellPadding=5 
cellSpacing=0 bordercolorlight="#000000">
<tr><td bgColor=#FFE084></td>
</tr><tr><td></td></tr></table>

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

    .表格运用的注意点

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

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

  我们知道:浏览器在读取网页html原代码时,是读完整一个table再将它显示出来。也就是说从<table>标签开始,要读到</table>标签时,才将表格中的内容显示在屏幕上。而且显示也有优先级,先读到的先显示。这样的话,如果一个大表格中含有多个子表格,必须等大表格读完,才能将子表格一起显示出来。

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

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

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

  2.单一表格的结构尽量整齐;

  3.表格嵌套层次尽量要少.

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

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

时间: 2024-08-24 10:38:05

网站设计的思考-网页中表格的运用的相关文章

网站设计的思考网页版面布局的原理

设计首页的第一步是设计版面布局.就象传统的报刊杂志编辑一样,我们将网页看作一张报纸,一本杂志来进行排版布局.虽然动态网页技术的发展使得我们开始趋向于学习场景编剧,但是固定的网页版面设计基础依然是必须学习和掌握的.它们的基本原理是共通的,你可以领会要点,举一反三. 版面指的是浏览器看到的完整的一个页面(可以包含框架和层).因为每个人的显示器分辨率不同,所以同一个页面的大小可能出现640*480像素,800*600像素,1024*768像素等不同尺寸. 布局,就是以最适合浏览的方式将图片和文字排放在

网站设计的思考-网页色彩搭配的原理

设计|网页 首先我们先来了解一些色彩的基本知识: 1.颜色是因为光的折射而产生的. 2.红,黄,蓝是三原色,其它的色彩都可以用这三种色彩调和而成. 网页html语言中的色彩表达即是用这三种颜色的数值表示 例如:红色是color(255,0,0)十六进制的表示方法为(FF0000) 白色为(FFFFFF), 我们经常看到的"bgColor=#FFFFFF"就是指背景色为白色. 3.颜色分非彩色和彩色两类. 非彩色是指黑,白,灰系统色. 彩色是指除了非彩色以外的所有色彩. 4.任何色彩都有

求教如何通过python抓取网页中表格信息

问题描述 求教如何通过python抓取网页中表格信息 刚刚开始学习python 不清楚如何通过python抓取网页中的表格信息 比如给定一个student.html 里面有学号.姓名.性别等信息 怎么样写才能够输入学号 读出其他信息? 解决方案 用正则表达式,表格数据放在table->tr->td中 解决方案二: 输入学号然后服务器在给你其他数据,应该是一个post的过程-你可以抓包看一下整个过程-至于提取特定的信息,你可以先看下整个表格的结构,再有针对性的写个正则表达式来提取出信息- 解决方

网站设计的思考(一)

设计 前言大家好,我是阿捷.很荣幸,能在这里和大家一起探讨关于网站设计的问题.目前,网络上有关网页制作的各种教程已经相当多,可以方便地学习到最新的技术和技巧.可是,有关网页的设计,比如设计灵感的实现,风格的确定,发展策略,技术的筛选等的文章却比较少,许多网友往往有好的材料,却苦恼没有好的具有表现力的设计.受到索易主持人的鼓励,阿捷整理了一些网页的设计心得,在这里和大家交流一下,也算抛砖引玉了,希望得到您的指正,如果您有好的建议和心得,也请发稿给我ajie@soim.com,在此先道一声谢谢! 网

网站设计的思考-定位你的网站主题和名称

设计  很荣幸,能在这里和大家一起探讨关于网站设计的问题.目前,网络上有关网页制作的各种教程已经相当多,可以方便地学习到最新的技术和技巧.可是,有关网页的设计,比如设计灵感的实现,风格的确定,发展策略,技术的筛选等的文章却比较少,许多网友往往有好的材料,却苦恼没有好的具有表现力的设计.受到索易主持人的鼓励,阿捷整理了一些网页的设计心得,在这里和大家交流一下,也算抛砖引玉了,希望得到您的指正,如果您有好的建议和心得,也请发稿给我ajie@soim.com,在此先道一声谢谢! 网站设计,包含的内容非

网站设计的思考-首页的设计

设计   在我们全面考虑好网站的栏目,链接结构和整体风格之后,我们就可以正式动手制作首页了. 有这么一句俗语:"良好的开端是成功的一半". 在网站设计上也是如此,首页的设计是一个网站成功与否的关键.人们往往看到第一页就已经对你的站点有一个整体的感觉.是不是能够促使浏览者继续点击进入,是否能够吸引浏览者留在站点上,全凭首页设计的"功力"了. 所以,首页的设计和制作是绝对要重视和花心思的.阿捷的经验是:一般首页设计和制作占整个制作时间的40%.你宁可多花些时间在早期,以

网站设计的思考-确定网站的栏目和版块

设计 <设计的思考>系列文章,今天开始写第三篇.阿捷不是专业的网页设计师,但阿捷将尽自己所能把这个系列文章写好,尽可能将自己实践过程中总结的经验和心得告诉给大家,希望能给您一点收获,一点启发.文章中所列观点如有不同意见,欢迎您来信讨论,来信寄ajie@soim.com,谢谢. 我们在前二篇文章里学习了定位网站主题和确立网站的CI形象.下面是否该进入实质性的设计制作阶段呢?答案是:不能.经验告诉我们,建立一个网站好比写一篇文章,首先要拟好提纲,文章才能主题明确,层次清晰:也好比造一座高楼,首先要

网站设计分析:聊聊网页中的“微创新”

>微创新 近几年流行"微".比如什么微电影啊.微博啊.微信啊...也从一个角度说明把一个点做好就很容易得到用户的青睐.最近大土豪苹果公司发布了他们的全新产品肾5S和肾5C,大伙反映在设计上并没有和上代有明显的区别,主要是在一些小细节.小东西上的优化.想来每一代的苹果跟上代比也很少有那种颠覆性的改变.(当然品牌的延续也是一部分原因) 什么是微创新? 老乔布斯说过,所谓的微创新,并不是让你把过去的东西都推翻掉,而是在过去的基础上去不断的调整和变化,甚至可能只是一点小小的功能,但是最后

网站设计的思考-确定网站的目录结构和链接结构

链接|设计 我们在动手制作网页前,一定要考虑好以下三方面: 1.确定栏目和版块: 2.确定网站的目录结构和链接结构 3.确定网站的整体风格创意设计 今天我们继续来讨论"确定网站的目录结构和链接结构". 一.网站的目录结构 网站的目录是指你建立网站时创建的目录.例如:在用frontpage98建立网站时都默认建立了根目录和images子目录.目录的结构是一个容易忽略的问题,大多数站长都是未经规划,随意创建子目录.目录结构的好坏,对浏览者来说并没有什么太大的感觉,但是对于站点本身的上传维护