1、CSS移动表格

2、HTML5调整表格位置

篇一：在Dreamweaver制作可拖动表格

在Dreamweaver中，给表格增加css定位，表格就变得象“层”一样可拖动。

1.在文档中插入一个表格。

插入一个表格

2.选中表格，在属性面板上，为表格设置一个id名称。实例中输入f1。

表格设置一个id名称

3.打开css样式面板，单击“新建css样式”按钮。

打开css样式面板

4.在“新建css样式”对话框中，类型中选择“使用CSS选择器”，在选择器中，输入#加上id名称。实例中输入#f1。

新建css样式

5.在“定义”类别中，选择定位类型为“绝对”，在“定位”框中，“左”和“上”输入数值。按“确定”按钮完成CSS

设置。

定位类型为“绝对”

6.在文档中，表格变得象“层”一样可拖动。

表格象“层”一样可拖动

篇二：CSS 表格

仁人教育CSS 表格? ?CSS 列表 CSS 轮廓CSS 表格属性可以帮助您极大地改善表格的外观。 表格边框如需在 CSS 中设置表格边框，请使用 border 属性。 下面的例子为 table、th 以及 td 设置了蓝色边框：table, th, td border: 1px solid blue; 请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。 如果需要把表格显示为单线条边框，请使用 border-collapse 属性。折叠边框border-collapse 属性设置是否将表格边框折叠为单一边框：table border-collapse:collapse; table,th, td border: 1px solid black; 表格宽度和高度通过 width 和 height 属性定义表格的宽度和高度。

仁人教育 下面的例子将表格宽度设置为 100%，同时将 th 元素的高度设置为 50px：table width:100%; th height:50px; 表格文本对齐text-align 和 vertical-align 属性设置表格中文本的对齐方式。 text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：td text-align:right; vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：td height:50px; vertical-align:bottom; 表格内边距如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：td

仁人教育 padding:15px; 下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色：table, td, th border:1px solid green; th background-color:green; color:white; CSS Table 属性属性 border-collapse border-spacing caption-side empty-cells table-layout描述 设置是否把表格边框合并为单一的边框。 设置分隔单元格边框的距离。 设置表格标题的位置。 设置是否显示表格中的空单元格。 设置显示单元、行和列的算法。

篇三：css固定表头不随滚动条移动

先说效果描述如图：涉及到数据保密的缘故所以数据弄掉了。效果为：整个grid数据会出现横向，竖向滚动条。其中所有的表头：操作，序号，测试1.。。。等等要素，不会随着竖向滚动条的滚动而发生下移动的变化。而“操作”，“序号”，“测试1”，“测试2”，“测试3”，“测试4”，“测试5”这几个列的要素则进行了横向固定，不会随横向滚动条的移动而移动。当横向滚动条向右边移动时，右边的要素往左边的移动部分会被左边的要素遮罩住。所以图里看到“测试6”，“测试7”直到“测试12”这几个title都被遮盖了，因为横向滚动条往右边移动了。

①把下面的css保存起来作为.css文件，然后在jsp页面进行引入

div#DivContainer

height:300px;overflow: auto; overflow-y: scorll;margin-top: -1px; -1px;

table.lock

border-collapse:collapse;

border-right:gray 1px solid;

border-bottom:gray 1px solid;

border-color: gray;

td.Locked /* TD标签水平与垂直方向锁住单元格, 不随鼠标或滚动条移动 */

z-index: 30; position: relative;

top:

expression(parentNode.parentNode.parentNode.parentNode.scrollTop);

left:

expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);

background-color: #cccccc; text-align: center;

/*border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray; */ border-left:gray 1px solid;

border-top:gray 1px solid;

th.Locked /* TH标签水平与垂直方向锁住单元格, 不随鼠标或滚动条移动 */

z-index: 30; position: relative;

top:

expression(parentNode.parentNode.parentNode.parentNode.scrollTop);

left:

expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);

background-color: #cccccc; text-align: center;

/*border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray; */ border-left:gray 1px solid;

border-top:gray 0px solid;

t(转 载于: 小 龙 文档网:css移动表格)r.TrLocked

z-index: 30; position: relative;

top: expression(parentNode.parentNode.parentNode.scrollTop);

/*left:

expression(parentNode.parentNode.parentNode.scrollLeft);*/ background-color: #cccccc; text-align: center;

/*border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray; */ border-left:gray 1px solid;

border-top:gray 0px solid;

th.HLocked /* TH标签水平方向锁住单元格 */

z-index: 1; position: relative; left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);

/**background-color: #cccccc; text-align: center;**/

/*border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;*/

/*border-left:gray 1px solid;

border-top:gray 1px solid;*/

background: no-repeat right top rgb(33, 136, 104); padding: 0px; border: 0px currentColor; text-align: center; color: rgb(235, 235, 235); font-weight: bold;font-size: 12px;height: 20px;

th.other

/**border-left:gray 1px solid;

border-top:gray 1px solid;**/

background: no-repeat right top rgb(33, 136, 104); padding: 0px; border: 0px currentColor; text-align: center; color: rgb(235, 235, 235); font-weight: bold;font-size: 12px;height: 20px;

th.VLocked /* TH标签垂直方向锁住单元格 */

z-index: 1; position: relative; top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);

background-color: #cccccc; text-align: center;

border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;

td.HLocked /* TD标签水平方向锁住单元格 */

z-index: 1; position: relative; left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);

/**background-color: #cccccc; text-align: center;**/

/*border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;*/ /*border-left:gray 1px solid;

border-top:gray 1px solid;*/

padding: 0px; border: 0px currentColor;font-size: 12px;height: 18px;text-align: center;

td.VLocked /* TD标签垂直方向锁住单元格 */

z-index: 1; position: relative; top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);

background-color: #cccccc; text-align: center;

border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;

td.other

/**border-left:gray 1px solid;

border-top:gray 1px solid;*/

padding: 0px; border: 0px currentColor;font-size: 12px;height: 18px;text-align: center;

②jsp页面的结构样例

<div id="iq_box_con" class="iq_box_con">

<div id="DivContainer" style="width: 100%; overflow:scroll;"> <table id='oprregTable' width="3000" cellspacing='1' style="margin-bottom:20" >

<tr class="TrLocked">

</th>

<th rowspan="2" class="HLocked" width="80px">操作<th rowspan="2" class="HLocked" width="40px" style="z-index:9999">序号</th>

<th rowspan="2" class="HLocked" width="100px">测试1</th>

2</th>

3</th>

4</th>

5</th>

6</th>

7</th>

8</th>

<th rowspan="2" class="HLocked" width="120px">测试<th rowspan="2" class="HLocked" width="200px">测试<th rowspan="2" class="HLocked" width="100px">测试<th rowspan="2" class="HLocked" width="100px">测试 <th rowspan="1" colspan="9" class="other">测试 <th rowspan="1" colspan="6" class="other">测试 <th rowspan="1" colspan="5" class="other">测试 </tr>

<tr><!-- 因为对2行进行来了表头合并的操作，所以这行的tr不能用TrLocked进行锁定，否则这行单元格会显示不了 -->

<th class="VLocked" width="120px">测试9</th><th class="VLocked" width="120px">测试10</th><th class="VLocked" width="120px">测试11</th><th class="VLocked" width="120px">测试12</th><th class="VLocked" width="180px">测试13</th><th class="VLocked" width="120px">测试14</th><th class="VLocked" width="120px">测试15</th><th class="VLocked" width="120px">测试16</th><th class="VLocked" width="120px">测试17</th>

<th class="VLocked" width="120px">测试18</th> <th class="VLocked" width="120px">测试19</th> <th class="VLocked" width="120px">测试20</th> <th class="VLocked" width="120px">测试21</th> <th class="VLocked" width="120px">测试22</th> <th class="VLocked" width="150px">测试23</th>

<th class="VLocked" width="120px">测试24</th><th class="VLocked" width="120px">测试25</th><th class="VLocked" width="120px">测试26</th><th class="VLocked" width="120px">测试27</th><th class="VLocked" width="120px">测试28</th>

</tr>

<cc:set var="num" value="0"></cc:set>

<cc:forEach var="node" items="$list">

<cc:set var="num" value="$num+1"></cc:set>

<cc:if test="$num % 2 == 0 ">

<cc:set var="class" value="row2"></cc:set> </cc:if>

<cc:if test="$num % 2 == 1 ">

<cc:set var="class" value="row3"></cc:set> </cc:if>

<tr class="$class">

<td class="HLocked" width="80px"></td>

<td class="HLocked" width="40px">$num+pageSize*(page-1)</td>

<td class="HLocked" width="100px">$node.test1</td>

<td class="HLocked" width="120px">$node.test2</td>

<td class="HLocked" width="200px">$node.test3</td>

<td class="HLocked" width="100px"><fmt:formatNumber value="$node.test4" type="percent" minFractionDigits="2"/></td>

<td class="HLocked" width="100px"><fmt:formatNumber value="$node.test5" type="percent" minFractionDigits="2"/></td>

<td class="other" width="120px" style="text-align: right;padding-right: 5px;"><fmt:formatNumber value="$node.test6"

HTML5调整表格位置

篇一：HTML5 课程设置

HTML5课程大纲

课程目标：

?

掌握HTML5&CSS3最新技术，以及常见HTML5跨平台开发工具，能够完成跨平台WEB APP、响应式布局网站、游戏、跨平台应用等的开发。 ?

令学员具备扎实的HTML&CSS开发基础，掌握SEO、BSU等高级实用技术，能使用HTML5+CSS3开发兼容各大平台的兼容UI。熟练使用JavaScript快速开发各种用户体验交互、展现动画以及前后台数据异步交互，熟练使用常用的JS框架如jQuery等。 ?

学员代码的书写符合前端编码规范，具备良好的编程思想。对Github、SVN等团队开发工具有使用经验，能够快速融入团队开发。 并拥有2个以上的团队项目开发经验，具备良好的团队合作意识。 ?

学员毕业时能够胜任WEB前端开发工程师、JavaScript开发工程师、HTML5开发工程师、响应式网站开发工程师、WebAPP开发工程师、跨平台应用开发工程师、页游开发工程师等岗位。 ?

学员有良好的沟通能力，能够关注最新行业动态，具备新技术的研究与学习能力。对自己有合理的定位。

课程特色：

?

HTML5开发技术是一种多语言开发技术，每种语言在HTML5开发过程中各行其责。最新的课程体系分为2个阶段，每个阶段对应相应的实战项（非模拟项目）。第一个阶段主要学习展示性技术，如：桌面平台不同浏览器的兼容布局；桌面平台和移动平台的响应式布局；WebAPP的布局技巧；手机端应用/网站的展示效果开发；3D空间布局及动画入门等。第二阶段主要学习功能性技术，如：捕捉用户的操作及执行相应动画反馈；前后台进行数据交互；动画绘制；实时通信机制；本地存储和本地数据库；地理定位；移动设备硬件功能调用等。 ?

产学研一体化，项目实训与知识学习相结合，在项目当中学习知识，让学员能够将理论知识应用到实际的开发当中，在开发过程中锻炼实际动手能力，用实际项目来使学员真正的掌握技术。使学员能够对行业和技术既有宏观的理解有对具体开发工作有实际的动手能，充分锻炼学员的团队意识和合作精神。 ?

课程全称穿插职业素质能力课，如每天演讲，针对大部分学生内向不善沟通的问题，提升沟通能力。职业规划课，时间管理能力课等让学员在技术知识之外，具备一个职业人必备的能力和思维，对自己能有客观的定位，有利于学员的就业及长期发展。

第1页 共5页

HTML5课程组成

第2页 共5页

北京博看文思信息技术有限公司

第3页 共5页

北京博看文思信息技术有限公司

第4页 共5页

北京博看文思信息技术有限公司

第5页 共5页

篇二：HTML5标签大全(最终整理版)

一、文字备忘之标签

HTML5中新增的标签<article> 定义文章

<aside> 定义页面内容旁边的内容 <audio> 定义声音内容

<canvas> 定义图形<command> 定义一个控制按钮

<datagrid> 指树或表格状数据格式中的动态数据<datalist> 定义一个下拉列表

<details> 定义一个元素的细节 <dialog> 定义会话或人的交谈

<embed> 定义额外的交互内容或插件 <figcaption>定义指定元素的标题

<figure> 定义一组媒体内容，以及他们的标题<footer> 为章节或页面定义一个底部

<header> 为章节或页面定义一个头部 <hgroup> 定义文档中某段落的信息

<keygen> 定义表单生成的关键 <mark> 定义被标记的文本

<meter> 定义预定义范围内的测量 <nav> 定义导航链接

<output> 定义某种类型的输出 <progress> 定义任意种类任务的进程

<rp> 定义浏览器不支持ruby元素的替代者 <rt> 定义ruby注释的解释

<ruby> 定义 ruby 注释（中文注音或字符）。 <section> 定义章节

<source> 定义媒体资源 <summary> 定义某”detail”元素的头部

<time> 定义日期/时间 <video> 定义视频

<wbr> 定义可能的换行

HTML5支持且同时存在于HTML4中的标签<!– …–> 定义注释

<!DOCTYPE> 定义文档类型 <a>定义超链接

<abbr> 定义缩写 <address> 定义地址元素

<area> 定义图片地图的某区域 <b>定义加粗文字

<base> 定义整个页面的基础URL <bdo> 定义文本显示的方向

<blockquote> 定义一个长引用<body> 定义主体元素

<br> 插入单个的换行<button> 定义按钮

<caption> 定义表格的标题 <cite> 定义引用

<code> 定义计算机代码文本 <col> 定义表格列的属性

<col(转 载 于: 小 龙文 档 网:html5,调整表格位置)group> 定义表格列的组 <dd> 定义个定义描述

<del> 定义删除文本 <dfn> 定义个定义项

<div> 定义文档章节 <dl> 定义定义列表

<dt> 定义定义项 <em> 定义强调文本

<fieldset> 定义控件组<form> 定义表单

<h2>到<h6> 定义头部1到头部6<head> 定义文档信息

<hr> 定义水平线 <html> 定义个html文档

<i> 定义倾斜文本<iframe> 定义内联替代窗口（框架）

<img> 定义个图片<input> 定义输入域

<ins> 定义插入文本<kbd> 定义键盘文本

<label> 定义表单控件的标签 <legend> 定义控件组的标题

<li> 定义列表项 <link> 定义相关资源

<map> 定义图片地图 <menu> 定义菜单列表

<meta> 定义元信息 <noscript> 定义无脚本章节

<object> 定义内嵌对象 <ol> 定义一个有序列表

<optgroup> 定义个选项组 <option> 定义下拉列表选项

<p> 定义段落<params> 定义object的参数

<pre> 定义预格式化文本 <q> 定义短引用

<s> 定义不再正确的文本<samp> 定义简单的计算机代码

<script> 定义脚本<select> 定义可选择列表

<small> 定义小点的文本<span> 定义文档章节

<strong> 定义强调的文字<style> 定义一个样式定义

<sub> 定义下标文字 <sup> 定义上标文字

<table> 定义表格<tbody> 定义表格的主体

<td> 定义表格单元格<textarea> 定义文本域

<tfoot> 定义表格底部 <th> 定义表格头

<thead> 定义表格头 <title> 定义文档的标题

<tr> 定义表格行<ul> 定义无序列表

<var> 定义变量

HTML5不支持的标签<acronym> 在HTML4.01中定义首字母缩略词

<applet> 定义内嵌的小应用程序 <basefont> 定义文档中基本的字体属性

<big> 让文字变大点 <center> 居中显示文字或内容

<dir> 定义目录列表 <font> 指定字体种类，大小，颜色等

<frame> 在框架集中定义独有的窗体<frameset> 定义框架集，包含多个窗体

<noframe> 当浏览器不支持框架的时候显示文字 <strike> 定义删除线文本

<tt> 定义电传打字机文本 <u> 定义下划线文字

<xmp> 定义格式化的文字

HTML5中新增的标签<article> 定义文章

<aside> 定义页面内容旁边的内容<audio> 定义声音内容

<canvas> 定义图形 <command> 定义一个控制按钮

<datagrid> 指树或表格状数据格式中的动态数据 <datalist> 定义一个下拉列表

<details> 定义一个元素的细节<dialog> 定义会话或人的交谈

<embed> 定义额外的交互内容或插件 <figcaption> 定义指定元素的标题

<figure> 定义一组媒体内容，以及他们的标题 <footer> 为章节或页面定义一个底部

<header> 为章节或页面定义一个头部<hgroup> 定义文档中某段落的信息

<keygen> 定义表单生成的关键 <mark> 定义被标记的文本

<meter> 定义预定义范围内的测量<nav> 定义导航链接

<output> 定义某种类型的输出<progress> 定义任意种类任务的进程

<rp> 定义浏览器不支持ruby元素的替代者 <rt> 定义ruby注释的解释

<ruby> 定义 ruby 注释（中文注音或字符）。 <section> 定义章节

<source> 定义媒体资源 <summary> 定义某”detail”元素的头部

<time> 定义日期/时间<video> 定义视频

<wbr> 定义可能的换行

二、HTML5文字备忘之全局属性

HTML5新添加全局属性contenteditable 指定是否允许用户编辑内容true | false

contextmenu 定义元素的上下文菜单menu id

draggable 指定是否允许用户拖拽元素true|false|auto

dropzone 指定当拖拽数据放开的时候会发生什么copy|move|link

hidden 指定元素不相干hidden

spellcheck 指定是否元素要进行拼写检查true | false

HTML5新添加全局属性contenteditable 指定是否允许用户编辑内容true | false

contextmenu 定义元素的上下文菜单menu id

draggable 指定是否允许用户拖拽元素true|false|auto

dropzone 指定当拖拽数据放开的时候会发生什么copy|move|link

hidden 指定元素不相干hidden

spellcheck 指定是否元素要进行拼写检查true | false

已存在的全局属性accesskey 指定访问元素的快捷键字符(character)

class 指定元素的类名（为样式表）类名(classname)

dir 指定元素文本内容的对齐方向ltr|rtl

id 为元素指定唯一的idid

lang 为元素内容指定语言代码语言代码(language code)

style 指定元素的内联样式样式定义(style definition)

tabindex 指定元素的tab顺序数值(nubmer)

title 指定元素额外的信息文本(text)

已存在的全局属性accesskey 指定访问元素的快捷键字符(character)

class 指定元素的类名（为样式表）类名(classname)

dir 指定元素文本内容的对齐方向ltr|rtl

id 为元素指定唯一的idid

lang 为元素内容指定语言代码语言代码(language code)

style 指定元素的内联样式样式定义(style definition)

tabindex 指定元素的tab顺序数值(nubmer)

title 指定元素额外的信息文本(text)

三、HTML5文字备忘之事件属性

1. window对象

window新增事件属性onafterprint在文档打印之后执行onbeforeprint 在文档打印之前执行

onbeforeloaded 在文档加载完毕之前执行 onerror 当错误发生时执行

onhaschange 当文档发生改变的时候执行 onmessage 当该信息被触发的时候执行

onoffline 当文档离线的时候执行ononline 当文档上线的时候执行

onpagehide 当窗体隐藏的时候执行onpageshow 当窗体显示的时候执行 onpopstate 当窗体历史改变的时候执行 oedo 当文档执行恢复上一次操作的时候执行

oesize 当窗体大小改变的时候执行 onstorage 当文档加载ok的时候执行 onondo 当文档执行恢复之前一次操作的时候执行 onunload 当用户离开文档的时候执行 window已存在事件属性onblur 当窗体失去焦点的时候执行onfocus 当窗体获得焦点的时候执行 onload 当文档加载完毕的时候执行

2. form表单的事件属性

form表单新增事件属性oncontextmenu 当上下文菜单被触发的时候执行

onformchange 当表单发生改变的时候执行 onforminput 当表单获得用户输入时候执行 oninput 当元素获得用户输入的时候执行oninvalid 当元素验证无效的时候执行 form表单已支持事件属性onblur 当元素失去焦点的时候执行

onchange 当元素改变的时候执行 onfocus 当元素获得焦点的时候执行 onselect 当元素被选择的时候执行 onsubmit 当表单被提交的时候执行 HTML5不支持的form表单事件属性oeset 当表单重置的时候执行

3. 键盘事件

已存在的键盘事件属性onkeydown 当键按下的时候执行

onkeypress 当键按下并释放的时候执行onkeyup 当键抬起的时候执行

4. 鼠标事件

HTML5新增鼠标事件属性ondrag 当元素被拖拽的时候执行

ondragend 当元素拖拽操作结束的时候执行 ondragenter 当元素拖拽进入释放对象的时候 ondragleave 当元素拖拽离开释放对象的时候 ondragover 当元素拖拽经过释放对象的时候 ondragstart 当元素拖拽操作开始的时候执行 ondrop当拖拽元素被放开的时候

onmouswheel 当鼠标滑轮滚动的时候执行onscroll 当元素的滚动条滚动的时候执行 已存在的鼠标事件属性onclick 当鼠标点击的时候执行

ondbclick 当鼠标双击的时候执行onmousedown 当鼠标按下的时候执行

onmousemove 当鼠标移动的时候执行 onmouseout 当鼠标移出元素的时候执行 onmouseover 当属性进入元素的时候执行 onmouseup 当鼠标抬起的时候执行

5. 媒体事件

HTML5中新增媒体事件oncanplay 当媒体可以播放的时候执行

oncanplaythrough 当媒体可以播放到最后的时候执行

ondurationchange 当媒体长度改变的时候执行

onemptied 当媒体资源元素变成空的时候执行

onended 当媒体已经到达最后的时候执行

onerror 当加载元素发生错误的时候执行

onloadeddata 当媒体数据加载完毕的时候执行

onloadedmetadata 当媒体元素的持续时间加载完毕的时候执行

onloadstart 当浏览器开始加载媒体数据的时候执行

onpause 当媒体数据暂停的时候执行

onplay 当媒体数据继续开始播放的时候执行

onplaying 当媒体数据已经开始播放的时候执行

onprogress 在浏览器正在获取媒体数据的时候执行

oatechange 当媒体数据播放比率发生改变的时候执行

oeadystatechange 当ready-state发生改变的时候执行

onseeked 当元素的seeking属性不是true的时候执行

onseeking 当元素的seeking属性是true的时候执行

onstalled 当获取元素数据发生错误的时候执行

onsuspend 当浏览器停止获取媒体数据的时候执行

ontimeupdate 当媒体改变其播放位置的时候执行

onvolumechange 当媒体音量大小发生改变的时候执行，包括无声

onwaiting 当媒体元素停止播放的时候

已存在的媒体事件属性onabort 碰到abort的时候执行

四、HTML5文字备忘之浏览器的准备情况

篇三：解读：HTML中表格的优缺点

解读：HTML中表格的优缺点

我们知道，互联网发展到几天，HTML已经进入现在的HTML5时代，虽然现在HTML5还没有正式成为规范，但是很多大公司已经在开始使用，而CSS的诞生，也使得页面的布局由原来的table布局，走向了现在的div + css的布局。 那论其优缺点，笔者认为布局没有好坏，只要适不适合！

进来，很多人在问我，现在大多数布局都采用div了，表格是不是可以不要了，答案当然是不可以了。

下面我们来看看表格为什么也有它自身的优势，没有完全被替代。

我们知道，表格布局，内容不被搜索引擎喜欢，换言之：使用table布局，搜索引擎抓取页面的信息不好，即是优化不好，那做网络营销的人肯定问题就来了，既然不好，那就不要了？！

下面我们还是来看看表格的优缺点，先从缺点看，在从优点看！ Table布局的缺点：

1、 标签结构多，复杂

我们可以从表格的结构来看：

<table>

<tr>

<td>内容1</td>

</tr>

</table>

从上面表格的结构标签来看，标签的对数较多，在表格布局中，主要是用到表格的相互嵌套使用，这样就会造成代码的复杂度更高！

2、 表格布局，不利于搜索引擎抓取信息，直接影响到网站的排名。 以上也就是表格最主要的两个缺点，下面我们在来看看表格布局的优点。 Table布局的优点：

1、 表格布局，使得结构位置更简单

2、 对于没有学习CSS的人来说，只能选择table

3、 对于学习的初期，table更容易理解

4、 数据化的存放更合理。例如，学生信息这样的表，如果要在网页中显示，表格布局反而会更简单，相反利用div+CSS会使得事情更加复杂化！ 从上述优缺点来看，table不是不可以被替代，但是，table在存放页面数据化的表格信息时，会使得我们开发起来更加容易，节省很多时间。

综上，表格和div+CSS布局各有优缺点，并不应该完全舍弃，我们应当结合实际情况，确定在什么情况使用什么标签更合适，选择合适的标签这样才是一个好的页面布局！