[第五季]6.HTML表格标签_html创建表格姓名年龄住址-优快云博客

本文详细介绍如何使用HTML创建并美化一个包含学生信息的标准表格。主要内容包括：表格的基本结构、边框设置、表头添加、标题配置、单元格间距及空白调整、背景图片设置、文字对齐方式、数据合并技巧及空数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4.复习笔记(这个就是课后习题以及课程所呈现的需求)

①创建表格,创建3行数据.
1 张三男 20 北京市海淀区
2 玛丽女 18 北京市西城区
②加上边框为1.
③加上表头(编号,姓名,性别,年龄,家庭住址)
④加上标题为学生信息表.
⑤设置表格单元格文字与边框空白为5.
⑥调整单元格间距为0.
⑦设置第一行数据的颜色为红色.
⑧设置表格的背景图片为beijin.jpg
⑨设置性别那一列为居中对齐.
⑩新增一条数据.3,李四,20,年龄和家庭住址合并.
①①添加第四列数据,
4 王五男 38
在家庭住址里填入空格.

5.自测代码

2.课堂笔记

1.表格标签
<table>
<tr>   r=row
<td>   d=data
<th>
(1)在body中建立一个表格.
1   张三  男   20  北京海淀区
<tr><td>1</td><td>张三</td><td>男</td><td>20</td><td>北京市海淀区</td></tr>
(2)加上边框
border=1
(3)加上表头
<tr>
<th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>家庭住址</th>
</tr>
(4)加上标题
<caption>学生信息表</caption>
2.cellpadding表格内容和边框之间留下更多空白.
3.cellspacing单元格间距调整为0.
4.bgcolor设置背景颜色,background设置背景图片.
设置张三哪一背景颜色为红色.
这两个属性可以针对表格,行,单元格进行设置.
设置整个表格的背景为beijin.jpg
5.align设置对其
设置性别那一列都是居中的.
6.colspan(跨列).rowspan(跨行)
再加一行,年龄和住址合并了.
列的合并也不讲了.
7.表格中的空格
网页中显示空数据的时候就会
在最后一行加上空格.

3.课程效果图

这里写图片描述

1.代码

<html>
<head>
<title>学生信息表</title>
</head>

<body>
<table border=1 cellpadding=10 cellspacing=0  background="beijin.jpg">
<caption>学生信息表</caption>

<tr>
<th>编号</th><th>姓名</th><th align="center">性别</th><th>年龄</th><th>家庭住址</th>
</tr>
<tr bgcolor="red"><td>1</td><td>张三</td><td align="center">男</td><td>20</td><td>北京市海淀区

</td></tr>

<tr><td>2</td><td>玛丽</td><td align="center">女</td><td>18</td><td>北京市西城区</td></tr>

<tr><td>3</td><td>李四</td><td align="center">男</td><td colspan="2">北京市丰台区</td></tr>

<tr><td>4</td><td>王五</td><td align="center">男</td><td>38</td><td>&nbsp;</td></tr>

</table>
</body>
</html>