1、border里不要带单位就可以，具体 *** 作如下，首先新建一个HTML文件，写入基本的结构，创建一个带边框的表格：
2、接下来设置table的属性border的值为0，即可消除边框，然后在style标签中设置css样式，给表格一个border-collapse的属性，属性值为collapse即可合并表格的边框，显得跟紧凑，最后给表格设置颜色，字体颜色等样式美化一下：
3、最后打开浏览器预览效果，表格就是不带边框的了。以上就是html去除表格的 *** 作了：
下面给你介绍几种常见测错误用法：
一、不要使用section作为div的替代品
人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说，就是直接用作替代品(用于样式)。
二、只在需要的时候使用header和hgroup
写不需要写的标签当然是毫无意义的。不幸的是，我经常看到header和hgroup被无意义的滥用。你可以阅读一下关于header和hgroup元素的两篇文章做一个详细的了解，其中内容我简单总结如下：
header元素表示的是一组介绍性或者导航性质的辅助文字，经常用作section的头部
当头部有多层结构时，比如有子头部，副标题，各种标识文字等，使用hgroup将h1-h6元素组合起来作为section的头部
header的滥用
由于header可以在一个文档中使用多次，如果你的header元素只包含一个头部元素，那么丢弃header元素吧。
<hgroup>的错误使用
在headers这个主题上，我也经常看到hgroup的错误使用。有时候不应该同时使用hgroup和header
三、figure元素的常见错误
不是所有的都是figure
Logo并不是figure
Figure也不仅仅只是
另一个常见的关于figure的误解是它只被使用。figure可以是视频，音频，图表，一段引用文字，表格，一段代码，一段散文，以及任何它们或者其他的组合。不要把figure局限于。web标准的职责是精确的用标签描述内容。
四、不要使用不必要的type属性
在HTML5中，script和style元素不再需要type属性。然而这些很可能会被你的CMS自动加上，所以要移除也不是那么的轻松。但如果你是手工编码或者你完全可以控制你的模板的话，那真的没有什么理由再去包含type属性。所有的浏览器都认为脚本是javascript而样式是css样式，你没必要再多此一举了。
方法一：
这种方法用来实现单行垂直居中是相当的简单的，你只要保证元素内容是单行，并且其高度是固定不变的，你只要将其“line-height”设置成和“height”值一样就Ok了。不过这种方法局限性太大，只有单行文本的元素才适用，所以在多行元素中是不能使用这种方法的。
Html Markup
<div class="vertical">content</div>
复制代码
CSS Code:
vertical {
height: 100px;
line-height: 100px;/值等于元素高度的值/
}
复制代码
优点：
适合在所有浏览器，没有足够空间时，内容不会被切掉
缺点：
仅适合应用在文本和上，并且这种方法，当你文本不是单行时，效果极差，差到让你感到恶心。
这种方法对运用在小元素上是非常有用的，比如说让一个button、或者单行文本字段。
方法二：
这种方法将在需要给容器设置绝对定位（position:absolute）,并且定位高度（top:50%）和margin-top为高度的一半（margin-top:-height/2）。这就意味着使用这种方法来实现垂直居中的效果，那么元素必须要有一个固定的高度。这样一来，你给元素设置了固定高度，如果你又给他设置了“overflow:auto”，那么当元素内容超过容器后，这样元素的就会出现滚动，而不会自适应内容的高度。
HTML Markup
<div class="vertical">content</div>
复制代码
CSS Code
vertical {
height: 100px;/元素的高度/
position: absolute;
top: 50%;/元素的顶部边界离父元素的的位置是父元素高度的一半/
margin-top: -50px;/设置元素顶边负边距，大小为元素高度的一半/
}
复制代码
优点：
能在各浏览器下工作，结构简单明了，不需增加额外的标签
缺点：
由于固定死元素的高度，致使没有足哆的空间，当内容超过容器的大小时，要么会消息，要么会出现滚动条（如果元素在body内，当用户缩小浏览器窗口时，body的滚动条将不会出现）。
这种方法主要是针对多行元素来进行元素的垂直居中，而并非是此元素的内容垂直居中，这一点先要理解并分开清楚。另外此方法是通过绝对定位来实现的，那么用这种方法实现元素的垂直居中需要注意以下几点：其一元素定位关系到一个相对定位参考，所以要保证元素是相对于哪个为参考坐标；另外需要设置给元素明确定一个高度值并且给元素设置一个负值的margin-top，而且值为元素高度的一半。这里我建议大家给元素定一个宽度值，因为元素进行绝对定位后脱离文档流，其宽度是根据元素内容所占宽度来计算的，为这能让其视觉效果更好，最好给元素定义一个宽度值。
根据这种方法，我们稍作修改就能使元素不单是垂直居中，而且还可以水平居中，如：
HTML Markup
<div id="wrap">test</div>
复制代码
CSS Code
#wrap {
width: 200px;/元素的宽度/
height:200px;/元素的高度/
position: absolute; l
eft: 50%;/配合margin-left的负值实现水平居中/
margin-left: -100px;/值的大小等于元素宽度的一半/
top:50%;/配合margin-top的负值实现垂直居中/
margin-top: -100px;/值的大小等于元素高度的一半/
}
复制代码
这种方法可以实现元素的水平垂直居中，常用于页面在最中间的布局，使用这种方法一定要把握住：水平垂直居中的元素要有明确的大小（换句话说就是要有确切的宽和高度值）；给元素进行绝对定位，并设置left,top值为“50%”（此处最好使用 对定位，如果只是单单水平居中，此处可以换成相对定位）；最后设置margin-top和margin-left的负值，而且其值分别为元素高度和宽度的一半。
方法三：
方法三是使用的的div模拟表格效果，也就是说将多个<div>的“display”属性设置为禾“table”和“table-cell”，并设置他们的“vertical-align”的属性值为“middle”。有关于“display:table”更多的介绍可以点击这里或者去阅读Quirksmode的《The display declaration》一文。
HTML Code
<div id="container">
<div id="content">content</div>
</div>
复制代码
CSS Code
#container {
height: 300px;
display: table;/让元素以表格形式渲染/
}
#content {
display:table-cell;/让元素以表格的单元素格形式渲染/
vertical-align: middle;/使用元素的垂直对齐/
}
复制代码
优点：
这种方法不会像前面的两种方法一样，有高度的限制，此方法可以要据元素内容动态的改变高度，从而也就没有空间的限制，元素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。
缺点：
不足之处呢？这种方法只适合现代浏览器，在IE6-7下无法正常运行；而且较前两者而言，结构也更复杂。
这种方法在现代浏览器下是非常方便。但是在IE6-7中是不被支持的，因为display:table在IE6-7中不被支持，那么为了解决这种方法在IE6-7的兼容，需要额外增加一个div，并使用hack，下面我们一起来看看其解决办法。
HTML Markup
<div class="table">
<div class="tableCell">
<div class="content">content</div>
</div>
</div>
复制代码
CSS Code
table {
height: 300px;/高度值不能少/
width: 300px;/宽度值不能少/
display: table;
position: relative; float:left;
}
tableCell {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 10px;
position: absolute;
top: 50%;
left: 50%;
}
content {
position:relative;
top: -50%;
left: -50%;
}
复制代码
方法四：
这种方法有点新意，用这种方法你需要在居中元素前面放一个空的<div>（块元素就可以），然后设置这个<div>的高度为50%，margin-bottom为元素高度的一半，而且居中元素需要清除浮动。需要注意的是，使用这种方法，如果你的居中元素是放在body中的话，你需要给html,body设置一个“height:100%”的属性。
HTML Markup
<body>
<div id="floater"><!--This block have empty content --></div>
<div id="content">Content section</div>
</body>
复制代码
CSS Code
html,body {height: 100%;}
#floater{ float:left;
height:50%;/相对于父元素高度的50%/
margin-bottom: -120px;/值大小为居中元素高度的一半（240px/2）/
}
#content { clear:both;/清除浮动/
height: 240px; position: relative;
}
复制代码
优点：
这种方法能兼容所有浏览器，在没有足哆空间下，内容不会被切掉
缺点：
元素高度被固定死，无法达到内容自适应高度，如果居中元素加上overflow属性，要么元素出现滚动条，要么元素被切掉；另外就是一个不算缺点的缺点，那就是加了一个空标签。
方法五：
这种方法和方法三一样使用display:table-cell来实现，不过方法五不同之处是这个方法我们需要一个线盒型，用来实现IE下的效果，需要增加一上行内标签比如说“span”（此处最好使用行内标签，千万不要使用块标签，因为使用块标签会没有效果），并把这个线盒型高度设置为100%。
HTML Markup
<p class="table">
<span class="tableCell">Centering multiple lines <br>in a block container</span>
<!--[if lte IE 7]><b></b><![endif]-->
</p>
复制代码
CSS Code
<style type="text/css">
table {
border: 1px solid orange;
display: table;
height: 200px; width: 200px;
text-align: center;
}
tableCell {
display: table-cell;
vertical-align: middle;
}
</style>
<!--[if lte ie 7]>
<style type="text/css">
tableCell {
display: inline-block;
}
b {
display: inline-block;
height: 100%;
vertical-align: middle; width: 1px;
}
</style>
<![endif]-->
复制代码
优点：
这种方法的优点和方法三是一样的，不会有高度的限制。
缺点：
不好的地方就是这种方法为了让IE运行正常，需要额外增加一些标签，另外就是线盒型的标签种类有限制。不过用起来还是蛮方便的。
方法六：
这种方法是采用的display:inline-block，然后借助另一个元素的高度来实现居中
Html Markup
<div id="parent">
<div id="vertically_center">
<p>I am vertically centered!</p>
</div>
<div id="extra"><!-- ie comment --></div>
</div>
复制代码
CSS Code
<style type="text/css">
html,
body{
height: 100%;
}
#parent { h
eight: 500px;/定义高度，让线盒型div#extra有一个参照物，可以是固定值，也可以是百分比/
border: 1px solid red;
}
#vertically_center,
#extra {
display: inline-block;/把元素转为行内块显示/
vertical-align: middle;/垂直居中/
}
#extra {
height: 100%; /设置线盒型为父元素的100%高度/
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
/IE6-7不支持display:inline-block，所以在ie6-7另外写一个hack，用来支持ie6-7/
#vertically_center,
#extra {
display: inline;
zoom: 1; }
#extra {
width: 1px;
}
</style>
<![endif]-->
复制代码
优点：
可以自适应高度，简单易懂
缺点：
需要给元素的父元素设置一个高度，这个高度可以是一个固定值或者百分值高度，另外需要增加一个额外的标签，当作线盒型，如div#extra，并且需要设置其高度为100%。另外就是ie6-7不支持display:inline-block，需要给他们另外写一个样式。
这是一个很有意思的方法，但你要懂得如何使用display。有关于这种方法的 *** 作，大家可以去看一看Jonathan Potter写的《CSS, Vertical Centering》。
1中怎么样将表格居中显示
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index，填充问题基础代码。
2、在index中的<style>；标签中，输入css代码：table {margin: auto}。
3、浏览器运行index页面，此时table在div中成功居中显示了。
2HTML中怎么用列表框
HTML中下拉列表框是一个可选列表。
该列表的组成需要有select 以及其中的选项option组成。一个select中可以包含多个选项（option），每个option有一个value属性表示这个option的值，展示文本这对标签中间的“展示文本”是用于在下拉的时候展示的选项，其中的某一个option在选中以后，这个option的value就可以用于和后台交互进行逻辑处理。
以下是一个最简单的DEMO: 列表框演示<body> 。
是的
一、前言
前3篇文章实际都是为本文做铺垫的，如果以下棋表示，前三篇是普通走棋，本篇是将军！
目前市面上有不少表单验证插件，看似强大，实在糟糕！
总结下，有以下一些问题：
过多干预
包括：改变了表单元素UI, 为表单元素绑定过多事件等
布局等限制
包括：需要特定结构的布局，需要特定的类名或者ID
学习成本
包括：N多元作者自定义的属性，或者自定义的特定的数据结构
可用性
当JS出现错误的时候而无法正常运作的时候，验证就是聋子的耳朵——摆设，即使在现代浏览器下也是如此。
面向未来的表单验证
验证驱动
验证信息HTML驱动，例如HTML5中required, pattern, multiple等
验证形式
非即时响应，submit验证，如Chrome浏览器的处理；或者弱即时响应，如FireFox浏览器仅仅红色外发光。
验证交互
浮动形式，尖角指示。
换言之，所谓面向未来的表单验证，是遵循W3C HTML5规范的表单验证，我们可以从目前领先的浏览器中看到大致雏形。而本文所有展示的html5Validate表单验证插件，就是基于这个未来设计的。
二、html5Validate概述
html5Validate插件的验证机制、交互形式甚至形式与Chrome浏览器HTML5表单内置验证走的很近。在使用的时候，就是写写原生的HTML5表单代码。我只想说：走阳光大道和过独木桥的感觉是完全不一样的。
举个简单例子，一个邮箱验证，HTML5代码表示应该是下面这个样子：
<input type="email" required>好巧的是，使用html5Validate进行表单验证的时候，也是使用上面这段HTML代码！
类似下面的绑定：
$("form")html5Validate();于是，您在提交表单的时候会（在各个浏览器下）看到这样子的提示：
跟Chrome浏览器下的提示文字近似：
html5Validate支持我所知的HTML5验证相关的东西，如type="email", type="number", type="tel", type="url", step, min, max, required, pattern, multiple等，并有一些本地化扩展，如增加了type="zipcode"邮编等，支持type="hidden"的完整验证（HTML5中是忽略的），支持多type共存，例如type="email|tel", 可以让文本框输入邮箱或者手机号码。
type="date", type="hour", type="password"等因为不同网站规则不一样，因此，没有放在html5Validate中，不过，您可以很简单地进行扩展，使您的项目支持之，这个后面会介绍（参见 part 9-4）。
为了满足实际开发需求，额外增加了四个自定义属性值：data-key, data-target, data-min, data-max 具体何用，下面会详细讲解。
支持自动的全角转半角。
注意：type="submit", type="reset", type="file", type="image"以及disabled的表单元素没有验证性可言，因此，下面所说的表单元素，并不包括他们。
兼容性
html5Validate通过jQuery14+测试，支持正常IE6-IE10浏览器，FireFox, Chrome等现代浏览器。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）