• table元素

table用来创建表格,表格也可以用来布局,但是嵌套过于复杂,不利于灵活布局,已经几乎没人用它来布局了。

表格基本上有如下几个标签构成:

(1)<table>标签用来创建表格的外部框架。

(2)<tr>标签用来创建表格的行。

(3)<th>标签用来创建表头单元格。

(4)<td>标签用来创建tr行中的单元格。

(5)<caption>标签用来创建标题。

(6)<thead>标签用来创建表格的表头。

(7)<tbody>标签用来创建表格的主体部分。

(8)<tfoot>标签用来创建表格的页脚。

其中 <thead>、<tbody>和<tfoot>标签实现了表格的语义化布局,这样表格所组织的内容结构就更加清晰了。也就是说,假如,有一个表格,希望对其中的内容进行分组:

(1)一行能够起到表格标题的作用。

(2)一些行是表格的主要数据。

(3)最后一行位于表格最底部的总结类型的行。

<thead>中的<th>也是语义化布局的一部分,<th>中的字体会默认加粗。

  • <td>rowspan属性:定义了单元格应该纵跨的行数,也就是实现了单元格纵向合并的效果。
  • <td>colspan属性:定义单元格应该横跨的列数,也就是实现了单元格横向合并的效果。
 

<col>标签—— column 列:可以为表格中一个或多个列定义属性值

<colgroup>标签—— column group 列组:对表格中的列进行组合,以便对其进行样式修改。

【属性】

span:规定col元素应该横跨的列数

 

HTML知识点总结之table的更多相关文章

  1. 【数据分析知识点】detailed table of contents

    Exploratory Data Analysis - Detailed Table of Contents http://www.itl.nist.gov/div898/handbook/eda/e ...

  2. 简单注册表单--HTML练手项目3【Table】

    [本文为原创,转载请注明出处] 技术[HTML]   布局[Table] 步骤1  划分table布局 步骤2 填充内容 文本框+密码框+单选框+复选框+多行文本域+按钮 <input> ...

  3. lua下的简单OO实现

    笔者学习了当前(文末各文献)lua下的各种OO实现方法.略作笔记. 也提出了一些自己的想法.主要还是记录供将来着之参考.   1.概述   首先[2]PIL第二版中给出了OO的基于table的实现方式 ...

  4. JQuery实战总结一 可编辑的表格

    JQuery视频看完了,总结学习,记得在牛腩视频中的修改新闻类别的时候也使用了这样的可编辑的表格,使用到 了ajax控制界面不再刷新,轻松解决了类别的名称的修改的问题,直接提交到数据库,这样的方式比起 ...

  5. [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table、View

    本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracl ...

  6. html table 知识点

    第一点就是图片在表格中不能对齐边沿的问题,这是和浏览器的渲染模式相关的,在标准模式中是不能对齐的,除非改变CSS某些样式.而在准标准模式和怪异模式中,默认就是对齐的. 这一特性在以前的表格布局时代是大 ...

  7. ios知识点总结——UITableView的展开与收缩及横向Table

    UITableVIew是iOS开发中使用最为广泛的一种控件,对于UITableView的基本用法本文不做探讨,本文主要是针对UITableView的展开与收缩进行阐述,在文章的后面也会探讨一下横向ta ...

  8. 前端HTML学习 table标签 知识点与使用

    表格基本结构 <table> <tr> <td>单元格</td> </tr> </table> < tr >表示 行 ...

  9. Sqlserver中一直在用又经常被忽略的知识点一

    已经有快2个月没有更新博客了,实在是因为最近发生了太多的事情,辞了工作,在湘雅医院待了一个多月,然后又新换了工作...... 在平时的工作中,Sqlserver中许多知识点是经常用到的,但是有时候我们 ...

随机推荐

  1. 大白话Vue源码系列(03):生成render函数

    阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...

  2. 第五章——定时器Timer序言

    定时器很重要. 上家公司有用的,是用来做定期数据同步的. 以前老同学有用到,曾经就定时器讨论过一次,还给过一次他我关于spring-task的总结. 但是并没有意识到定时器与多线程的关系,或者说,上一 ...

  3. immutable.js 更新数组(mergeDeepWith)

    使用情境: 技术栈为:react + redux + antd (reducer中处理数据使用了immutable.js). 问题:如下图,做一个搜索功能,form表单每改变一次,都会调用一个upda ...

  4. Python:list 和 array的对比以及转换时的注意事项

    Python:list 和 array的对比以及转换时的注意事项 zoerywzhou@163.com http://www.cnblogs.com/swje/ 作者:Zhouwan 2017-6-4 ...

  5. 微信小程序教学第四章第一节(含视频):小程序中级实战教程:详情-页面制作

    详情 - 页面制作 本文配套视频地址: https://v.qq.com/x/page/o0555o20xjd.html 开始前请把 ch4-1 分支中的 code/ 目录导入微信开发工具 这一章节中 ...

  6. SUID、SGID、Sticky BIT

    添加SUID: chmod 4755 可执行文件名 或 chmod u+s 可执行文件名 删除SUID: chmod 755 可执行文件名 或 chmod u-s 可执行文件名 [root@local ...

  7. iOS开发--数据库管理CoreData的使用

    CoreData是iOS5后,苹果提供的原生的用于对象化管理数据并且持久化的框架.CoreData本质上是将底层数据库封装成对象进行管理.但数据库实际上只是CoreData的一个功能,并不是全部功能. ...

  8. 零基础学习webpack打包管理

    这些天在项目之余的时间学习了webpack打包项目的东西,非常荣幸的找到一些大神的文章来学习,死劲嚼了几天,终于略知一二.在以后的工作上还需继续学习,下面我将分享我这几天学到的一点东西,希望能让我一个 ...

  9. Udacity并行计算课程笔记-The GPU Programming Model

    一.传统的提高计算速度的方法 faster clocks (设置更快的时钟) more work over per clock cycle(每个时钟周期做更多的工作) more processors( ...

  10. Windows下RabbitMQ安装及入门

    1.Windows下安装RabbitMQ需要以下几个步骤 (1):下载erlang,原因在于RabbitMQ服务端代码是使用并发式语言erlang编写的,下载地址:http://www.erlang. ...