首页 > Web开发 > 详细

Html5之基础-6 HTML表格

时间:2016-03-20 02:22:44      阅读:223      评论:0      收藏:0      [点我收藏+]

一、表格的作用


表格的作用

  (1) 表格通常用来组织结构化的信息

  (2) 表格是一些被称作单元格的矩形框按照从左到右,从上到下的顺序排列在一起而形成的

  (3) 表格的数据保存在单元格里

      - 显示表格数据

      - 设置页面布局

技术分享


二、使用表格


创建表格

  (1) 定义表格

      - 使用成对的 <table></table>标记

  (2) 创建表行

      - 使用成对的 <tr></tr>标记

  (3) 创建单元格

      - 使用成对的 <td></td>标记

技术分享


表格的常用属性

  (1) <table>元素

      - width,设置表格宽度

      - height,设置表格高度     

      - align,设置表格对其方式(left|center|right)

      - border,设置表格边框宽度

      - cellpadding,设置内边距(单元格边框与内容之间的距离)

      - cellspacing,设置外边距(单元格之间的距离)

      - bgcolor,设置表格背景颜色

  (2) <tr>元素

      - align,设置水平对齐方式(left|center|right)

      - valign,设置垂直对齐方式(top|middle|bottom)

  (3) <td>元素

      - align,设置水平对齐方式(left|center|right)

      - valign,设置垂直对齐方式(top|middle|bottom)

      - width,设置宽度

      - height,设置高度

      - colspan,设置单元格跨列

      - rowspan,设置单元格跨行


表格标题<caption>

  (1) 使用 <caption> 元素为表格定义标题

      - 默认情况下,标题将在表格上方居中显示

  (2) <caption> 标签必须紧随 <table> 标签之后,且只能对每个表格定义一个标题


技术分享


三、表格的复杂应用


行分组

  (1) 表格可以划分为3个部分:表头、表主体和表尾

  (2) 表头行分组:    <thread></thread>

  (3) 表主体行分组:  <tbody></tbody>

  (4) 表尾行分组:    <tfoot></tfoot>

      - 包含一个或者多个 <tr> 元素

技术分享


不规则表格

  (1) 设置单元格<td>的跨行或者跨列属性

  (2) 跨列: colspan

      - 水平方向延伸单元格,值为一正整数,代表此单元格水平延伸的单元格数

  (3) 跨行: rowspan

      - 垂直方向延伸单元格,值为一正整数,代表此单元格垂直延伸的单元格数

技术分享


表格的嵌套

  (1) 嵌套表格

      - 在单元格中放置另外一个表

      - 即 <td> 元素中再包含 <table> 元素

  (2) 使用嵌套的表格以设计复杂表格或者复杂布局

技术分享


总结:本章内容主要介绍了下 HTML表格使用方法。

本文出自 “技术交流” 博客,谢绝转载!

Html5之基础-6 HTML表格

原文:http://jasonteach.blog.51cto.com/5192112/1752862

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!