七 表格的应用
1，
| 标签 | 说明 |
| <table> | 表格标记 |
| <tr> | 行标记 |
| <td> | 列标记 |
| <th> | 表头标记 |
| <caption> | 表格标记 |
实例代码：
<html> <head> <title>表格的定义</title> </head> <body> <table width="500" border="1"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </body> </html>
2，插入表格<table>
基本语法：
<table>
<tr>
<td></td>
</tr>
</table>
<table>表示插入表格
<tr>表示插入一行
<td>表示插入一列
3，设置表格标题<caption>
基本语法：
<table> <caption>插入表格标题</caption> <tr> </tr> <tr> <td></td> </tr> </table>
在HTML文件中，使用成对的<caption></caption>标记给表格插入标题。
该标记应用于<table>标记与<tr>标记之间的任何位置
实例代码：
<html> <head> <title>插入表格标题</title> </head> <body> <table width="500" border="1" align="center"> <caption>计算机相关信息</caption> <tr> <td>dreamweaver</td> <td>access</td> <td>c++</td> </tr> </table> </body> </html>
4，设置表格表头<th>
表格表头使用的事粗体样式显示，默认对齐方式是居中对齐
基本语法：
<table>
<tr>
<th></th>
</tr>
</table>
在HTML文件中，要将某一行作为表格文件的表头，只要将该行包含的列标记<td>改为<th>即可
<html> <head> <title>设置表格表头</title> </head> <body> <table width="500" border="1" align="center"> <tr> <th>网页设计</th> <th>数据库开发</th> <th>程序设计</th> </tr> <tr> <td>dreamweaver</td> <td>access</td> <td>c++ </td> </tr> </table> </body> </html>
5，设置划分结构表格<thead><tbody><tfoot>
所谓划分结构表格，指将一个表格分成三部分在网页上显示，分别使用<thead></thead>，<tbody></tbody>，<tfoot></tfoot>
基本语法：
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<thead></thead>表示定义一组表头行
<tbody></tbody>表示定义表格主体部分
<tfoot></tfoot>表示为表格添加一个标注
实例代码：
<html> <head> <title>设置划分表格结构</title> </head> <body> <table width="500" border="1" align="center"> <thead> <tr> <td> </td> <td> </td> <td> </td> </tr> </thead> <tbody> <tr> <td> </td> <td> </td> <td> </td> </tr> </tbody> <tfoot> <tr> <td> </td> <td> </td> <td> </td> </tr> </tfoot> <table> </body> </html>
6，设置表格的宽度和高度width和height
基本语法：
<table width="" height=""> <tr> <td></td> </tr> </table>
width用于设置表格的宽度，height属性用于设置表格的高度
实例代码：
<html> <head> <title>设置表格的宽度和高度</title> </head> <body> <table width="500" height="40" border="1"> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html>
7设置表格的边框属性border
表格中的属性在单元格中也适用
| 属性名称 | 说明 |
| border | 边框粗细 |
| bordercolor | 边框颜色 |
| bordercolorlight | 亮边框颜色 |
| bordercolordark | 暗边框颜色 |
基本语法：
<table border="" bordercolor=""> <tr> <td></td> </tr> </table>
实例代码：
<html> <head> <title>设置表格边框属性</title> </head> <body> <table width="500" height="40" border="1" bordercolor="blue"> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html>
8，设置表格边框样式frame , rules
利用frame属性可以设置表格边框的样式
利用rules属性可以设置表格内部边框属性
| 属性值 | 说明 |
| above | 显示上边框 |
| border | 显示上下左右边框 |
| below | 显示下边框 |
| hsides | 显示上下边框 |
| lhs | 显示左边框 |
| rhs | 显示右边框 |
| void | 不显示边框 |
| vsides | 显示左右边框 |
| 属性值 | 说明 |
| all | 显示所有内部边框 |
| groups | 显示介于行列边框 |
| none | 不显示内部边框 |
| cols | 仅显示列边框 |
| rows | 仅显示行边框 |
基本语法：
<table frame="" rules=""> <tr> <td></td> </tr> </table>
9，设置表格背景bgcolor
在HTML文件中，表格的默认背景为白色，table中的bgcolor属性可以设置表格的背景颜色
基本语法：
<table bgcolor=""> <tr> <td></td> </tr> </table>
10，调整行内容水平对齐aiign
在网页文件中，行内容的方式有左对齐（left），右对齐（right），和居中对齐（center）。设置水平对齐方式需要<tr>标记的align属性值。常用的align属性值有left，right，center
基本语法：
<table> <tr align=""> </tr> </table>
11，调整行内容垂直对齐valign
在网页文件中，行内容的垂直对齐方式有顶端对齐（top），居中对齐（middle），底部对齐（bottom）和基线（baseline）。设置垂直对齐方式需要设置<tr>标记的valign属性值。常用的valign属性值有top，middle，bottom和baseline。
基本语法：
<table> <tr valign=""> </tr> </table>
12，设置跨行rowspan
在网页制作过程中，有时需要对网页中的表格进行单元格的纵向合并，这在网页中叫做设置跨行
基本语法：
<table> <tr> <td rowspan="2"></td> </tr> </table>
13，设置跨列colspan
在网页制作过程中，有时需要对网页中的表格进行单元格的横向合并，这在网页中叫做设置跨列
基本语法：
<table> <tr> <td colspan="2"></td> </tr> </table>
14，设置单元格间距cellspacing
在网页文件中，使用表格进行排版时，为了布局的美观，常常需要对单元格的间隔进行设置，这样可以使网页中的表格显得不是过于紧凑。
基本语法：
<table cellspacing=""> <tr> <td></td> </tr> </table>
实例代码：
<html> <head> <title>设置单元格间距</title> </head> <body> <table width="500" border="1" cellspacing="0"> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> <table width="500" border="1" cellspacing="5"> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html>
15，设置单元格边距cellpadding
在网页文件中，单元格的边距指的是单元格中内容与单元格边框的距离
基本语法：
<table cellpadding=""> <tr> </tr> </table>
16，表格嵌套
在单元格中插入表格叫做嵌套表格
实例代码：
<html> <head> <title>表格嵌套</title> </head> <body> <table width="500" border="1" align="center"> <tr> <td width="170"> </td> <td width="157"> </td> <td width="121"> </td> </tr> <tr> <td> <table width="100%" border="1"> <tr> <td> </td> </tr> <tr> <td>导航列表</td> </tr> <tr> <td> </td> </tr> </table> </td> <td rowspan="2"> </td> </tr> <tr> <td> </td> </tr> </table> </body> </html>