HTML5--Table

2022-11-11 16:27:42

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

码农公寓

相关文章