table,表格居中

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

竭诚为您提供优质文档/双击可除

table,表格居中

篇一:table表格

table标签

用table表格对网页中的内容进行排版,是一种既常见又较为方便的方法,在目前仍有许多网页是使用表格排版的。首标签表示表格的开始,尾标签则表示表格结束,一个简单的html表格中分别包含以下元素:

th:元素定义表头单元格,th中包含的文本内容默认以粗体显示,即使不为它设置align属性,元素中的内容也会自动居中显示;

tr:表格中的行标记,和分别表示表格中一行的开始与结束,如果表格需要4行,则需要用到4组tr;

td:表格中的单元格,也称之为列标记,td元素需被

tr元素所包含;

以上的元素都必须写在table标签中才有效。下面就通过一组实例来创建一个三行三列的table表格:

表头1

表头2

表头3

第二行第一列

第二行第二列

第二行第三列

第三行第一列

第三行第二列

第三行第三列

上述代码中为table设置的属性依次为:

width(table宽度)="450"默认单位为像素值;

height(table高度)="120"默认单位为像素值;

border(table边框线)="1"表格及所有单元格的边框线;

align(table水平位置)="center"设置表格水平居中显示;

现在打开浏览器,运行以上代码来看看table表格创建完成后的效果吧!

table表格的高度与宽度除了可以设置固定值外,还可以使用百分比来设置;table表格中的th元素包含的内容会自动居中显示,如需让td元素中的内容也居中显示,只需设置即可;不过在现在的html5中,table中的属性仅支持"border"属性,并且只允许使用值"1"或"无"。

篇二:html表格布局实例

[html]表格布局之实例版

|[>]

前面我们讲了html表格的基础知识,今天我们通过一个实例让大家更清晰的了解下表格的用途。

例如:我们做一个简单的网站布局,代码如下:

bordercolor="#00ff99">

网站名称

网站标题

搜索框

左边

中间

右边

网站底部信息

产生如下的表格:

这是一张整体的表格,第一行和第四行分别跨度了三列,这里用

colspan="3"来限制,而第二行的“搜索框”占用了两

列的位置,用colspan="2"控制;align="center"是对表格

内文字的对齐限制,center表示中间,right表示靠右,left 靠左。

表格的基础设置,可以参考:

[html]利用表格规划网站布局

[html]如何制作多行多列的表格

[html]设定表格的尺寸和边框

如果你现在可以根据自己的想法制作出一个表格了,那么你就是向自己制作模板迈近了一步。^o^

表格布局现在仍然很多人在用,方便实在。

网页设计现有两种布局方法,一种即是表格布局,另一种是现在w3c极力推荐的css布局。不过,就目前来说,由于xhtml并未完全占据主流,表格布局依然是大多数网页设计师的首选。

你所描述的问题属于表格的对齐问题,解决方式有以下几种:

如果两个表格的宽度不一致,那么选择默认的对齐方式,也即左对齐,在html中的标签和属性是:就能实现左边对齐。你现在出现的问题有可能是第一个表格设置了对齐方式,例如居中对齐,而第二个表格并没有设置对齐方式,所以默认为左对齐,这样就出现了上述问题。

我的一些表格布局的经验:

1、表格布局第一步:先插入一个表格,宽度是760-780px (记住,一定要用px,不要用百分比),高度不用设置,然

后令这个表格居中。以后所有的内容都限制在这个表格中。

2、熟练使用表格嵌套。也就是说,在一个表格中再插

入另一个表格。举个例子,把你要设计的页面分成大的几个部分,然后利用表格的行数和列数来控制它们的布局,如果某一个单元格中的内容又要分成几部分,可以继续在这个单元格中插入表格,方法同上。

3、补充:表格的边框一定要为0,即table中的border 属性值为"0"。也就是让表格在网页预览中不可见,这样才

能实现表格布局的目的。

如何利用表格实现画中画,也就是页中页效果

网页的排版大多使用表格,利用一个表个单元可以嵌入一个网页,你知道吗?这样做有很多好处,比如你把经常更新的区域划分一个表格单元,然后在这个表

格单元中嵌入你想要更新的内容,今后更新主页只需上传这个被嵌套的页面就可以了,没有必要对首页进行更新,是不是很方便。我写个最简单的例子代码:<html><head>

<title>范例</title>

<body>

<tableborder="1"width="100%">

<tr>

<td>

iFRamesrc="example.htm"width="300"heitht="100"><

/iFRame></td>

</tr>

</table>

</body>

</html>

插入被嵌入页的关键代码是:<

iFRamesrc="example.htm"width="300"heitht="100"

></iFRame>。

example.htm是被嵌入的页面,标签<iFRame>还有一些可用的参数设置如下:marginwidth:网页中内容在表格右侧的预留宽度;例如:marginwidth="20",单位是pix,下同。

marginheight:网页中内容在表格顶部预留的高度;

hspace:网页右上角的的横坐标;

vspace:网页右上角的纵坐标;

frameborder:是否显示边缘;填"1"表示"是",填"0"表示"否"

scrolling:是否出现滚动条;填"1"表示"是",填"0"表示"否"

表格背景图片的一个技巧

大家都知道在一个较大的表格中放入背景图片,背景图片就会重复填充直到整个页面。我们可以利用表格的这个特性来减小我们网页中图片的大小,比如下面的一个渐变图,你看上去像是一整张图片,它其实用的就是表格背景重复填充特性,而用的图片就是右边的那张,大小只有1.3k,在此如果要用一张大的图片是很不划算的。你若要插入一根水平线,用这方法也很有效。

如何使鼠标指到表格,表格背景变色

相关文档
最新文档