HTML5--Table

Posted on 2018-06-29 14:18  eilinge  阅读(593)  评论(0)  编辑  收藏  举报
1.先给大加看下效果图,有点干劲
2.编写的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type='text/css'>
table  {
 border:solid 1px #99CCFF;
 border-collapse:collapse;
  }
.bg_th {
 background:#0000FF;
 color:#fff;
  }
.bg_even1 {
 background:#CCCCFF;
   }
.bg_even2 {
 background:#FFFFCC;
   }
</style>
</head>
 
<body>
<table>
 <caption>IE浏览器发展大事记</caption>
    <colgroup>
     <col class='bg_even1' id='version' />
        <col class='bg_even2' id='postTime' />
        <col class='bg_even1' id='OS' />
    </colgroup>
    <tr class='bg_th'>
     <th>版本</th>
        <th>发布时间</th>
        <th>绑定系统</th>
    </tr>
    <tr>
     <td>Internet Explorer 1</td>
        <td>1995年8月</td>
        <td>WINDOWS 95 PLus</td>
    </tr>
    <tr>
     <td>Internet Explorer 2</td>
        <td>1995年11月</td>
        <td>WINDOWS和Mac</td>
    </tr>
</table>
</body>
</html>
列分组的表格
col和colgroup元素可以对表格中的列进行分组
col
 标签可以为表格中一个或多个列定义属性值。
 如果需要对齐全部列应用样式,col>标签很有用,这样就不需要对各个单元格和各行重复应用样式了
    只能在table或colgroup元素中使用.
    col元素是仅包含属性的空元素,不能包含任何信息。如果要创建列,就必须在tr(一行)元素内嵌入td(一个单元格)元素
为列分组定义样式时,建议为colgroup>或col>标签添加class属性,然后使用css类样式定义列的对齐方式、宽度和背景色等样式
 
html5支持的table>标签属性
border   定义表格边框,值为整数,单位为像素。当值为0时,表示隐藏表格边框线。 --css/border
cellpadding 定义数据表的补白.           --css/padding
cellspacing 定义数据表单元格的边界.          --css/margin
width  定义数据表的宽度           --css/width
frame  设置数据表的外边框线显示,实际上它是对border属性的功能扩展。
rules  设置数据表的内边线显示,
summary  定义表格的摘要