【HTML】表格标记
来源:互联网 发布:云计算的重要应用 编辑:程序博客网 时间:2024/05/21 11:08
设计网页时经常会用到表格来组织页面信息,它能将网页划分成任意多个矩形区域,每个区域可包含导航、文字、图像、动画等信息,设计者可将任意的网页元素放入其中。
1. 表格的定义:<table></table>
1)在需要使用表格的地方插入成对的<table></table>标记,就可以完成表格的插入。定义表格常用的标记有
标签
说明
<table>
表格标记,用于插入表格
<tr>
行标记,用于插入行
<td>
列标记,用于插入列
<th>
表头标记,用于设置表头信息
<caption>
表格标题,设置标题
实例:
<html><head><title>表格的定义</title></head><body><table border="1"><caption>计算机学习</caption><tr><th>CS</th><th>数据库</th><th>BS</th></tr><tr><td>软件工程</td><td>SQL Server</td><td>html</td></tr><tr><td>设计模式</td><td>mySql</td><td>JavaScript</td></tr></table></body></html>
效果:
2)划分结构表格
划分结构表格是指将一个表格分成三个部分,分别使用三个标记
标签
说明
<thead></thead>
定义一组表头行
<tfoot></tfoot>
为表格添加一个标注
<tbody></tbody>
定义表格的主体部分
2. 表格属性
在网页的设计中常常需要对网页中的表格<table>做一些格式上的设置,这些设置是通过对表格标记属性的设置完成的。
属性名称
说明
width
表格的宽度
border
边框粗细
frame(8种属性值)
设置表格的边框样式
属性值
说明
void
不显示边框
border
显示上下左右边框
above
显示上边框
below
显示下边框
hsides
显示上下边框
lhs
显示左边框
rhs
显示右边框
vsides
显示左右边框
rules(5种属性值)
设置表格内部边框的属性
属性值
说明
all
显示所有内部边框
none
不显示内部边框
groups
显示介于行列边框
cols
仅显示列边框
rows
仅显示行边框
实例:
<html><head><title>表格的属性</title></head><body><table width="500" frame="hsides" rules="rows"><caption>计算机学习</caption><tr><th>CS</th><th>数据库</th><th>BS</th></tr><tr><td>设计模式</td><td>mySql</td><td>JavaScript</td></tr><tr><td>软件工程</td><td>SQL Server</td><td>html</td></tr></table></body></html>
效果:
3.表格行与单元格的属性
在表格中,通过<tr>标记的属性来设置表格中某一行的属性,用<td>的属性设置表格单元格的属性。
属性名称
说明
align(3种属性值)
设置行内容的水平对齐方式
属性值
说明
left
左对齐
right
右对齐
center
居中对齐
valign(4种属性值)
设置行内容的垂直对齐方式
属性值
说明
top
顶端对齐
middle
居中对齐
bottom
底部对齐
baseline
基线
rowspan
设置跨行,即单元格的纵向合并
colspan
设置跨列,即单元格的横向合并
实例:
<html><head><title>表格行与单元格的属性</title></head><body><table width="500" frame="hsides" rules="all"><caption>计算机学习</caption><tr><th>CS</th><th>数据库</th><th>BS</th></tr><tr><td rowspan="2" align="center">设计模式</td><td >mySql</td><td>JavaScript</td></tr><tr><td>SQL Server</td><td>html</td></tr></table></body></html>
效果:
4.多个表格的使用
表格可以嵌套使用以表示层次关系,在<table>标记插入表格后,可在<td></td>间再插入<table>表示在单元格中插入表格;也可以多个同级表格同时使用,此时有两个常用的属性可方便表格的排版,美化布局。
cellspacing
设置单元格的间距
cellpadding
设置单元格中内容与边框之间的间距
小结:
表格是一种很简单的页面布局工具,它的应用使得网页简洁直观,且更便于阅读。熟练掌握主要的表格标记的相关属性,可以提高工作效率
- HTML标记【表格标题标记】!
- HTML表格标记
- HTML表格标记
- html表格标记
- html表格标记
- 【HTML】表格标记
- HTML-表格(TABLE)标记(TAGS)
- 用好HTML的表格标记
- HTML标记【表格的建立】!
- HTML标记【表格的控制】!
- HTML表格标记及属性
- HTML表格标记简单示例
- HTML——表格标记
- html教程(六) 表格标记
- HTML--表格(TABLE)标记(TAGS)
- HTML语言剖析7:表格标记
- HTML标记【表格属性的控制】!
- HTML语言剖析(七)表格标记
- OpenCV2.4.10之多个图片在一个窗口显示
- 一、如何以 Git 的方式思考
- VS2010中MFC添加图像背景
- Hibernate面向对象的条件查询
- WCF学习笔记——1.最基础的WCF
- 【HTML】表格标记
- ubuntu git使用方法-获取与创建项目
- C++ post方式请求网页
- 浩易南:烧钱第一步,养个员工玩儿
- Linux高级编程复习笔记 第一章 内存管理 malloc new delete free sbrk brk
- Gentoo下KDE4升级KDE5记录
- 新浪微博开发之二十一(微博模型)
- Android中Service(服务)详解
- Perl and or 运算