【HTML】表格标记
设计网页时经常会用到表格来组织页面信息,它能将网页划分成任意多个矩形区域,每个区域可包含导航、文字、图像、动画等信息,设计者可将任意的网页元素放入其中。
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种属性值) |
设置表格的边框样式
|
||||||||||||||||||
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>
效果:
4.多个表格的使用
表格可以嵌套使用以表示层次关系,在<table>标记插入表格后,可在<td></td>间再插入<table>表示在单元格中插入表格;也可以多个同级表格同时使用,此时有两个常用的属性可方便表格的排版,美化布局。
cellspacing |
设置单元格的间距 |
cellpadding |
设置单元格中内容与边框之间的间距 |
小结:
表格是一种很简单的页面布局工具,它的应用使得网页简洁直观,且更便于阅读。熟练掌握主要的表格标记的相关属性,可以提高工作效率
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。