html表格
html制作一个表格需要用到以下3中标签。
①table标签：双标签用来定义这是一个表格
②tr标签：双标签用来定义行数
③td标签：双标签用来定义列数
如果进行定义一个表格：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>表格</title> 7 </head> 8 9 <body> 10 <!-- 这是一个制作简单的表格内容 --> 11 <table> 12 <tr> 13 <td></td> 14 </tr> 15 </table> 16 </body> 17 18 </html>
而在vscode中有个制作表格的快捷键：
table>tr*行数>td*列数（直接回车就可以实现制作一个表格）
如果内容是写死时，我们也是有快捷键去快速生成的。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>表格</title> 8 </head> 9 <body> 10 <!-- table>tr*3>td{你好哈哈哈}*3 --> 11 <table> 12 <tr> 13 <th>你好哈哈哈</th> 14 <th>你好哈哈哈</th> 15 <th>你好哈哈哈</th> 16 </tr> 17 <tr> 18 <td>你好哈哈哈</td> 19 <td>你好哈哈哈</td> 20 <td>你好哈哈哈</td> 21 </tr> 22 <tr> 23 <td>你好哈哈哈</td> 24 <td>你好哈哈哈</td> 25 <td>你好哈哈哈</td> 26 </tr> 27 </table> 28 </body> 29 </html>
table标签
table标签中常用的属性有：
①border属性：代表表格是否要有框
1：代表需要边框
0：代表不需要边框
②cellspacing属性：表示单元表格与单元表格之间距离多少
1：代表单元表格之间距离为1px。（px为像素点，可以按照自己的需求设置大小）
0：代表单元表格之间没有距离。
③width属性：表示规定整个表格中单元格的宽度
px：用像素点作为单位
%：%的方式表示占父类中表格宽度大小
④bgcolor属性：设置整个表格的颜色
colorname：直接指定颜色
rgb(x,x,x)：通过rgb形式表示颜色
⑤height属性：表示规定整个表格中单元格的高度
px：用像素点作为单位
%：%的方式表示占父类中表格宽度大小
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>表格</title> 7 </head> 8 9 <body> 10 <table border="1" cellspacing="0" bgcolor="red" width="200px" height="80px"> 11 <tr> 12 <td>你好</td> 13 <td>你好</td> 14 <td>你好</td> 15 </tr> 16 <tr> 17 <td>你好</td> 18 <td>你好</td> 19 <td>你好</td> 20 </tr> 21 </table> 22 </body> 23 24 </html>
效果展示：
td标签
td标签中常用的属性：
①width属性：表示规定自身的单元格宽度
px：用像素点作为单位
%：%的方式表示占父类中表格宽度大小
②bgcolor属性：设置自身的单元格颜色
colorname：直接指定颜色
rgb(x,x,x)：通过rgb形式表示颜色
③height属性：设置自身的单元格高度
px：用像素点作为单位
%：%的方式表示占父类中表格宽度大小
④align属性：规定单元格内容的水平对齐方式
left：在整个表格中居左展示（默认值）
center：在整个表格中居中展示
right：在整个表格中居右展示
⑤valign属性：
top：在垂直方向上置顶
bottom：在垂直方向上置底
center：在垂直方向的中间
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>表格</title> 7 </head> 8 9 <body> 10 <table border="1" cellspacing="0"> 11 <tr> 12 <td width="200px">你好</td> 13 <td bgcolor="red">你好</td> 14 <td>你好</td> 15 </tr> 16 <tr> 17 <td height="100px">你好</td> 18 <td align="center">你好</td> 19 <td valign="top">你好</td> 20 </tr> 21 </table> 22 </body> 23 24 </html>
效果展示：
tbody标签
tbody标签本质上是没有任何意义的，只是当你想要整个处理表格的高度，宽度，背景颜色等的时候，使用tody标签会更加便利。
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>表格</title> 9 </head> 10 11 <body> 12 <table border="1" cellspacing="0" width="500px" height="300px"> 13 <tbody align="center"> 14 <tr> 15 <th>你好哈哈哈</th> 16 <th>你好哈哈哈</th> 17 <th>你好哈哈哈</th> 18 </tr> 19 <tr> 20 <td>你好哈哈哈</td> 21 <td>你好哈哈哈</td> 22 <td>你好哈哈哈</td> 23 </tr> 24 <tr> 25 <td>你好哈哈哈</td> 26 <td>你好哈哈哈</td> 27 <td>你好哈哈哈</td> 28 </tr> 29 </tbody> 30 </table> 31 </body> 32 33 </html>
效果：
th标签
th标签是定义表格内的表头单元格，它也有许多常用的属性。
特点：与其他单元格相比，它会自动加粗并居中展示
①width属性：表示规定自身的单元格宽度
px：用像素点作为单位
%：%的方式表示占父类中表格宽度大小
②bgcolor属性：设置自身的单元格颜色
colorname：直接指定颜色
rgb(x,x,x)：通过rgb形式表示颜色
③height属性：设置自身的单元格高度
px：用像素点作为单位
%：%的方式表示占父类中表格宽度大小
④align属性：规定单元格内容的水平对齐方式
left：在整个表格中居左展示（默认值）
center：在整个表格中居中展示
right：在整个表格中居右展示
⑤valign属性：
top：在垂直方向上置顶
bottom：在垂直方向上置底
center：在垂直方向的中间
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格</title> 6 </head> 7 <body> 8 <table border="1" cellspacing="0" width="500px" height="300px"> 9 <!-- <caption>个人信息表</caption> --> 10 <!-- 表格标题 --> 11 <tbody align="center"> 12 <tr> 13 <th>你好哈哈哈</th> 14 <th>你好哈哈哈</th> 15 <th>你好哈哈哈</th> 16 </tr> 17 <tr> 18 <td>你好哈哈哈</td> 19 <td>你好哈哈哈</td> 20 <td>你好哈哈哈</td> 21 </tr> 22 </tbody> 23 </table> 24 </body> 25 </html>
效果展示：
caption标签
定义表格的标题，通常这个标题会居中于表格上
属性：
align：定义标题的对齐方式
left：左对齐
right：右对齐
top：在表格上方对齐
bottom：在表格下方对齐
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 </head> 8 9 <body> 10 <table border="1" cellspacing="0"> 11 <caption align="bottom">这是一个标题</caption> 12 <tr> 13 <td>哈哈哈</td> 14 <td>哈哈哈</td> 15 <td>哈哈哈</td> 16 </tr> 17 <tr> 18 <td>哈哈哈</td> 19 <td>哈哈哈</td> 20 <td>哈哈哈</td> 21 </tr> 22 <tr> 23 <td>哈哈哈</td> 24 <td>哈哈哈</td> 25 <td>哈哈哈</td> 26 </tr> 27 <tr> 28 <td>哈哈哈</td> 29 <td>哈哈哈</td> 30 <td>哈哈哈</td> 31 </tr> 32 </table> 33 </body> 34 35 </html>
效果展示：
单元格合并
单元格合并分为合并行与合并列
合并行colspan：从左到右进行合并单元格
合并列rowspan：从自身位置向下合并单元格
举个例子：
1 <!--需求：--> 2 <!--我想第一行的第一个和第二个单元格进行合并--> 3 <!DOCTYPE html> 4 <html lang="en"> 5 6 <head> 7 <meta charset="UTF-8"> 8 <title>Document</title> 9 </head> 10 <body> 11 <table border="1" cellspacing="0"> 12 <caption align="bottom">这是一个标题</caption> 13 <!--这是第一行--> 14 <tr> 15 <!--在第一行的第一个单元格td标签添加 16 colspan用来合并行，数字为2表示合并两个单元格 17 当你第一个单元格与第二个单元格合并后，就不能在添加第二个单元格 18 所以要把原来第二个单元格所在的td标签去掉 19 --> 20 <td colspan="2">哈哈哈</td> 21 <td>哈哈哈</td> 22 </tr> 23 <tr> 24 <td>哈哈哈</td> 25 <td>哈哈哈</td> 26 <td>哈哈哈</td> 27 </tr> 28 <tr> 29 <td>哈哈哈</td> 30 <td>哈哈哈</td> 31 <td>哈哈哈</td> 32 </tr> 33 <tr> 34 <td>哈哈哈</td> 35 <td>哈哈哈</td> 36 <td>哈哈哈</td> 37 </tr> 38 </table> 39 </body> 40 </html>
表格嵌套
表格是可以在里面嵌套表格的，在html中嵌套表格是放在标签<td>中
举个例子：
像这种上面相当于5列表格，而下面只有四列表格，并且方向只是简单的单元格合并也不是的。
这种情况下就需要用到表格嵌套，我们要如何实现表格嵌套呢？
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 </head> 8 9 <body> 10 <!-- 需求： 11 在第二行嵌套一个2x2的表格 12 --> 13 <table border="1" cellspacing="0"> 14 <caption>这是一个标题</caption> 15 <tr> 16 <td colspan="2">哈哈哈</td> 17 <td>哈哈哈</td> 18 </tr> 19 <tr> 20 <td> 21 <!-- 在一个td标签中进行嵌套一个表格 --> 22 <table border="1"> 23 <tr> 24 <td>这是一个表格嵌套</td> 25 <td>这是一个表格嵌套</td> 26 </tr> 27 <tr> 28 <td>这是一个表格嵌套</td> 29 <td>这是一个表格嵌套</td> 30 </tr> 31 </table> 32 </td> 33 <td>哈哈哈</td> 34 <td>哈哈哈</td> 35 </tr> 36 <tr> 37 <td>哈哈哈</td> 38 <td>哈哈哈</td> 39 <td>哈哈哈</td> 40 </tr> 41 42 </table> 43 </body> 44 45 </html>
效果展示：
效果展示中会发现，表格嵌套中存在多余的边框，需要如何解决呢？
可以在嵌套表格中使用属性frame，参数设置为void即可。
效果展示：
