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

<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. spring IOC简单入门

    spring的核心是ioc和aop 先介绍一下IOC(inverse of control控制反转)又叫DI(Dependency injection依赖注入) 个人理解为把对象的控制权由类转移到配置 ...

  2. ubuntu 16.04环境配置

    ubuntu 16:1.源cp /etc/apt/sources.list /etc/apt/sources.list.bkpvi /etc/apt/sources.list-+{    deb ht ...

  3. MQTT协议详解一

    首先给出MQTT协议的查看地址:http://public.dhe.ibm.com/software/dw/webservices/ws-mqtt/mqtt-v3r1.html 当然也有PDF版的,百 ...

  4. eclipse SVN 安装

    1.下载最新的Eclipse,我的版本是3.7.2 indigo(Eclipse IDE for Java EE Developers)版    如果没有安装的请到这里下载安装:http://ecli ...

  5. html5储存篇(二)

    indexedDB   相对于html5 中提到 web SQL Database,w3c已经明确声明放弃对其的继续支持,开始支持新的客户端数据库 indexedDB ,indexedDB 是一种no ...

  6. python列表元组

    python列表元组 索引 切片 追加 删除 长度 循环 包含   定义一个列表 my_list = []     my_list = list()   my_list = ['Michael', ' ...

  7. jQuery.ui autoComplete使用

    官网  http://api.jqueryui.com/autocomplete/#option-source 参考了 http://www.cnblogs.com/lwme/archive/2012 ...

  8. tomcat应用转到weblogic上时的问题

    昨天将一个tomcat环境下调试通过的报表demo应用发布到weblogic上做测试,结果发现好多问题.总结了一下,主要有这么几点: 1.使用log4j的问题. tomcat应用直接发布到weblog ...

  9. BEANUTIL 对象转JSON

    package cn.com.softmap.cache.util; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutp ...

  10. 信号量多-threaded同步Semaphore

    Semaphore它是JDK1.5一个实现后,外面有个办法同步.Semaphore能够保持其当前的线程接入号码.并提供了一个同步机制. 采用Semaphore时,可以用相同的对资源的访问进行控制的线程 ...