HTML--Table布局

 1 <DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" Content="text/html" charset="utf-8"/>
 5         <title>table布局</title>
 6     </head>
 7     <body>
 8         <table border="0" width="800px">
 9             <tr>
10                 <td colspan="2" style="background-color:#99bbbb">
11                     <h1>Main Title of The web page</h1>
12                 </td>
13             </tr>
14             <tr valign="top" >
15                 <td style="background-color:#ffff99;width:300px; height:400px;text-align:top;">
16                     HTML<br/>
17                     CSS<br/>
18                     JavaScript<br/>
19                     Jquery<br/>
20                 </td>
21                 <td style="background-color:#EE8888;text-align:top;width:500px;height:300px;">Content Goes here</td>
22             </tr>
23             <tr>
24                 <td colspan="2" style="text-align:center; background-color:#CCCCCC">CopyRight W3CSchool.com.cn</td>
25             </tr>
26         </table>
27     </body>
28 </html>

效果图：

时间： 2024-08-06 09:15:22

HTML--Table布局的相关文章

浅谈ul布局以及table布局

我个人对于某些言论说要注重html语义化在布局中的应用,我反而不怎么感冒,试试兼容IE7&&项目期相对较赶的情况下,我还是推荐快速开发为主,兼容性强为主. 如果布局中需要用户边框,推荐div或者table布局:如果不需要边框,ul其实也是不错的一种布局方式. ul布局可以很好地适应布局内容自顶向上对齐地方式,如图.table永远都是垂直居中的方式代码 ul布局css ul{ list-style-type: none; padding-left: 0px; mar

table布局， td内部元素溢出边界问题。（已解决）

今天,我尝试用table布局有多个输入需要提交的页面, 为了使输入元素占满td,我对其宽度设置为100%, 结果text输入元素溢出td, 具体情况如下: 解决办法是对td样式设置为overflow:hidden, 意思是如果td内元素溢出,则截去(同样适用于div等容器元件). 新的效果如下:

html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签（转）

DIV与TABLE布局的区别 div 和 table 的加载方式不同,div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式是完成后加载,遇到 <table> 后,在读</table> 之前,table 中的内容不加载,或者传输中断了的时候加载,这是因为TABLE牵涉到多行多列问题,所以只有当TABLE所有内容加载完毕,浏览器才知道该怎么显示 . div与css配合使

table布局与div布局

DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABLE就是多么多么牛. DIV是标准,是大势所趋,但并不意味着所有的页面都适合用它来做. 中国的门户和国外的有很大的区别,中国网民并不喜欢信息量少的页面,YAHOO到了中国页面上的内容就多了不少,而上次改为简洁的页面后访问量下降的厉害以至于没过几天就又改了回来.正式由于中国的国情造就了搜狐.新浪这样门户.

css Table布局-display:table

使用表格布局一直是一个敏感的主题.一般情况下,Web开发人员考虑基于表格布局是禁忌.尽管反对的理由看起来证据很充分,但是大多数开发者除了谴责基于表格的布局,都无法提供完善的使用场景."表格不好." 从早期反对HTML Table(<table>标签)开始这种势头就非常强劲.几代开发者被成功洗脑,根深蒂固的认为:任何使用表格都是邪恶的. 诚然,我也是避免使用表格布局的开发者之一,即使是显示表格数据. 我甚至曾经斥责我的下属开发者同事,当他们使用 display:table 用

为什么不建议用Table布局

Tables的缺点 1.Table要比其它html标记占更多的字节.(延迟下载时间,占用服务器更多的流量资源.) 2.Tablle会阻挡浏览器渲染引擎的渲染顺序.(会延迟页面的生成速度,让用户等待更久的时间.) 3.Table里显示图片时需要你把单个.有逻辑性的图片切成多个图.(增加设计的复杂度,增加页面加载时间,增加HTTP会话数.) 4.在某些浏览器中Table里的文字的拷贝会出现问题.(这会让用户不悦.) 5.Table会影响其内部的某些布局属性的生效(比如<td>里的元素的height

HTML学习笔记 div布局及table布局案例第三节（原创）参考使用表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table布局</title> </head> <body marginheight="0px" marginwidth="0px"> <table width="100%&qu

HTML中的table布局

<table width="100" height="50" border="1" bgcolor="blue"> <caption>我是表头</caption> <tr> <th>哈哈1</th> <th>哈哈2</th> <th>哈哈3</th> </tr> <tr> <td

日历控件table布局

作为初学者,一开始就接触div+css ,所以说实话,我并不怎么喜欢table布局,一般逃避. 先上这次的效果图: 看到这个图,第一次用table布局没实现,原因是给tr加下边框失效.当时没找到原因,以前没用过table布局. 今天重新翻出来用table布局实现 dom结构是:div>table>caption+tr>td>a 其实这个布局本身没有什么难度,只是想说一下遇到的坑. 首先对table设置 border=“0”,cellpadding="0" c

web前端_表格table布局，同一列两个<td>之间有间隙解决办法。

同学接了个很简单的网站.结果在布局的时候发现网页头部和网页主体之间差不多有1px的间隙.怎么也去除不了,帮忙看了看,隋记录下来,是这样的,网页头部和主体分别在两个<td>中(使用table布局),贴上简单demo: 效果如下,间隙消失了,最重要的是红色矩形圈起来的那句. 如果去掉红色矩形圈起来的部分,效果如下: web前端_表格table布局,同一列两个<td>之间有间隙解决办法.