html 的表格元素总结

原创 2015年07月08日 18:18:25

table、tr和td——生成基本的表格;

th——为表格添加表头单元格;

thead——标记表格的标题行;

tbody——表示构成表格主体的全体行;

tfoot——标记组成表脚的行;

th和td元素定义的colspan和rowspan属性——生成不规则表格单元格;

th和td元素定义的headers属性——将单元格与表头相关联以满足残障辅助技术的需要;

caption——为表格添加标题;

colgroup、col——对表格按列处理而不是按行处理;

使用table元素定义的border属性——表示表格不是用来控制页面布局的;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>上海远地资产管理有限公司</title>
    <base href="http://www.shydzc.com/" target="_blank"/>
    <meta name="author" content="jason"/>
    <meta name="description" content="上海远地资产管理有限公司(简称:远地资产),是一家专业的互联网金融服务平台."/>
    <!--另一种声明html页面所用字符编码的方法
    <meta http-equiv="content-type" content="text/html charset=utf-8"/>
    -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
    <script src="simple.js"></script>
    <noscript>
        <h1>需要javascript脚本!</h1>
        <!--或者导到另一网站
        <meta http-equiv="refresh" content="0;http://www.shydzc.com"/>
        -->
    </noscript>
    <style type="text/css">
        thead th,tfoot th{
            text-align: left;
            background: grey;
            color:white;
        }
        tbody th{
            text-align: right;
            background: lightgray;
            color:grey;
        }
        [colspan],[rowspan]{
            font-weight: bold;
            border: medium solid black;
        }
        thead[colspan],tfoot [colspan]{
            text-align: center;
        }
        caption{
            font-weight: bold;
            font-size: large;
            margin-bottom: 5px;
        }
        #colgroup1{
            background-color: red;
        }
        #col3{
            background-color: green;
            font-size: small;
        }
    </style>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0">
    <caption>Results of the 2011 Fruit Survey</caption>
    <colgroup id="colgroup1">
        <col id="col1And2" span="2"/>
        <col id="col3"/>
    </colgroup>
    <colgroup id="colgroup2" span="2"/>
    <thead>
        <tr>
            <th>Rank</th><th>Name</th><th>Color</th>
            <th colspan="2">Size & Votes</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Favorite:</th><td>Apples</td><td>Green</td>
            <td>Medium</td><td>500</td>
        </tr>
        <tr>
            <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
            <td>Large</td><td>450</td>
        </tr>
        <tr>
            <th>3rd Favorite:</th><td>Pomegranate</td>
            <td colspan="2" rowspan="2">Pomegranates and cherries can both come in a range of colors and sizes</td>
            <td>203</td>
        </tr>
        <tr>
            <th rowspan="2">Joint 4th:</th><td>Cherries</td><td rowspan="2">75</td>
        </tr>
        <tr>
            <td>Pineapple</td>
            <td>Brown</td>
            <td>Very Large</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="5">&copy;2015远地资产</th>
        </tr>
    </tfoot>
</table>

</body>
</html>

效果:


HTML5基础(一)——元素、属性、格式化、样式、链接、表格、列表、块、布局

点击查看原文开始学习html5,自己记录学习笔记,基本上是代码: 开发工具:Intellij IDEA或者HBuilder 首先学习的自然是html标签语言,其实w3cschool中都有,我上传了...

【HTML5学习笔记】5:表格元素的使用

表格就是以网格的形式显示二维数据。 表格的基本构成最少需要三个元素(表格的声明)、(一行单元格)、(一个单元格)。   *建立一个表格/有固定长度的表格 表格元素 张...

html5表格元素

效果: 代码: 表格元素 ///行 张三///单元格 男 未婚 李四 女 已婚 ...
  • a716121
  • a716121
  • 2016年08月02日 12:04
  • 232

HTML5权威指南笔记:11-表格元素

1 生成基本的表格 table元素 元素类型 流 允许具有的父元素 任何可以包含流元素的元素 局部属性 border 内容 caption 、colgroup ...

HTML5列表、表格、媒体、结构元素、iframe

列表: 无序列表: 语法: ........ ........ ........ 特性: 无序,块元素(独占一行)、默认内容之前加上实心小圆点 应用场景: 导航、侧边栏新闻、有规律的图文组合模...

HTML5-表格元素

表格元素

html入门(表格元素)

标签的使用 表格的表头: 默认加粗,单元格居中 常用属性> 1 border:给表格添加边框。 当border属性增大时,只有外围...

html表格、表单元素、img标签、图像映射技术、html4引入flash

html表格、表单元素、img标签、图像映射技术、html4引入flash

记不住就存下来---- HTML 5 表格相关元素&框架相关元素

表格相关元素 元素名称 元素含义  table 定义表格 , 元素只能包含 0 个 或 1 个 子元素(定义表格标题) , 0 个 或 1 个 子元素(定义表格头) ,0 个...
  • MR_LP
  • MR_LP
  • 2016年01月20日 09:46
  • 605
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html 的表格元素总结
举报原因:
原因补充:

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