利用上述表格属性,能够简单的创建一个表格。并随意的分割行和列。

<html>
<head>
<title>表格的应用</title>
</head> <body>
<table border="1" width="400" align="center" cellspacing="0" cellpadding="0" >
<caption align="center"><h1>我的表格</h1></caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>邮箱</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td colspan="1" rowspan="4" align="center">20</td>
<td>男</td>
<td>zhangsan@613.com</td>
</tr>
<tr>
<td>1</td>
<td>张三</td> <td>男</td>
<td>zhangsan@613.com</td>
</tr>
<tr>
<td>1</td>
<td>张三</td> <td>男</td>
<td>zhangsan@613.com</td>
</tr>
<tr>
<td>1</td>
<td>张三</td> <td>男</td>
<td>zhangsan@613.com</td>
</tr>
</table>
</body>
</html>

执行结果例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3pxbmxz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

须要注意的是:1.使用colspan和rowspan时,一定要将被合并的单元格删除,否则会出现单元格挤出表格的现象。这个就不再演示了,大家试一试就能明确。

2.<caption>未设置特定位置时,它的位置随着表格的位置移动而移动。

3.分割完单元格后,为了使单元格内容相对协调,能够自行设置此单元格显示内容,大小,和其它属性。

版权声明:本文博主原创文章,博客,未经同意,不得转载。

HTML高级选项卡(1)————表标签的更多相关文章

  1. ylb:SQL 表的高级查询-多表连接和子查询

    ylbtech-SQL Server: SQL Server-表的高级查询-多表连接和子查询 SQL Server 表的高级查询-多表连接和子查询. 1,ylb:表的高级查询-多表连接和子查询 返回顶 ...

  2. 零基础学习java------37---------mybatis的高级映射(单表查询,多表(一对一,一对多)),逆向工程,Spring(IOC,DI,创建对象,AOP)

    一.  mybatis的高级映射 1  单表,字段不一致 resultType输出映射: 要求查询的字段名(数据库中表格的字段)和对应的java类型的属性名一致,数据可以完成封装映射 如果字段和jav ...

  3. JavaScript高级程序设计之表单基础

    A FORM <form id='form' action='http://a-response-url' method="post"> <!--maxlengt ...

  4. 6.MySQL优化---高级进阶之表的设计及优化

    转自互联网整理. 优化之路高级进阶——表的设计及优化 优化①:创建规范化表,消除数据冗余 数据库范式是确保数据库结构合理,满足各种查询需要.避免数据库操作异常的数据库设计方式.满足范式要求的表,称为规 ...

  5. SQL Server高级内容之表表达式和复习

    1. 表表达式 (1) 将表作为一个源或将查询的一个结果集作为一个源,对源做处理,然后得到一个新的数据源,对其进行查询.  (2)表表达式放在from子句中 (3)派生表,将表的查询得到的结果集作为一 ...

  6. 《JAVASCRIPT高级程序设计》表单基础知识和文本框脚本

    在HTML中,表单是由<form>元素来表示,在javascript中,表单对应的是HTMLFormElement类型,它具有一些独有的属性和方法: 一.表单基础知识 1.取得表单的方式 ...

  7. 一天搞定HTML----列表标签03

    1.细说列表标签 2.代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  8. js之选项卡(tag标签)

    目标效果:点击不同按钮显示不同内容 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  9. solr之高级查询--联表 join查询

    例如有两个业务表:文章表,评论表 . 场景: 一个文章可以由多个人评论. 创建两个core,一个core叫article,一个叫comment.article实例的schema.xml文件中定义几个简 ...

随机推荐

  1. Java Socket编程 标准范例(多线程)

    链接地址:http://blog.csdn.net/benweizhu/article/details/6615542 服务器端(Server)非多线程 package com.zeph.server ...

  2. javascript实现的功能--二级联动

    <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" ...

  3. Eclipse+ADT的环境搭建

    Index: . Java环境变量的设置 . Android环境变量的设置 1.Java环境变量的设置 A.属性名称:JAVA_HOME 属性值:C:\Program Files\Java\jdk1. ...

  4. ubuntu NFS

    NFS(Network File System, 网络文件系统)可以通过网络将分享不同主机(不同的OS)的目录——可以通过NFS挂载远程主机的目录, 访问该目录就像访问本地目录一样! 一般而言, 使用 ...

  5. 大数据情报分析公司Palantir

    最近在学习图数据计算方面技术,在寻找现实应用时发现美国Palantir公司已将所谓的多源异构数据融合分析技术运用的炉火纯青.Palantir创立于2004年,最早是因PayPal公司为保障支付安全而逐 ...

  6. [HDU 3336]Count the String[kmp][DP]

    题意: 求一个字符串的所有前缀串的匹配次数之和. 思路: 首先仔细思考: 前缀串匹配. n个位置, 以每一个位置为结尾, 就可以得到对应的一个前缀串. 对于一个前缀串, 我们需要计算它的匹配次数. k ...

  7. flex正则表达式

    正则表达式是一种通用的标准,大部分计算机语言都支持正则表达式,包括as3,这里收集了一些常用的正则表达式语句,大家用到的时候就不用自己写了 ^\d+$ //匹配非负整数(正整数 + 0) ^[0-9] ...

  8. Flex 全屏显示方法

    1,修改html-template下的index.template.html文件…增加四行 1</html> 上述文件增加了四行…见我文中有提示 2,Mxml文件: 假如一个button按 ...

  9. python字符串操作总结

    python中有各种字符串操作,一开始python有个专门的string模块,要使用需先import string.后来从python2.0开始,string方法改用str.method()形式调用, ...

  10. Android记录4--自定义ToggleButton+用SharedPreferences保存用户配置

    Android记录4--自定义ToggleButton+用SharedPreferences保存用户配置 2013年8月14日Android记录 很多应用都会有用户设置,用户的一些偏好可以由用户来决定 ...