HTML自适应表格制作

html-css020

HTML自适应表格制作,第1张

Dreamweaver的“表格式数据导入(T)”功能

依据:Dw的“表格式数据导入(T)”功能可以将存有表格数据的UTF-8编码的TXT文档导入到软件当中

制作UTF-8编码的TXT文档

我们将表格数据直接拷贝到新建的TXT面板中,文件>另存为...,在“另存为”菜单面板右下角的“编码(E)”选择“UTF-8”,保存

Dw的“表格式数据导入(T)”功能

在Dw中点击菜单 文件>导入>表格式数据导入(T),选择TXT文件,导入

这时候表格的基本数据已经导入到DW中了,剩下的工作我们就可以编辑表格的基本样式

三、表格的自适应和单元格数据居中

以一个6X4的表格为例

将所有列设置为固定宽度,显然是不能满足此类要求的,但是若把全部的列都设置为百分比,恐怕在某些尺寸,或分辨率下,会变得很难看。在Bigtree看来,比较习惯于用如下的方式来处理——在表格列数不是很多的前提下——将大部分列宽用固定值设置死,留下一列不设置宽度,将table的宽度设置为屏幕的百分比(譬如95%、98%等)。

例:

序号

分类A

分类B

名称

说明

操作……在本例中,名为“说明”的列,内容比较长,个人认为可以将此列设置为浮动宽度列,用以自适应页面的宽度。

但是当该表格中出现长度比列幅宽的半角字符时,td的宽度会被内容撑破,应该如何解决呢?解决此问题的方法是:在明细行的td中,追加style="word-wrap:break-word",这样做可以使半角连续字符强制换行,不至于撑破列宽。

例:

……应用此方法,针对设置了width宽度的td列可以解决,但是如果没有设置宽度的td列,是无法生效还是会被撑破td的,应该如何解决呢?解决此问题的方法是:在定义表格时,追加style="table-layout:fixed",这样做可以使半角连续字符强制换行,不至于撑破列宽。需要注意的是,使用此参数后,不要轻易在tr(行)或td(列)中加入height属性,会使table不再被内容撑出适合的高度。

例:

效果图

网友们上网通常会采用800×600、1024×768两种分辨率,由于网页不是用来给自己看的,所以我们必须让自己的网页能够兼顾这两种情况,让不同分辨率设置的网友都能够看到一个排版美观正确的网页。一、自然拉伸如果你的网站结构没有用到大量的图形来衔接,主要由表格来定结构,那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时,只要你把表格的宽度属性定义为100%,表格就会根据分辨率的不同自行调整宽度。二、固定居中在800×600分辨率下制作的网页在1024×768分辨率的机器上打开,整个网页就会跑到左边;1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧?做起来费劲。所以目前普遍采用的方法是固定居中法!现在大多数网民都还在用800*600的分辨率,所以我们一般可以以此分辨率为主。只要在网页原代码的后紧加一句,前加一句就OK了。不过有几个问题这是要注意一下,第一个要注意的是上面说到的百分比的问题,表格、单元格的宽度单位最好要使用像素单位,而不要用百分比。例如width=770。如果你的表格宽度设的是百分比,那么使用大于800×600的像素时,网页就会拉宽,这样网页可能会变形。在中加入leftmargin=0,即这种情况下,800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。三、兵分两路如果你的网页不经常更新,而且对页面效果极其在意,那好,你就设计两个页面,分别对应800×600和1024×768两种分辨率。然后根据不同的分辨率进行跳转就行了。例如: