前端基础-HTML表格---cwl_java

表格

导入：我们在博学谷上面可以看到各自班级的课程表

表格图示1

表格图示2

表格图示3

这样的页面就会用到表格。表格在网站中应用常用场景通常是金融类的网站，数据做统计，后台管理系统等

1.相关标签

画图说明，table是一个表格的模块，里面有行，光有行不行，里面要有列，在html中不叫列，叫单元格，再有很多行，就组成了表格-------》table标签包含行tr—》再包含单元格td

表格：<table></table>

行：<tr></tr>

单元格：<td></td>

每列的标题：<th></th>

表格标题：<caption></caption>

小案例：

小案例图示

<!-- 表格的区域,border属性代表边框的意思 --> <table border="1"> <!-- 行 --> <tr> <!-- 单元格 --> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <!-- 单元格 --> <td>令狐冲</td> <td>男</td> <td>22</td> </tr> <tr> <!-- 单元格 --> <td>任盈盈</td> <td>女</td> <td>18</td> </tr> <tr> <!-- 单元格 --> <td>任我行</td> <td>男</td> <td>55</td> </tr> <tr> <!-- 单元格 --> <td>岳不群</td> <td>男</td> <td>50</td> </tr> </table>

表格的边框 语法

<table border=1> </table>

注意：border这个属性一定加在table标签上，加在td上不生效

2.对齐方式

a) 水平对齐

语法：align="center/left/right"

示意图

b) 垂直对齐

语法：valign="top/middle/bottom"

示意图

3.单元格间距和填充

单元格间距（cellspacing）：单元格和单元格距离，默认是2像素

单元格填充（cellpadding）：单元格和内容的距离，默认是1像素

示意图

4.合并单元格

图示

导入：最后两行的最后两个单元格为照片，需要合并起来，这种合并是上下合并，所以合并的是行。如果是左右合并，那就是合并的列

合并行(rowspan)：把不同的行合并起来，写在上面的单元格上面

合并列(colspan)：把不同列合并起来，写在左边的单元格上面

取值是数值，需要合并几个单元格就写数字几就行，一旦合并了单元格，就需要将多余的单元格删掉

代码

<table cellspacing="0" cellpading="30" border="1" width="300" height="200"> <caption><h3>学生证</h3></caption> <tr> <th align="center" colspan="4">深圳传值黑马程序员</th> </tr> <tr align="center"> <td>姓名</td> <td>班级</td> <td>学号</td> <td rowspan="2">照片</td> </tr> <tr align="center"> <td>曾真光</td> <td>php14期</td> <td>007</td> </tr> </table>

注意：合并以后一定要把多余的单元格td删掉

---来自腾讯云社区的---cwl_java