导入:我们在博学谷上面可以看到各自班级的课程表
表格图示1 |
---|
表格图示2 |
---|
表格图示3 |
---|
这样的页面就会用到表格。表格在网站中应用常用场景通常是金融类的网站,数据做统计,后台管理系统等
画图说明,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上不生效
a) 水平对齐
语法:align="center/left/right"
示意图 |
---|
b) 垂直对齐
语法:valign="top/middle/bottom"
示意图 |
---|
单元格间距(cellspacing):单元格和单元格距离,默认是2像素
单元格填充(cellpadding):单元格和内容的距离,默认是1像素
示意图 |
---|
图示 |
---|
导入:最后两行的最后两个单元格为照片,需要合并起来,这种合并是上下合并,所以合并的是行。如果是左右合并,那就是合并的列
合并行(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删掉
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有