• 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中table表格标签的基础学习教程

HTML中table表格标签的基础学习教程

作者:品味人生 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含HTML,table,表格等相关知识,品味人生 希望在学习及工作中可以帮助到您

表格的标签组成
HTML中的表格是由<table>为主体标签,浏览器会将该标签解释为一个表格。表格中的行使用<tr>标签进行定义。<tr>标签为<table>标签的子类,设置若干个<tr>标签可以将表格分割为若干个行。<td>标签用于定义表格的列,<td>标签为又是<tr>标签的子类,因此每个行都需要设置相应数量的<td>标签来分割列,形成一个完整的表格。
表格的标签组合关系为:

  1. <table>  
  2. <tr>  
  3. <td>我是单元格1</td>  
  4. <td>我是单元格2</td>  
  5. </tr>  
  6. </table>  

表格中可以插入文本、图片、列表、段落、表单、水平线等任何html标签,甚至可以用来做页面布局。但是table布局存在代码冗余过长、不符合HTML规范、搜索引擎不友好等问题。因此建议大家尽量不要使用table进行页面布局,除非页面中确实需要一张表格。
剩下的<th>、<thead>、<tbody> 和 <tfoot>很少被用到,这是由于浏览器对它们的支持不太好。
 
表格和边框属性
表格自身可以定义border属性来决定表格边框的宽度,该属性的值默认是以数字单位进行显示,例如border=”1″该值的单位为px。注意,不要在border的数值后面加上任何单位,否该值无法正确识别。
 
表格的表头
在<table>中可以通过<th>标签设置表头,表头的<th>标签与<tr>标签属于平级,并且表头一般出现在<tr>标签的前面。对于一个表格来说,表头并不是必须的,可以根据需要插入表头。<th>标签内的文字会被自动加粗。
 
单元格的合并
单元格的合并分为垂直合并与水平合并,在合并时需要确定其他行与列中是否有对应数量的单元格。
水平合并单元格使用colspan属性,其值是用数字的形式确定需要合并的单元格数量,例如colspan=”2″即代表向右合并两个单元格。
垂直合并单元格使用rowspan属性,与水平合并的属性相同,同样也是以数字形式确定需要合并的单元格数量,例如rowspan=”2″代表向下合并两个单元格。
实例演示代码:

  1. <table border=“1”>  
  2. <tr>  
  3. <th>姓名</th>  
  4. <th colspan=“2”>电话</th>  
  5. </tr>  
  6. <tr>  
  7. <td>Bill Gates</td>  
  8. <td>555 77 854</td>  
  9. <td>555 77 855</td>  
  10. </tr>  
  11. </table><h4>横跨两行的单元格:</h4>  
  12. <table border=“1”>  
  13. <tr>  
  14. <th>姓名</th>  
  15. <td>Bill Gates</td>  
  16. </tr>  
  17. <tr>  
  18. <th rowspan=“2”>电话</th>  
  19. <td>555 77 854</td>  
  20. </tr>  
  21. <tr>  
  22. <td>555 77 855</td>  

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

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

相关文章

  • 2017-08-05Zen HTML Elements 使用zen coding的朋友可以收藏下
  • 2017-08-21如何禁止 网页的复制功能
  • 2017-08-05通过href简单实现点击a链接跳到页面中指定的地方
  • 2017-08-05浅谈html中input只读属性readonly和disable的区别
  • 2017-08-05空格 在ie、firefox、chrome浏览器中显示距离不一致
  • 2017-08-05DOCTYPE声明作用及用法详解
  • 2017-08-05html中position的一个小用法使用介绍
  • 2017-11-26img标签 onerror事件
  • 2017-08-05Nofollow标签的写法以及nofollow使用介绍
  • 2017-08-05html 标签 dl dt dd使用说明

文章分类

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

最近更新的内容

    • 什么是 WML?
    • html中隐藏域hidden的作用介绍及使用示例
    • 向HTML中插入视频并兼容所有浏览器的方法
    • 有效网页表单的八条规则
    • IE6 空格bug修正方法
    • HTML的dl、dt、dd标记制作表格对决Table制作表
    • HTML embed标签使用方法和属性详解
    • HTML简单购物数量小程序
    • 用Meta标签代码让360双核浏览器默认极速模式不是兼容模式
    • a标签伪类的作用及书写顺序是什么

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

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