通过以下代码来实现对一个表格的操作:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表格的创建</title> <style> table,td,th{ /* 设置表格边框 */ border: 1px solid black; font-family: "Microsoft YaHei"; /* 合并边框 */ border-collapse: collapse; /* n内容居中显示 */ text-align: center; } table{ /* 设置表格的宽高 */ width: 210px; height: 100px; /* 表格相对于浏览器居中显示 */ margin: 0px auto; /* 设置背景颜色 也可以设置背景图片 */ background-color: yellow; } td{ /* 设置单个表格的宽高 */ width:70px; height: 25px;; } th{ /* 设置表头的宽高 */ width: 210px; height: 25px; font-size: 50px; } </style> </head> <body> <table> <!-- 表头 内容默认加粗显示 --> <tr> <th colspan="3">表头</th> <!-- 合并后去掉多余的列 --> <!-- <th>2</th> <th>3</th> --> </tr> <!-- 3*3表格 --> <tr> <td>1</td> <td>2</td> <td rowspan="3">3</td> </tr> <tr> <td>1</td> <td>2</td> <!-- 去除合并后多余的行 --> <!-- <td>3</td> --> </tr> <tr> <td>1</td> <td>2</td> <!-- 去除合并后多余的行 --> <!-- <td>3</td> --> </tr> </table> </body> </html>
补充:
tr row 行数 td description 内容 th head ;居中 加粗
/*设置文本垂直方向对齐*/
vertical-align:bottom; /* 合并边框 */ border-collapse: collapse;
最终效果如图: