HTML之表格
表格标签和表格标题
表格标签
<table>
<tr>
<td></td>
......
</tr>
<tr>
<td></td>
</tr>
......
</table>
<table></table> 用于定义一个表格的开始和结束;
<tr></tr> 定义一组行标记,在一组行标记内可以建立多组由 <td> 标记定义的单元格;
<td></td> 定义单元格标签, <td> 标签必须放在 <tr> 标签内。
表格标题
<caption></caption> 是标题的内容
表格表头
表头是指表格的第一行或第一列等对表格内容的说明,文字样式为居中、加粗显示,通过 <th> 标签实现。
<tr>
<th></th>
......
</tr>
表格的属性修饰
属性 | 描述 |
border | 设置边框粗细(默认值为0) |
bordercolor | 设置边框颜色 |
bordercolorlight | 设置亮边框颜色(左上边框的颜色) |
bordercolordark | 设置暗边框颜色(右上边框的颜色) |
width | 设置表格宽度 |
height | 设置表格高度 |
bgcolor | 设置颜色背景 |
background | 设置背景图片 |
frame | 设置边框样式 |
rules | 设置内部边框样式 |
cellspacing | 设置单元格间距 |
cellpadding | 设置单元格边距 |
align | 设置表格的水平对齐方式 |
设置表格的边框属性
<table border="" bordercolor="" bordercolorlight="" bordercolordark=""></table>
border 属性用于设置边框的宽度,单位为像素。在定义边框颜色的时候可以使用颜色的英文单词或6位十六进制颜色值。
设置表格的宽度和高度
<table width="" height=""></table>
(1) width 和 height 属性的值可以是像素或百分比;
(2)对于非嵌套表格,百分比表示的是表格应该占据的浏览器窗口的百分比,对于嵌套表格,百分比表示的是相对嵌套表格所在的单元格宽度;
(3)用百分比设置大小的表格会随着浏览器窗口或嵌套表格所在的单元格的大小变化调整,而用像素设置大小的表格是绝对大小;
(4)默认情况下,表格的宽度和高度会根据内容自动调整。
设置表格的背景颜色
<table bgcolor="">
设置表格的背景图像
<table background="">
设置边框样式
<table frame="" rules="">
可以利用 frame 属性控制只显示部分表格边框,也可以利用 rules 属性控制只显示部分内部边框。
属性 | 描述 |
above | 显示上边框 |
below | 显示下边框 |
hsides | 显示上、下边框 |
lhs | 显示左边框 |
rhs | 显示右边框 |
vsides | 显示左、右边框 |
border | 显示上、下、左、右边框 |
void | 不显示边框 |
属性 | 描述 |
all | 显示所有内部边框 |
none | 不显示内部边框 |
cols | 仅显示列边框 |
rows | 仅显示行边框 |
groups | 显示介于行列间边框的边框 |
设置表格的单元格间距
<table cellspacing="">
单元格的间距以像素为单位,默认值是2。
设置表格的单元格边距
<table cellpadding="">
单元格边距是指单元格中的内容与单元格边框的距离,以像素为单位。
设置表格的水平对齐属性
<table align="left|center|right">
没有特别的设置,默认为居左排列。
设置表格行的属性
属性 | 描述 |
align | 行内容的水平对齐 |
valign | 行内容的垂直对齐 |
bgcolor | 行的背景颜色 |
bordercolor | 行的边框颜色 |
bordercolorlight | 行的亮边框颜色 |
bordercolordark | 行的暗边框颜色 |
行内容水平对齐
<tr align="left|center|right"></tr>
行内容垂直对齐
<tr valign="top|middle|bottom"></tr>
设置表格中某一单元格的属性
属性 | 描述 |
align | 单元格内容的水平对齐 |
valign | 单元格内容的垂直对齐 |
bgcolor | 单元格的背景颜色 |
background | 单元格的背景图片 |
bordercolor | 单元格的边框颜色 |
bordercolorlight | 单元格的亮边框颜色 |
bordercolordark | 单元格的暗边框颜色 |
width | 单元格的宽度 |
height | 单元格的高度 |
rowspan | 单元格跨行 |
colspan | 单元格跨列 |
设置单元格跨行
<td rowspan=""></td>
实例:
<table border="1">
<tr>
<td>体育</td>
<td>大学英语</td>
<td rowspan="2">高等代数</td>
</tr>
<tr>
<td>历史</td>
<td>Web开发</td>
</tr>
</table>
设置单元格跨列
<td colspan=""></td>
实例:
<table border="1">
<tr>
<td>体育</td>
<td colspan="2">大学英语</td>
</tr>
<tr>
<td>历史</td>
<td>Web开发</td>
<td>政治</td>
</tr>
</table>
嵌套表格与小实例
<!DOCTYPE html>
<html>
<head>
<title>页面布局</title>
</head>
<body>
<table border="1" width="650" align="center">
<tr>
<td width="150" height="80">网页标志</td>
<td colspan="2">广告条</td>
</tr>
<tr>
<td>
<table border="1" width="100%" height="200">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td>导航条</td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
</td>
<td>内容一</td>
<td>内容二</td>
</tr>
<tr>
<td colspan="3" align="center">版权信息</td>
</tr>
</table>
</body>
</html>
HTML之表格的更多相关文章
- ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑
前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...
- 03.LoT.UI 前后台通用框架分解系列之——多样的表格
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
- jQuery学习之路(6)- 简单的表格应用
▓▓▓▓▓▓ 大致介绍 在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQue ...
- 在Asp.Net中操作PDF – iTextSharp - 使用表格
使用Asp.Net生成PDF最常用的元素应该是表格,表格可以帮助比如订单或者发票类型的文档更加格式化和美观.本篇文章并不会深入探讨表格,仅仅是提供一个使用iTextSharp生成表格的方法介绍 使用i ...
- DOM的小练习,两个表格之间数据的移动
本次讲的是两个表格之间数据的移动,左边的表格移动到右边,并且左边表格移动内容消失. <head> <meta http-equiv="Content-Type" ...
- JQuery实现表格的增加行和删除行
利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http- ...
- jquery-treegrid树状表格的使用(.Net平台)
上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一. ...
- Python处理Excel表格
同事小王今天说他有一个Excel表格,表格如下,一列是姓名,一列是电话号码,总共有大概2000行数据. 有的姓名占了一行,有的占了两行,还有一些占了三行的.如下图: 他问我可不可以全部统一成一行,而且 ...
- bootstrap表格
Bootstrap 实例 - 边框表格 < 建立日期 2015-5-27 录入人员 test1 处理人员 test2 问题报障人 部门/城市公司 联系电话 问题类型 处理状态 ...
- SSRS 实用技巧 ---- 为表格添加展开/折叠操作(明细报表)
相信很多人都会遇到这样的需求:当表格按照某几个列分组时,需要为组添加展开和折叠的操作. 最初展现表格的时候只展现最外层分组,然后点击展开后可以查看分组内的明细情况. 先来一张效果图,然后再看具体如何实 ...
随机推荐
- javascript基础修炼(3)—What's this(下)
开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 这一期主要分析各种实际开发中各种复杂的this指向问题. 一. 严格模式 严格模式是ES5中添加的javascript的 ...
- [.NET] 《Effective C#》快速笔记(二)- .NET 资源托管
<Effective C#>快速笔记(二)- .NET 资源托管 简介 续 <Effective C#>读书笔记(一)- C# 语言习惯. .NET 中,GC 会帮助我们管理内 ...
- spring整合mybatis接口无法注入问题
在学习Spring完之后简单的了解了MyBatis.然后进行简单的整合,遇到MyBatista接口映射的Bean无法自动注入的问题: 代码异常: 线程“main”org.springframe .be ...
- Apollo配置中心动态刷新日志级别
Apollo配置中心动态刷新日志级别 添加次配置后,当在apollo上面调整日志级别不需要重启服务器,马上就能生效 /** * 结合apollo动态刷新日志级别 * @author: nj * @da ...
- 关于HTTP中GET与POST的区别
GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 看似很简单,其实是一道送命题 “标准答案”: GET在浏览器回退时是无害的,而POST会再次提交请求. ...
- jsp基础语言-jsp动作
jsp动作是一组jsp内置的标签,用来控制jsp的行为,执行一些常用的jsp页面动作.通过jsp动作实现使用多行java代码能够实现的效果,即对常用的jsp功能进行抽象与封装. jsp共有七种标准的“ ...
- 字符串hash入门
简单介绍一下字符串hash 相信大家对于hash都不陌生 翻译过来就是搞砸,乱搞的意思嘛 hash算法广泛应用于计算机的各类领域,像什么md5,文件效验,磁力链接 等等都会用到hash算法 在信息学奥 ...
- C++析构函数可虚性探究
C++虚析构函数 析构函数是用来释放对象所申请的资源的函数. 当类内没有自定义的析构函数时,系统会自动调用默认的析构函数. 那么析构函数能否为虚函数呢? 虚函数的意义在于实现“多态性”.即:不同的个体 ...
- ERROR 1071 (42000): Specified key was too long; max key length is 767 bytes
今天在MySQL 5.6版本的数据库中修改InnoDB表字段长度时遇到了"ERROR 1071 (42000): Specified key was too long; max key le ...
- mssql sqlserver获取指定月份当月天数总和
摘要: 下文通过sql函数的形式,获取指定月份的总天数 实验环境:sqlserver 2008 R2 制作思路: 1. 获取指定月份的第一天, 2. 并采用dateadd向后加一个月形成一个新的日期 ...