4 ;XHTML表格
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表格的更多相关文章
- XHTML表格
1.基本格式: <table> <tr> <th>A</th><th>B</th><th>C</th>& ...
- HTML的表格标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- xhtml、html与html5的区别
一.基本概念: html:超文本标记语言 (Hyper Text Markup Language) xhtml:可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过语法 ...
- Html报表用Excel打开保持表格线【Html报表模板】
注:本人调试的最简版,前两处红色部分是为了输出Excel表格线:x:str表示输出为文本样式,避免被输出为科学计数法. <!DOCTYPE html PUBLIC "-//W3C//D ...
- PHP修改表格(增删改)
要求: 1.熟练shi用 post 和 get 传值 2. php嵌套在HTML中 3.熟练:if 语句(其他语句)的使用 --------------------- ...
- 那点你不知道的XHtml(Xml+Html)语法知识(DTD、XSD)
什么是XHtml: 摘录网上的一句话,XHTML就是一个扮演着类似HTML的角色的XML. XHtml可当模板引擎应用: CYQ.Data 框架里有一套XHtmlAction模板引擎, 应用在QBlo ...
- jQuery动态增删改查表格信息,可左键/右键提示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 全部代码
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
随机推荐
- 谷歌浏览器隐藏url前缀问题
此前曾有用户表示,谷歌若在Chrome的地址栏中隐藏URL的HTTP.HTTPS及WWW前缀,那么用户的安全将有可能遭至威胁,如果你不希望Chrome浏览器隐藏URL的HTTP.HTTPS及WWW前 ...
- Spark基础-scala学习(五、集合)
集合 scala的集合体系结构 List LinkedList Set 集合的函数式编程 函数式编程综合案例:统计多个文本内的单词总数 scala的集合体系结构 scala中的集合体系主要包括:Ite ...
- java:当字符串为We Are Happy.经过替换之后的字符串为We%20Are%20Happy
方法一: public class Solution { public String replaceSpace(StringBuffer str) { String a=str.toString(); ...
- 数字音频处理的瑞士军刀sox的音效算法以及用法
SoX可以明确的写出需要的音频处理的效果,可以方便的重复使用,在目前的条件下是一个比较方便使用的项目.不过相信随着Audacity的发展,很有可能在未来可以逐渐替代SoX的功能. 对于SoX主要关心的 ...
- SpringBoot2.1整合finereport10(帆软报表)
最近,公司采购了帆软的系统,领导安排要与公司的SpringBoot框架进行整合.费了一番牛劲,终于整合成功,下面分享一下我的经验. 首先,我的开发环境是Intellij IDEA,使用的SpringB ...
- 更改mysql 数据目录
1.停止MySQL服务 service mysqld stop 2.移动数据到新位置 mv /var/lib/mysql /newdir/data/ 3.修改/etc/my.cnf datadir=/ ...
- 可以落地的DDD到底长什么样?
领域驱动设计的概念 大家都知道软件开发不是一蹴而就的事情,我们不可能在不了解产品(或行业领域)的前提下进行软件开发,在开发前通常需要进行大量的业务知识梳理,然后才能到软件设计的层面,最后才是开发. ...
- Flex(ActionScript)与JavaScript交互的两种方式示例
随着各单位部门信息化进程的不断发展,互通互联.共享协调不断的被越来越多的客户所重视.很多新项目都要去必须能够集成已有的早期系统,至少也要能够实现交互对接.今天跟大家分享的是系统对接中ActionScr ...
- PHP中的__call和__callStatic方法
如何防止调用不存在的方法而出错,使用__call魔术重载方法. __call方法原型如下: mixed __call(string $name,array $arguments) 当调用一个不可访问的 ...
- 视频人脸检测——Dlib版(六)
往期目录 视频人脸检测--Dlib版(六) OpenCV添加中文(五) 图片人脸检测--Dlib版(四) 视频人脸检测--OpenCV版(三) 图片人脸检测--OpenCV版(二) OpenCV环境搭 ...