设计网页时经常会用到表格来组织页面信息，它能将网页划分成任意多个矩形区域，每个区域可包含导航、文字、图像、动画等信息，设计者可将任意的网页元素放入其中。
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 |
设置单元格中内容与边框之间的间距 |
小结：
表格是一种很简单的页面布局工具，它的应用使得网页简洁直观，且更便于阅读。熟练掌握主要的表格标记的相关属性，可以提高工作效率
时间： 2024-11-25 15:29:56