当前位置：文档之家 › 网页设计中TABLE与DIV比较

网页设计中TABLE与DIV比较

  • 格式：doc
  • 大小：25.00 KB
  • 文档页数：2

网页设计中TABLE与DIV+CSS页面布局的优缺点
网页设计可以采用TABLE或者DIV+CSS进行页面布局,下面我为大家简单介绍一下这两
种布局形式的优缺点。

一、 TABLE方式
优点：
1、简单易用：比较适合入门级的用户操作，就像操作word一样，直接设置长宽、对齐
方式等属性即可。
2、所见即所得：当用户插入一个TABLE的时候就可立即看到效果。
3、可读性好：语句编写较为简便，主要代码就是

、、
等语句。
4、开发速度较快：新建网站时，直接拖入TABLE比编写DIV要快速很多。
5、兼容性较强：TABLE设计由来已久，得到浏览器的广泛支持，故显示效果很好，不
会出现错位情况。

缺点：
1、代码冗余，

这是构成一个表格的最基本元素（此
为一行一列的表格），相对
编写来说，代码繁多。
2、网页打开速度较慢：后台代码太多，导致网站打开速度慢。
3、后期维护不方便

二、 DIV+CSS方式
优点：
1、标准化的页面结构：数据展示与样式分离！可以随意拆装，调整，变换。DIV+CSS
是行业标准，是WEB发展的趋势。
2、代码简洁：

较TABLE来说代码精简许多。
3、页面浏览速度较快： 对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比
TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。 由于将大部分页面代
码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将
页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈
在一个大表格里，使得加载速度很慢。显示的时候速度比较快，DIV会一个一个显示，而表
格要全部加载再显示。
4、页面布局灵活：DIV+CSS使得页面布局方便操作灵活，改版时只需改CSS样式即可
实现页面重新布局，而不用改动程序，从而降低了网站改版的成本。(根据区域内容标记，
到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局
样式)。 页面效果丰富，包括视觉效果和用户体验比如拖拉。
5、更好地被搜索引擎收录
由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分
更为突出明显，便于被搜索引擎采集收录。

缺点：
1、可观性差：用户在编辑的时候并不能立即看到编辑效果，需要预览才可看到。
2、操作繁琐：相对于入门级的用户或是对代码不是很了解的人来说，操作起来很是麻
烦。(需要（1）熟练掌握HTML标签；（2）熟练掌握JS；（3）熟练掌握CSS；（4）熟
练DIV定位)
3、兼容性较差：DIV＋CSS设计的网站在IE浏览器里面正常显示，到火狐浏览器
（FireFox ）中有可能面目全非，故设计时需要把不同浏览器样式都考虑进去。
4、CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，
甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。
5、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本
身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网
站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和
CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，
而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网
站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

以上简单介绍了一下TABLE与DIV+CSS的优缺点。其实页面布局采用哪种排版都可以，
如果是初入门的新手，需要从TABLE入手，待对html语言有所了解时再接触DIV+CSS；或
者有的客户强调的是网站开发制作的速度，那html语言排版就可以；如果对html语言已经
很了解，或者需要进行SEO优化，想做关键词推广、那最好是用DIV＋CSS来实现，这样网
站的流量和页面浏览速度会快一些。

合集下载

div 内容水平居中

div 内容水平居中

div 内容水平居中Div 内容水平居中。

在网页设计中，div 是一个非常重要的标签，它可以用来创建各种不同的布局和样式。

其中，水平居中是一个常见的需求，今天我们就来讨论一下如何实现 div 内容的水平居中。

首先，我们需要明确一点，要实现 div 内容的水平居中，我们可以使用多种方法，下面我们将介绍其中一些常用的方法。

一、使用 text-align 属性。

在父元素中使用 text-align 属性可以实现子元素内容的水平居中。

这种方法适用于需要居中的子元素为内联元素或者块级元素的情况。

```css。

.parent {。

text-align: center;}。

```。

二、使用 margin 属性。

对于块级元素，我们可以使用 margin 属性来实现内容的水平居中。

我们可以通过设置左右 margin 为 auto 来实现这一效果。

```css。

.child {。

margin: 0 auto;}。

```。

三、使用 flex 布局。

flex 布局是一种现代的布局方式，它可以非常方便地实现内容的水平居中。

我们可以在父元素上使用 display: flex 属性，然后再使用 justify-content 属性来实现内容的水平居中。

```css。

.parent {。

display: flex;justify-content: center;}。

```。

四、使用绝对定位。

我们还可以使用绝对定位的方式来实现内容的水平居中。

首先，我们需要将父元素设置为相对定位，然后再将子元素设置为绝对定位，并且通过 left 和 right 属性来控制其位置。

```css。

.parent {。

position: relative;}。

.child {。

position: absolute;left: 50%;transform: translateX(-50%); }。

```。

五、使用 table 布局。

最后，我们还可以使用 table 布局来实现内容的水平居中。

web网页设计期末习题题目练习

web网页设计期末习题题目练习

3、既然浏览器可以按照图像的正常大小显示，为什么还要设置img标记的width , height属性？
图像指定height和width属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。（下面的篇幅详细解释了这个观点）。
4、有表格行列拆分如下，表格宽度500px，边框为1，请给出相应的html源代码，给出<table>..........</table>部分即可，写出必要的属性即可，多余的属性不扣分.。
第三套
1．填空题（每题2分，共20分）
1.1.网页尺寸的单位是像素。
2.RGB色彩模型最多可以表示224种颜色。
3.HTML文档的根元素是html。
<body >
<table width="592" height="220" border="0" cellpadding="0" cellspacing="2">
<tr>
<td height="39" colspan="3" bgcolor="#33CCFF" width="696">top</td>
B.strike D.strong
5、在网页中插入图片正确表示是？(C)
A.<img>logo.gif</img> C.<img src=”logo.gif”>
B. <img href=”logo.gif”> D. <imge src=”logo.gif”>
第4章_理解CSS+DIV网页样式与布局

第4章_理解CSS+DIV网页样式与布局


3
4.1 div标记与span标记
10-1.html
4
4.1 div标记与span标记
DIV与span的区别 与 的区别
10-2.html
5
4.1 div标记与span标记
div与span的区别在于，div是一个块级 与 的区别在于， 是一个块级 是一个块级(block-level)元素，它包围的元素会自动换行， 元素， 的区别在于 元素 它包围的元素会自动换行， 仅仅是个行内元素(inline elements),不会换行。span没有结构上的意义，当其 不会换行。 没有结构上的意义， 而span仅仅是个行内元素 仅仅是个行内元素 不会换行 没有结构上的意义 不合适的时候可以换上他，同时div可以是包含 可以是包含span的反之则不行。 的反之则不行。 他元素都 不合适的时候可以换上他，同时 可以是包含 的反之则不行
6
4.2 盒子模型的概念
所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。 所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。 一般来说这些被占据的空间往往都要比单纯的内容要大。 一般来说这些被占据的空间往往都要比单纯的内容要大。
7
4.2 盒子模型的概念
一个盒子模型由content(内容 、border(边框 、padding(间隙 、 内容)、 边框)、 间隙)、 一个盒子模型由 内容 边框 间隙 间隙)这四部分组成 和margin(间隙 这四部分组成。 间隙 这四部分组成。 一个盒子的实际宽度是有content+padding+border+margin组成的。 组成的。 一个盒子的实际宽度是有 组成的 中可以通过width和height来控制 来控制content的大小，并且对于任何 的大小， 在CSS中可以通过 中可以通过 和 来控制 的大小 一个盒子都可以设置四条边各自的border、padding和margin。只要利用好 一个盒子都可以设置四条边各自的 、 和 。 盒子的这些属性，就能够实现各种各样的排版效果。 盒子的这些属性，就能够实现各种各样的排版效果。
网页设计怎么让图片居中

网页设计怎么让图片居中

网页设计怎么让图片居中一、水平居中(text-align：center;)这个属性在没有浮动的状况下, 我们可以将块级元素转换为inline/inline-block, 然后其父元素加上text-align:center;属性就可以将其居中。

如果是行内元素(比如span、img、a等)直接在父元素上添加text-align:center;属性即可。

二、使用margin:0 auto;水平居中前提：给元素设定了宽度和具有display：block;的块级元素。

让一个DIV水平居中, 只要设置了DIV的宽度, 然后使用margin：0 auto, css自动算出左右边距, 使得DIV居中。

三、定位实现居中(必须计算偏移值)原理: 通过定位使元素左上角居中, 再通过偏移值margin 调整使元素中心居中。

缺点：高度宽度必须事先知道。

.absolute_p1 {position: relative;width: 200px;height: 200px;}.absolute_p1 .absolute_c1 {width: 100px;height: 100px;position: absolute; /* fixed 同理 */left: 50%; top: 50%;margin-left: -50px;margin-top: -50px; /* 必须依据宽高计算偏移量 */}该方法普遍使用, 但是前提必须知道元素的宽度和高度。

如果当页面的宽高是动态的, 比方说页面必须要弹出一个DIV层必须要居中显示, DIV的内容是动态的, 所以宽高也是动态的, 这是可以用jquery解决居中。

四、jquery实现水平和垂直居中。

jquery实现水平和垂直剧中的原理是通过jquery设置div 的css, 获取div的左, 上的边距偏移量, 边距偏移量的算法就是用页面窗口的宽度减去该div的宽度, 得到的值再除以2即左偏移量, 右偏移量算法相同。