html5中table标签

转载 2015年07月07日 14:46:06

如果你现在开始用html5的声明来写页面时,你会发现在定义table的cellspacing和cellpadding时被提示该属性已过时或者提示非法属性。具体原因是在html5中table标签的这两个属性已经被移除,需要定义边框之类的时应该使用css的写法

具体实现如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Html5 Table Test</title>
    <style type="text/css">
        table{ border-collapse:collapse; border:solid 1px Black; }
        table td{ width:50px; height:20px;  border:solid 1px Black; padding:5px;}
    </style>
</head>
<body>
    <table>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

效果图如下:

代码的关键点在于border-collapse:collapse; 和 border:solid 1px Black;。对于padding的定义大家都比较熟悉了,这里主要讲一下的是border-collapse中的collapse和separate值,定义为collapse时,他们的边框会重叠在一起,定义为separate时单元格边框之间会有间隙。不定义时默认为separate。 separate情况下的效果图如下:

代码定义很简单,也是早版本浏览器就支持的东西,只是以前我们一些人习惯用cellspacing和cellpadding来定义,但这两个属性在html5中将要移除,所以需要改过来用css来定义而已。很简单的东西,小记一下而已

相关文章推荐

Hibernate插入和修改数据到数据库中时不修改存在默认值字段

说明: 今天在做一个OA的简单增删除该查的时候,有一个时间类型的字段(数据插入时间),本身想着,这个字段直接中Oracle数据库设置一个Default Value ,就不用再前台install这个字段...

HTML5+CSS3 表格设计(Table)

CSS样式: body { width: 600px; margin: 40px auto; font-family: 'trebuchet MS', 'Lucida sans', Ar...
  • ye1992
  • ye1992
  • 2014-02-18 14:12
  • 25235

html5中table表格标签中合并单元格

百度经验: 首先,我们打开DreamWeaver软件,新建一个html的页面,并以table命名进行保存。 然后我们在页面的body标签...

HTML5可编辑Table

Html5学习-JQuery mobile--table学习使用

9、表格 9.1 表格模板 class=""> class="">Block A class="">Block B (1)表格容器 ...

html5中的table元素

Table <!--table中的width定义了表格的宽度,border定义了表格的边框的宽度,cellpadding定义的是文字与表格边框的距离,定义15效果可...

table的HTML5+css3的可用样式

table的HTML5+css3的可用样式

HTML5学习_day09(1)--(iframe embend dispalu_table !important)的使用

一.浮动框架 iframe       iframe可以称之为内敛框架, 它可以在网页中局部插入另一个文件或者页面。可添加样式。        用法:     iframe可于a标...

html5中不再支持table的cellspacing和cellpadding属性

如果你现在开始用html5的声明来写页面时,你会发现在定义table的cellspacing和cellpadding时被提示该属性已过时或者提示非法属性。具体原因是在html5中table标签的这两个...

html5中table操作

html5中table的js操作                var tab=document.getElementById("objectClassTab"); ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)