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 定义表格的摘要