【HTML】表格标记
2015-04-30 20:20
274 查看
设计网页时经常会用到表格来组织页面信息,它能将网页划分成任意多个矩形区域,每个区域可包含导航、文字、图像、动画等信息,设计者可将任意的网页元素放入其中。
1. 表格的定义:<table></table>
1)在需要使用表格的地方插入成对的<table></table>标记,就可以完成表格的插入。定义表格常用的标记有
实例:
效果:
2)划分结构表格
划分结构表格是指将一个表格分成三个部分,分别使用三个标记
2. 表格属性
在网页的设计中常常需要对网页中的表格<table>做一些格式上的设置,这些设置是通过对表格标记属性的设置完成的。
实例:
效果:
3.表格行与单元格的属性
在表格中,通过<tr>标记的属性来设置表格中某一行的属性,用<td>的属性设置表格单元格的属性。
实例:
效果:
[align=left] [/align]
4.多个表格的使用
表格可以嵌套使用以表示层次关系,在<table>标记插入表格后,可在<td></td>间再插入<table>表示在单元格中插入表格;也可以多个同级表格同时使用,此时有两个常用的属性可方便表格的排版,美化布局。
小结:
表格是一种很简单的页面布局工具,它的应用使得网页简洁直观,且更便于阅读。熟练掌握主要的表格标记的相关属性,可以提高工作效率
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> | 定义表格的主体部分 |
在网页的设计中常常需要对网页中的表格<table>做一些格式上的设置,这些设置是通过对表格标记属性的设置完成的。
属性名称 | 说明 | ||||||||||||||||||
width | 表格的宽度 | ||||||||||||||||||
border | 边框粗细 | ||||||||||||||||||
frame(8种属性值) | 设置表格的边框样式
| ||||||||||||||||||
rules(5种属性值) | 设置表格内部边框的属性
|
<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种属性值) | 设置行内容的水平对齐方式
| ||||||||||
valign(4种属性值) | 设置行内容的垂直对齐方式
| ||||||||||
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>
效果:
[align=left] [/align]
4.多个表格的使用
表格可以嵌套使用以表示层次关系,在<table>标记插入表格后,可在<td></td>间再插入<table>表示在单元格中插入表格;也可以多个同级表格同时使用,此时有两个常用的属性可方便表格的排版,美化布局。
cellspacing | 设置单元格的间距 |
cellpadding | 设置单元格中内容与边框之间的间距 |
表格是一种很简单的页面布局工具,它的应用使得网页简洁直观,且更便于阅读。熟练掌握主要的表格标记的相关属性,可以提高工作效率
相关文章推荐
- html标记语言的常用标签,表格
- HTML表格标记教程(34):跨行属性ROWSPAN
- HTML表格标记教程(47):表格嵌套
- HTML表格标记教程(43):表头的垂直对齐属性VALIGN
- HTML表格标记教程(24):行的水平对齐属性ALIGN
- HTML的dl、dt、dd标记制作表格对决Table制作表
- HTML表格标记教程(32):单元格的水平对齐属性ALIGN
- HTML表格标记教程(42):表头的水平对齐属性ALIGN
- HTML表格标记教程(28):单元格的边框色属性BORDERCOLOR
- HTML标记语言——表格的基本结构
- HTML基本语法六 表格(TABLE)标记
- HTML表格标记教程(29):单元格的亮边框色属性BORDERCOLORLIGHT
- HTML表格标记教程(44):表格的表首标记
- HTML表格标记教程(30):单元格的暗边框色属性BORDERCOLORDARK
- HTML文件中表格(Table)标记的常用属性
- HTML表格标记教程(27):单元格的背景图像属性BACKGROUND
- HTML表格标记教程(40):表头的暗边框色属性BORDERCOLORDARK
- HTML表格标记教程(31):单元格的宽度和高度属性WIDTH、HEIGHT
- HTML标记【表格的建立】!
- HTML表格标记简单示例