1.表格的基本格式

2.<table>标签下的常用属性

3.<table>标签下的边框设置

4.<tr><th><td>标签下的常用属性

5.拆分与合并单元格

6.表格的结构化、直列化、标题

7.表格的嵌套

在网页中表格是一种经常使用到得设计结构,就像表格的内容中可以包含任何的数据,

如文字、图像、表单、超链接、表格等等,所有在 HTML 中可以使用的数据,都可以被设

置在表格中,所以有关表格设置的标记与属性页特别多。

1 4.1  表格的基本格式

格式:

<table>

<tr>…

<th>… </th>

<th>… </th>

<th>… </th>

</tr>

<tr>

<td>… </td>

<td>… </td>

<td>… </td>

</tr>

</table>

功能: <table>…</table>用来声明表格开始与结束.

<tr>…</tr>用来设置表格的行.

<th>…</th>用来设置标题栏位.

<td>…</td>用来设置数据栏位.

4.2 <table> 标签下的属性

属性名称 属性值 说明

border 像素 设置表格的边线

cellspacing 像素 绝对设置,指单元格之间的距离

百分比 相对设置,存储格框线宽度

cellpadding 像素 绝对设置,是指单元格内文字与边框的距离

百分比 相对设置,数据与框线的距离

width 像素 绝对设置,像素表示表格宽度

百分比 相对设置,百分比表表格宽度

height 像素 绝对设置,像素表示表格宽度

百分比 绝对设置,百分比表表格宽度

align left 表格往左靠(默认)

center 表格往中靠

right 表格网右靠

bgcolor 英文/十六 表格的背景颜色

background URL 表格的背景图片

summary 字符串 用来描述表格数据说明

bordercolor 英文/十六 边框的颜色

bordercolorlight 同上 边框的亮色

bordercolordark 同上 边框的暗色

4.3 <table> 标签下的边框设置

属性名称 属性值 说明

frame void 不要显现表格的边线

above 只要显现出表格的上边线

below 只显现出表格的下边线

hsides 只显示表格的上下边线

vsides 只显现表格的左右边线

lhs 只显现表格的左边线

rhs 只显现表格的右边线

border/box 会显现出表格的所有边线

rules rows 只显示出横行的格框线

cols 只显示出直行的格框线

all 显示全部格框线

groups 表示列组合水平部分

none 不显示任何格框线

4.4<tr><th><td> 标签下的常用属性

该属性必须在 border

的属性值不为0 的状

态下!

属性名称 属性值 说明

width 像素 绝对设置,以像素值设置宽

百分比 相对设置,以百分比设置宽

height 像素 绝对设置,以像素值设置高

百分比 相对设置,以百分比设置宽

bgcolor 英文/十六 数据栏的颜色设置

align(水平方向) left 数据靠左

center 数据靠中

right 数据靠右

valign(垂直方向) top 数据靠上

middle 数据靠中

bottom 数据靠下

nowrap 无 在单元格中换行

5 4.5  拆分与合并单元格

属性名称 属性值 说明

colspan 数字 向两边扩展栏位

rowspan 数字 向下扩展栏位

6 4.6  表格的结构化 、 直列化 、 标题

(1).结构化格式:

<table>

<thead>……</thead> --------表头区

<tbody>……</tbody> --------表体区

………………………

<tfoot>……</tfoot> --------表尾区

</table>

(2).直列化格式:<colgroup>….</colgroup>

属性名称 属性值 说明

align left 靠左

center 靠中

right 靠右

valign top 靠上

middle 靠中

bottom 靠下

span 数字 直列数目

width 像素/百分比 宽度

个别直列设置

格式:<col>功能完全和<colgroup>一样.

(3).表格的标题:

<table>

<caption>….</caption>

</table>

<caption>下的属性值有:

属性名称 属性值 说明

align top 标题在表格上方

bottom 标题在表格下方

7 4.7  嵌套表格的应用: : : : 看实例. . . .

4 ;XHTML表格的更多相关文章

  1. XHTML表格

    1.基本格式: <table> <tr> <th>A</th><th>B</th><th>C</th>& ...

  2. HTML的表格标签

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. xhtml、html与html5的区别

    一.基本概念: html:超文本标记语言 (Hyper Text Markup Language) xhtml:可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过语法 ...

  4. Html报表用Excel打开保持表格线【Html报表模板】

    注:本人调试的最简版,前两处红色部分是为了输出Excel表格线:x:str表示输出为文本样式,避免被输出为科学计数法. <!DOCTYPE html PUBLIC "-//W3C//D ...

  5. PHP修改表格(增删改)

    要求: 1.熟练shi用  post 和  get  传值        2. php嵌套在HTML中        3.熟练:if 语句(其他语句)的使用 --------------------- ...

  6. 那点你不知道的XHtml(Xml+Html)语法知识(DTD、XSD)

    什么是XHtml: 摘录网上的一句话,XHTML就是一个扮演着类似HTML的角色的XML. XHtml可当模板引擎应用: CYQ.Data 框架里有一套XHtmlAction模板引擎, 应用在QBlo ...

  7. jQuery动态增删改查表格信息,可左键/右键提示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  9. Web jquery表格组件 JQGrid 的使用 - 全部代码

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

随机推荐

  1. 腾讯开源 MMKV — 基于mmap的高性能通用key-value组件

    一.介绍 MMKV 是基于 mmap 内存映射的 key-value 组件,底层序列化/反序列化使用 protobuf 实现,性能高,稳定性强.从 2015 年中至今,在 iOS 微信上使用已有近 3 ...

  2. Android开发技术周报183学习记录

    Android开发技术周报183学习记录 教程 Android性能优化来龙去脉总结 记录 一.性能问题常见 内存泄漏.频繁GC.耗电问题.OOM问题. 二.导致性能问题的原因 1.人为在ui线程中做了 ...

  3. Oracle开窗函数笔记及应用场景

    介绍Oracle的开窗函数之前先介绍一下分析函数,因为开窗函数也属于分析函数 分析函数用于计算基于组的某种聚合值,它和聚合函数的不同之处是:对于每个组返回多行,而聚合函数对于每个组只返回一行. 上面是 ...

  4. Aseprite入门:第一个gif动图

    前言:Aseprite入门教程 1.新建图片: 选择新建文件,然后选定宽高和颜色及背景类型,点击OK进行图片的创建: 2.绘制一个基础图形,为了方便还是选用球形: 填充上颜色: 美化(添加阴影增加小球 ...

  5. ubuntu 16.04 安装caffe2的方法及问题解决

    工作需要安装caffe2,从用户体验上来讲,caffe2的安装绝对是体验比较差的那种,花费了我那么多时间去倒腾,这样的用户体验的产品,估计后面是比较危险的. 废话少说,直接上步骤: 官网上有安装目录, ...

  6. python 中numpy dot函数的使用方法

    这个函数在的数字信号处理中用处还是比较广泛的,函数的具体定义如下所示: numpy.dot(a, b, out=None) 该函数的作用是获取两个元素a,b的乘积,表示的含义如下所示: dot(a, ...

  7. 【Objective-C】内存管理

    涉及三大知识点:引用计数器,属性参数,自动释放池 一.引用计数器(程序编译时Xcode可以自动给你的代码添加内存释放代码,如果编写手动释放代码Xcode会报错) 1.关闭ARC(xcode 4.x之后 ...

  8. [android]__如何在studio中导入,使用开源的UI组件

    前言 在编程开发中,我们对第三方的优质开源组件是十分依赖的,在很多时候,我们都会使用到他们.使用第三方开源组件能够给我们的编程开发带来很大的便利.今天以这篇文章记录关于在android项目中引用第三方 ...

  9. Apache-Flink深度解析-TableAPI

    您可能感兴趣的文章合集: Flink入门 Flink DataSet&DataSteam API Flink集群部署 Flink重启策略 Flink分布式缓存 Flink重启策略 Flink中 ...

  10. LearnOpenGL学习笔记(五)——纹理

    在设计物体表面时,很多时候我们不满足于一种颜色或者几种简单颜色,我们希望是丰富多彩的图案,或者说我们提供给它的图片.这样一个顶点一个顶点的去指定那是行不通了,我们不可能把所有顶点用数字去表达出来,必须 ...