这里主要总结记录下表格的一些属性和简单的样式,方便以后不时之需。

1、<table>

  用来定义HTML的表格,具有本地属性 border 表示边框,border属性的值必须为1或空字符串("")。该属性不会控制边框的样式,而是由CSS来控制

  table元素可以有tr,th,td,thead,tbody,tfoot,colgroup元素

2、<tr>

  用来定义表格的一行。由于HTML表格是面向行的,所以必须分别表示每一行

  tr元素可以在table,thead,tbody和tfoot元素内使用

  tr元素内可以包含一个或者多个td或th元素

  它的align,bgcolor等属性已过时,如果要设置属性,请使用CSS设置

3、<td>

  用来定义表格单元格,可以同colspan,rowspan,headers局部属性使用

  (1)colspan: 列跨度,该属性规定了单元格可横跨的列数,该属性的值必须是整数

  (2)rowspan:行跨度,该属性规定了单元格可横跨的行数,该属性的值必须是整数

  (3)headers:该属性的值是一个或多个单元的ID属性值,将单元格与列标题相关联,可用于使用屏幕阅读器

⚠️:每个表格必须包含以上三个元素

一个简单的实例

<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
</body>
</html>

效果如下:

4、<th>

  用来定义标题单元格,使我们有效区分数据及其描述

  它同 <td> 元素具有相同的局部属性,两者有如下区别:

  1. <th>是表示头标记,通常位于首行或者首列。而且<th>中的文字默认会被加粗,而<td>是不会的
  2. <td>是数据标记,表示单元格的具体的数据

 5、<thead>

  用来定义表格的页眉,表头的包装器。可以定义一行或多行,这些行是 table 元素的列标签

  没有thead元素,所有的tr被假定为属于表的主体

6、<tbody>

  用来定义表格的主体

7、<tfoot>

  用来定义标记表格的页脚

⚠️:

  • <thead>、<tfoot>标签内部必须拥有 <tr> 标签
  • <thead>和<tfoot>标签不管放在 <table> 标签内的哪个位置,都会被分别定为到表格的头部和底部。<tfoot>可以出现在<tbody>或<tr>之前或之后。在html5之前,<tfoot>元素必须出现在<tbody>元素之前,在html5中,可以将<tfoot>元素放在<tbody>或最后一个<tr>元素后面

8、<colgroup>

  用来定义表列组,可以使用其来将样式应用于某个列,当然也可以使用下面要说的col元素

  具有局部属性 span 的 <colgroup> 表示列组应该横跨的列数。默认是一列,即对表格的一列设置样式

  <colgroup>可以包含一个或多个 <col> 元素

9、<col>

  用来表示表单个列,建议使用<colgroup>包裹<col>元素而不是<colgroup>直接设置span属性定义组

  <col>也具有局部属性span

  <col>放在<colgroup>的元素内部,<col>的咩哥实例表示组中的一列。使用该标签可以将样式应用于列的组和该组的单个列

10、<caption>

  用来定义表格的标题,每个表中只能包含一个<caption>元素

一个简单的例子:

<!DOCTYPE html>
<html>
<head>
<style>
thead th,tfoot th {
text-align: left;
background: grey;
color: white
}
tbody th {
text-align: right;
background: lightgrey;
color: grey
}
/* tbody td {
background: greenyellow;
} */
#colgroup1 {
background-color: blueviolet
}
#col3 {
background-color: yellow;
font-size: small
}
</style>
</head>
<body>
<table>
<colgroup id="colgroup1">
<col id="collAnd2" span="2"/>
<col id="col3"/>
</colgroup>
<colgroup id="colgroup2" span="2"></colgroup>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th colspan="2">Size & Votes</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Rank Footer</th>
<th>Name Footer</th>
<th>Color Footer</th>
<th colspan="2">Size And Votes Footer</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Favorite:</th>
<td>XML</td>
<td>CSS</td>
<td>Java</td>
<td>IOS</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Web</td>
<td>HTML5</td>
<td>CS</td>
<td>460</td>
</tr>
</tbody>
</table>
</body>
</html>

效果如下:

HTML表格属性及简单实例的更多相关文章

  1. Android属性动画-简单实例

    1.ValueAnimator //在2000毫秒内,将值从0过渡到1的动画 ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f); anim.setD ...

  2. 实例级别和类级别的static、构造函数、字段属性的简单介绍

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 实例级别 ...

  3. Spring.Net 简单实例-02(属性注入)

    说明:接续Spring.Net 简单实例-01(IOC) 话不多说看操作 1:为UserInfo添加属性 2: 修改App.config中代码 <?xml version="1.0&q ...

  4. SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序

    SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论   异常汇总:http://www ...

  5. TERSUS无代码开发(笔记05)-简单实例电脑端页面设计

    案例笔记电脑端页面设计   1.新建项目(请假管理qjgl)   2.开发软件界面介绍(常用的功能按键)      3.目录中显示元件对象      4.对元件对象的操作主要方式是双击(双击哪个元件, ...

  6. Hibernate(二)__简单实例入门

    首先我们进一步理解什么是对象关系映射模型? 它将对数据库中数据的处理转化为对对象的处理.如下图所示: 入门简单实例: hiberante 可以用在 j2se 项目,也可以用在 j2ee (web项目中 ...

  7. Centos7的安装、Docker1.12.3的安装,以及Docker Swarm集群的简单实例

    目录 [TOC] 1.环境准备 ​ 本文中的案例会有四台机器,他们的Host和IP地址如下 c1 -> 10.0.0.31 c2 -> 10.0.0.32 c3 -> 10.0.0. ...

  8. Flume概述和简单实例

    Flume概述 Flume是一个分布式.可靠.和高可用的海量日志采集.聚合和传输的系统.支持在日志系统中定制各类数据发送方,用于收集数据;同时,Flume提供对数据进行简单处理,并写到各种数据接受方( ...

  9. jQuery简单实例

    jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素. $("p").hide() 演示 jQuery 的 h ...

随机推荐

  1. JavaScript 数组对象常用属性

    concat() 用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. var a = ["aa","ccc"]; var b ...

  2. 54个提高PHP程序运行效率的方法(转载)

    原文地址:http://www.jb51.net/article/69677.htm 1. 如果一个方法可静态化,就对它做静态声明.速率可提升至4倍. 2. echo 比 print 快. 3. 使用 ...

  3. poj 1679 The Unique MST (判定最小生成树是否唯一)

    题目链接:http://poj.org/problem?id=1679 The Unique MST Time Limit: 1000MS   Memory Limit: 10000K Total S ...

  4. 一、CSS实现横列布局的方法总结

    一.使用float实现横列布局的方法 如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行 div1 div2 实现下面图片中布局的css样式如下: 分析: 1.第一行第一 ...

  5. android启动应用

    private void openApp(String packageName) { PackageInfo pi = getPackageManager().getPackageInfo(packa ...

  6. GitHub教程(一) 使用指南

    刚进公司上班的时候,技术总监让我熟悉一下Git(分布式版本控制工具)操作命令和GitHub(代码托管平台),说实话之前我也没有具体使用过Git工具,但是GitHub我还是注册过账号的.在练习将本地仓库 ...

  7. Nginx 性能参数优化

    user www www; # ginx要开启的进程数 一般等于cpu的总核数,没必要开那么多,1个nginx内存消耗10兆左右 worker_processes 4; # 为每个进程分配cpu,上例 ...

  8. 把IDEA中新建的项目提交到Github仓库中

    对于一个没有进行任何版本控制设置的idea工程,使其支持Github,设置步骤如下 到Git官网下载Git的安装包,安装好以后,Git的安装目录下的文件结构应该如下图所示 在IDEA开发工具中配置Gi ...

  9. Grunt 使用(一)基础搭建

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!废话不多说,直接上干货. 1.安装node.js并检查node -v 和 n ...

  10. ZT 七大寡头

    网易评论人才辈出啊!!!看下面   http://comment.news.163.com/news_guoji2_bbs/9GRIIJA90001121M.html 关注 关注他的微博yftyfm ...