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来定义而已。很简单的东西,小记一下而已

html5中的table元素

Table
  • u012868077
  • u012868077
  • 2016年05月28日 20:04
  • 1160

HTML5(八)结构标签、列格式化标签、合并表格

表格系列标签当中包含有三个表示表格结构的标签,分别是thead表示表格的头部,tfoot用来表格表格的注脚,tbody用来表示表格的身体。 例子: TABLE02 ...
  • u013225534
  • u013225534
  • 2016年07月31日 22:12
  • 797

HTML5(七)表格-table标签、tr标签、td标签

table标签用于定义一个表格,在网页当中加入一个table标签就相当于定义了一个表格。td和tr标签是table的子标签,分别用于定义行和列 ...
  • u013225534
  • u013225534
  • 2016年07月23日 22:46
  • 1299

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

百度经验: 首先,我们打开DreamWeaver软件,新建一个html的页面,并以table命名进行保存。 然后我们在页面的body标签...
  • masterShaw
  • masterShaw
  • 2016年06月07日 20:33
  • 4572

html中table里的col标签

红色 红色 蓝色 红色 红色 蓝色 这样就可以给每一列设置样式,而不用在每个td里面设置。 第一二两列是红的。第三列是蓝的。...
  • woshixuye
  • woshixuye
  • 2012年05月07日 20:07
  • 1083

table的HTML5+css3的可用样式

table的HTML5+css3的可用样式
  • responsecool
  • responsecool
  • 2015年01月02日 16:59
  • 2080

HTML5 新增标签 及 不再使用标签

一  、HTML5 新增标签   1、
  • vuturn
  • vuturn
  • 2015年04月07日 15:10
  • 1920

html5 垂直居中 模拟table布局

模拟table布局
  • qq_40238154
  • qq_40238154
  • 2017年11月22日 19:16
  • 183

HTML5 -img video flash等 在table 的td中有空隙问题

问题如图,本例中,在td中加入了flsh后,在HTML5中,FLASH和下面的表格之间有了间隙,为 了方便看出来,将TD的背景设成了绿色。 在网上找到原因和方案,特此记录。 a元素下有一个...
  • ddv1999
  • ddv1999
  • 2017年07月04日 10:51
  • 348

HTML5 table标签使用

突然发现,HTML5竟然不支持table的cellspacing和cellpadding属性了,html5想要使用table标签,可以这样使用: html:                 1,...
  • ouqi_qiou
  • ouqi_qiou
  • 2017年06月29日 15:00
  • 214
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5中table标签
举报原因:
原因补充:

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