html页面里有两个表格 想让两个表格并列居中 (我弄出来 老是一上一下)请大侠赐教

html页面里有两个表格 想让两个表格并列居中 (我弄出来 老是一上一下)请大侠赐教,第1张

那得用嵌套表格了,先做个一行两列的表格,并且让这个表格居中,然后再在两个单元格内分别插入一个表格即可,代码下:

<table width="100%" align="center">

<tr>

<td><table width="100%">

<tr>

<td> </td>

</tr>

</table></td>

<td><table width="100%">

<tr>

<td> </td>

</tr>

</table></td>

</tr>

</table>

valign属于一种特性,现在很多新版本的浏览器都不支持这种特性了,所以你最好不要直接使用类似 valign="top"这种直插式的样式,都是采用CSS进行控制

CSS当中的vertical-align属性

范例代码:

<style>

    table td {

border: 1px solid #000;

width: 200px;

     height: 200px;

    }

    top {

        vertical-align: top;

    }

    middle {

        vertical-align: middle;

    }

    bottom {

        vertical-align: bottom;

    }

</style>

<table>

<tr>

    <td class="top">上</td>

    <td class="middle">中</td>

    <td class="bottom">下</td>

</tr>

</table>

话说,这种脱离实际开发的案例、书籍就不要用了,弄本合适的书籍学吧,不然学半天都是已经被淘汰的知识和技术,浪费半天时间,实际开发当中都不会用(包括你上面的align,其实现在也是用CSS的text-align属性控制了)。

Tips:案例中的代码,在table标签的样式控制方面不足够严谨和完善,只是为了保障能够看出代码效果。

方法:

<table border=1>

<tr>

<td rowspan=2>11</td><td>12</td>

</tr>

<tr>

<td>22</td>

</tr>

</table>

rowspan合并行,colspan 合并列

定义和用法:

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

HTML 与 XHTML 之间的差异:

在 HTML 401 中,table 元素的 "align" 和 "bgcolor" 属性是不被赞成使用的。

在 XHTML 10 Strict DTD,table 元素的 "align" 和 "bgcolor" 属性是不被支持的。

TIY 实例:

表格

这个例子演示如何在 HTML 文档中创建表格。

表格边框

本例演示各种类型的表格边框。

没有边框的表格

本例演示一个没有边框的表格。

表格中的标题(Headings)

本例演示如何显示表格标题。

空单元格

本例展示如何使用 "&nbsp;" 处理没有内容的单元格。

带有标题的表格

本例演示一个带标题 (caption) 的表格

跨行或跨列的表格单元格

本例演示如何定义跨行或跨列的表格单元格。

表格内的标签

本例演示如何在不同的元素内显示元素。

单元格填充(Cell padding)

本例演示如何使用单元格填充来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing)

本例演示如何使用单元格间距增加单元格之间的距离。

向表格添加背景颜色或背景图像

本例演示如何向表格添加背景

向表格单元添加背景颜色或者背景图像

本例演示如何向一个或者更多表格单元添加背景

在表格单元中排列内容

本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。

框架(frame)属性

本例演示如何使用 "frame" 属性来控制围绕表格的边框。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/12153472.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-21
下一篇 2023-05-21

发表评论

登录后才能评论

评论列表(0条)

保存