HTML基础知识3—表格标签
发布时间：2024-10
浏览量：61
本文字数：1743
读完约 6 分钟
1、<table>标签：声明一个表格，它的常用属性如下：
border属性：定义表格的边框，设置值是数值
cellpadding属性：定义单元格内容与边框的距离，设置值是数值
cellspacing属性：定义单元格与单元格之间的距离，设置值是数值
align属性：设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right
2、<tr>标签：定义表格中的一行
3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：
align：设置单元格中内容的水平对齐方式,设置值有：left | center | right
valign：设置单元格中内容的垂直对齐方式 top | middle | bottom
colspan：设置单元格水平合并，设置值是数值
rowspan：设置单元格垂直合并，设置值是数值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格标签</title> </head> <body> <h1>表格标签</h1> <!-- 一个4行(tr标签)3列(td标签)的表格 --> <table border="1" width="600" height="300" align="" cellpadding="0" cellspacing="0"> <!-- 第1行-3列 --> <tr> <!-- 表头用th标签，默认单元格中的内容加粗 --> <th>th标签加粗</th> <th>th标签加粗</th> <th>th标签加粗</th> </tr> <!-- 第2行-3列 --> <tr> <!-- align属性的用法：设置单元格中内容的水平对齐方式,设置值有：left | center | right --> <td>1</td> <td>2</td> <td>3</td> </tr> <!-- 第3行-3列 --> <tr> <td>水平靠右</td> <td>水平靠左</td> <td>水平居中</td> </tr> <!-- 第4行-3列 --> <tr> <!-- valign：设置单元格中内容的垂直对齐方式 top | middle | bottom --> <!-- 单元格中的内容水平方向(align)右对齐，垂直方向(valign)顶端对齐(top) --> <td valign="top">水平靠右-垂直居上</td> <!-- 单元格中的内容水平方向(align)右对齐，垂直方向(valign)居中对齐(middle) --> <td valign="middle">水平靠右-垂直居中</td> <!-- 单元格中的内容水平方向(align)右对齐，垂直方向(valign)底端对齐(middle) --> <td valign="bottom">水平靠右-垂直居下</td> </tr> </table> <br/> <br/> <br/> <table border="0" width="500" height="200"> <tr> <!-- colspan：设置单元格水平合并，设置值是数值 --> <th colspan="5">基本情况</th> </tr> <tr> <td width="18%">姓名</td> <td width="21%"></td> <td width="18%">性别</td> <td width="21%"></td> <!-- rowspan 设置单元格垂直合并，设置值是数值 --> <td width="22%" rowspan="5" valign="bottom"><img src="images/01.png" title="寒冰" alt="寒冰"></td> </tr> <tr> <td>民族</td> <td></td> <td>出生日期</td> <td></td> </tr> <tr> <td>政治面貌</td> <td></td> <td>健康状况</td> <td></td> </tr> <tr> <td>籍贯</td> <td></td> <td>学历</td> <td></td> </tr> <tr> <td>电子信箱</td> <td></td> <td>联系电话</td> <td></td> </tr> </table> </body> </html>
效果如下：
