• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > 浅谈Html网页表格结构化标记的应用

浅谈Html网页表格结构化标记的应用

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含Html,网页,表格,标记等相关知识,佚名 希望在学习及工作中可以帮助到您

在讲网页表格的结构化标记之前,还是先看几幅图片。

Html表格的结构化

所谓的结构化,正如上述第一副图所示,就是把我们的表格划分为三种:表头、表体、表尾。从而当我们在修改表体部分的时候,不会影响到其它两部分,从而解除了耦合,方便我们的应用。

结构化格式

  1. <table>     
  2.      
  3. <thead>…</thead> --------表头区     
  4.      
  5. <tbody>…</tbody>---------表体区     
  6.      
  7. <tfoot>…</tfoot>------------表尾区     
  8.      
  9. </table>    

总结:通过把表格划分为三部分,方便了我们对表格的编辑操作。
 
Html表格的标题

每个表格都有自己的标题,正如上述第二幅图片所示,那么又如何做到让标题随着内容来移动呢?
 
表格的标题

  1. <table>     
  2.      
  3. <caption>…</caption>     
  4.      
  5. </table>    
<caption>下的属性值有:

属性名称

属性值

说明

align

Top

标题在表格上方

Bottom

标题在表格下方


小结:通过设置表格的标题,能够随时让标题跟着表格动。
 
Html直列化格式

什么是表格的直列化格式呢?我们平常在Excel中所见到的给整列加背景颜色,说的就是这么一回事。

<colgroup>…<colgroup>

属性名称

属性值

说明

Align

Left

靠左

Center

考中

Right

靠右

Valign

Right

靠右

Top

考上

Middle

靠中

Bottom

靠下

Span

数字

直列数


小结:通过设置表格的直列化格式,能够对我们需要的内容进行加深颜色,这里只是针对的列内容。
 
源代码如下:

  1. <html>     
  2. <head>     
  3.      
  4. <li>表格嵌套的使用一</li>     
  5.      
  6. <table  width="500" >     
  7. <tr>     
  8. <td align="center">学生成绩表</td>     
  9. </tr>     
  10. <td>     
  11. <table 

您可能想查找下面的文章:

  • HTML表单提交的几种方式_动力节点Java学院整理
  • HTML表单_动力节点Java学院整理
  • HTML大于号、小于号、空格、引号等常用的转义代码写法一览表
  • HTML中实现鼠标经停时整行(tr)变色
  • html格式化json的实例代码
  • html在消息按钮上增加数量角标的实现代码
  • html页面跳转传递参数问题
  • html、css和js注释规范用法小结
  • Html 实现动态显示颜色块的报表效果(实例代码)
  • html是什么文件 html文件如何打开

相关文章

  • 2017-08-05为什么使用DOCTYPE HTML
  • 2017-08-05在HTML里为FLASH加链接并兼容各大浏览器的方法
  • 2017-08-05关于iframe的一点发现与思考
  • 2017-08-05添加和删除HTML节点的简单示例
  • 2017-08-05html是什么文件 html文件如何打开
  • 2017-08-05HTML中select下拉框内容显示不全部分被覆盖的解决方法
  • 2017-08-05HTML教程:收集的常用的HTML标签(6)
  • 2017-08-05ie6下的背景图片缓存
  • 2017-08-05a标签中写有文字如何隐藏文字显示图片兼容360模式渲染
  • 2017-08-05用jquery进行修复在iframe下的页面锚点失效问题

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 浅谈html标签的显示模式(块级标签,行内标签,行内块标签)
    • 拿什么来拯救你,我的table(海玉博客)
    • 无法定义IE6字体:13px大小无效,IE6自动显示更大的字体的解决方法
    • ie6 失真问题
    • html option禁用选择 select禁用选项示例
    • XHTML中的常用标签整理
    • html设置虚线边框的方法
    • Html 元素隐藏的几种方式
    • 【HTML 元素】嵌入图像的实现方法
    • html doctype 作用介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有