CSS学习笔记8——表格

*TQK*2025-04-27 9:45

一、表格

1-1、创建表格

在Word文档中，如果要创建表格，只需插入表格，然后设定相应的行数和列数即可。然而在**HTML网页中，所有的元素都是通过标签定义的，要想创建表格，就需要使用与表格相关的标签。**使用标签创建表格的基本语法格式如下：

<table>

<tr>

<td>单元格内的文字</td>

......

</tr>

......

</table>

上述语法格式中包含3个HTML标签，分别为<table>、<tr>、<td>，它们是创建HTML表格的基本标签，缺一不可，对这些标签的具体解释如下：

  • <table>：用于定义一个表格的开始与结束，其内部可以放置表格的行、单元格等。
  • <tr>：用于定义表格中的一行，必须嵌套在<table>标签中，<table>标签中包含几个<tr>标签，就表示表格有几行。
  • <td>：用于定义表格中的单元格，必须嵌套在<tr>标签中，一个<tr>`标签中包含几个<td>标签，就表示一行中有多少个单元格（或多少列）。
    注意： <tr>标签中只能嵌套<td>标签，不可以直接再<tr>标签中输入文字。

代码展示

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table border="1"><!--为表格标签设置边框属性border-->
        <tr>
            <td>学生名称</td>
            <td>班级</td>
            <td>分数</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>一班</td>
            <td>87</td>
        </tr>
        <tr>
            <td>小李</td>
            <td>二班</td>
            <td>86</td>
        </tr>
        <tr>
            <td>小萌</td>
            <td>三班</td>
            <td>72</td>
        </tr>
    </table>
</body>
</html>

效果

1-2、<table>标签的属性

【1】border、cellspacing、cellpadding属性

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table border="20" cellspacing="20" cellpadding="20"><!--为表格标签设置边框属性border-->
        <tr>
            <td>学生名称</td>
            <td>班级</td>
            <td>分数</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>一班</td>
            <td>87</td>
        </tr>
        <tr>
            <td>小李</td>
            <td>二班</td>
            <td>86</td>
        </tr>
        <tr>
            <td>小萌</td>
            <td>三班</td>
            <td>72</td>
        </tr>
    </table>
</body>
</html>

效果展示

【2】width和height属性

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table border="20" cellspacing="20" cellpadding="20" width= "500" height="500"><!--为表格标签设置边框属性border-->
        <tr>
            <td>学生名称</td>
            <td>班级</td>
            <td>分数</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>一班</td>
            <td>87</td>
        </tr>
        <tr>
            <td>小李</td>
            <td>二班</td>
            <td>86</td>
        </tr>
        <tr>
            <td>小萌</td>
            <td>三班</td>
            <td>72</td>
        </tr>
    </table>
</body>
</html>

【3】align、bgcolor、background属性

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table border="20" cellspacing="20" cellpadding="20" width= "500" height="500" bgcolor="green" background="img/1.jpg"><!--为表格标签设置边框属性border-->
        <tr>
            <td>学生名称</td>
            <td>班级</td>
            <td>分数</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>一班</td>
            <td>87</td>
        </tr>
        <tr>
            <td>小李</td>
            <td>二班</td>
            <td>86</td>
        </tr>
        <tr>
            <td>小萌</td>
            <td>三班</td>
            <td>72</td>
        </tr>
    </table>
</body>
</html>

1-3、<tr>标签属性

注意：<tr>标签无宽度属性width，其宽度取决于表格标签<table>

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签的属性</title>
</head>
<body>
    <table border="1" width="400" height="240" align="center">
        <tr height="80" align="center" valign="top" background="images/1.jpg">
            <td>姓名</td>
            <td>性别</td>
            <td>电话</td>
            <td>住址</td>
        </tr>
        <tr>
            <td>小王</td>
            <td>女</td>
            <td>11122233</td>
            <td>海淀区</td>
        </tr>
        <tr>
            <td>小李</td>
            <td>男</td>
            <td>55566677</td>
            <td>朝阳区</td>
        </tr>
        <tr>
            <td>小张</td>
            <td>男</td>
            <td>88899900</td>
            <td>西城区</td>
        </tr>
    </table>
</body>
</html>

效果展示

1-4、<td>标签的属性

代码示例

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单元格的合并</title>
</head>
<body>
    <table border="1" width="400" height="240" align="center">
        <tr height="80" align="center" valign="top" bgcolor="#00CCFF">
            <td>姓名</td>
            <td>性别</td>
            <td>电话</td>
            <td>住址</td>
        </tr>
        <tr>
            <td>小王</td>
            <td>女</td>
            <td>11122233</td>
            <td rowspan="3">北京</td> <!-- 设置单元格跨越的行数 -->
        </tr>
        <tr>
            <td>小李</td>
            <td>男</td>
            <td>55566677</td>
        </tr>
        <tr>
            <td>小张</td>
            <td>男</td>
            <td>88899900</td>
        </tr>
    </table>
</body>
</html>

效果展示

1-5、<th>标签

1-6、表格的结构

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单的网页结构</title>
</head>
<body>
    <table width="600" border="1" cellspacing="0" align="center">
        <thead> <!-- 使用<thead>标签定义网页的头部 -->
            <tr>
                <td colspan="3">网站的Logo</td>
            </tr>
            <tr>
                <th>首页</th>
                <th>关于我们</th>
                <th>联系我们</th>
            </tr>
        </thead>
        <tfoot> <!-- 使用<tfoot>标签定义网页的页脚 -->
            <tr>
                <td colspan="3" align="center">底部基本企业信息 &copy; 【版权信息】</td>
            </tr>
        </tfoot>
        <tbody> <!-- 使用<tbody>标签定义网页的主体 -->
            <tr height="150">
                <td>主体的左栏</td>
                <td>主体的中间</td>
                <td>主体的右侧</td>
            </tr>
            <tr height="150">
                <td>主体的左栏</td>
                <td>主体的中间</td>
                <td>主体的右侧</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

效果展示

二、使用CSS控制表格样式

2-1、使用CSS控制表格边框

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 CSS 控制表格边框</title>
    <style type="text/css">
        table {
            width: 800px;
            height: 300px;
            border: 1px solid #30F; /* 设置表格的边框 */
			/* border-collapse: collapse; */
        }
        th, td {
            border: 1px solid #30F;
        }
    </style>
</head>
<body>
    <table>
        <caption></caption> <!-- 定义表格的标题 -->
        <tr>
            <th>诗歌序号</th>
            <th>诗歌名称</th>
            <th>作者</th>
            <th>内容</th>
        </tr>
        <tr>
            <th>1</th>
            <td>《峨眉山月歌》</td>
            <td>李白</td>
            <td>峨眉山月半轮秋，影入平羌江水流。夜发清溪向三峡，思君不见下渝州。</td>
        </tr>
        <tr>
            <th>2</th>
            <td>《江南逢李龟年》</td>
            <td>杜甫</td>
            <td>岐王宅里寻常见，崔九堂前几度闻。正是江南好风景，落花时节又逢君。</td>
        </tr>
        <tr>
            <th>3</th>
            <td>《行军九日思长安故园》</td>
            <td>岑参</td>
            <td>强欲登高去，无人送酒来。遥怜故园菊，应傍战场开。</td>
        </tr>
        <tr>
            <th>4</th>
            <td>《夜上受降城闻笛》</td>
            <td>李益</td>
            <td>回乐烽前沙似雪，受降城外月如霜。不知何处吹芦管，一夜征人尽望乡。</td>
        </tr>
        <tr>
			<th>5</th>
            <td>《秋夕》</td>
            <td>杜牧</td>
            <td>银烛秋光冷画屏，轻罗小扇扑流萤。天阶夜色凉如水，卧看牵牛织女星。</td>
        </tr>
    </table>
</body>
</html>

从展示效果中可以看出单元格的边框之间存在一定的空间，若要去掉这个空间得到单线边框的效果，可以使用border-collapse属性，将单元格的边框合并。

将第十三行代码注释去掉可得到以下效果

border-collapse 的属性值除了collapse（用于合并边框）之外，还有separate用于分离单线边框，通常表格的border-collapse属性值默认为separate。
注意**：当表格的border-collapse的属性值设为collapse时，在HTML中设置的cellspacing属性值无效。**

行标签<tr>无border样式属性。

2-2、使用CSS控制单元格边距

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 CSS 控制单元格边距</title>
    <style type="text/css">
        table {
            border: 1px solid #30F; /* 设置表格的边框 */
        }
        th, td {
            border: 1px solid #30F; /* 为单元格单独设置边框 */
            padding: 50px; /* 为单元格内容与边框之间设置 50px 的内边距 */
            margin: 50px; /* 为单元格与单元格边框之间设置 50px 的外边距 */
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>网络安全问题</th>
            <th>解决方案</th>
            <th>解决办法</th>
        </tr>
        <tr>
            <th>渗透问题</th>
            <td>渗透测试</td>
            <td>渗透测试工程师将利用精湛的技能和先进的技术对系统及应用程序的安全性进行识别和检测。</td>
        </tr>
        <tr>
            <th>漏洞问题</th>
            <td>漏洞评估</td>
            <td>查找并分析内网、外网及云端的漏洞。</td>
        </tr>
    </table>
</body>
</html>

效果展示

2-3、使用CSS控制单元格的宽度和高度

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 CSS 控制单元格的宽度和高度</title>
    <style type="text/css">
        table {
            border: 1px solid #30F; /* 设置表格的边框 */
            border-collapse: collapse; /* 合并边框 */
        }
        th, td {
            border: 1px solid #30F; /* 为单元格单独设置边框 */
        }
        .one { width: 100px; height: 80px; } /* 定义"A 房间"单元格的宽度与高度 */
        .two { height: 40px; } /* 定义"B 房间"单元格的高度 */
        .three { width: 200px; } /* 定义"C 房间"单元格的宽度 */
    </style>
</head>
<body>
    <table>
        <tr>
            <td class="one">A 房间</td>
            <td class="two">B 房间</td>
        </tr>
        <tr>
            <td class="three">C 房间</td>
            <td class="four">D 房间</td>
        </tr>
    </table>
</body>
</html>

效果展示

相关推荐
韩明君33 分钟前
前端学习笔记（四）自定义组件控制自己的css
前端·笔记·学习
NoneCoder1 小时前
HTML与Web 性能优化：构建高速响应的现代网站
前端·性能优化·html
noevil1 小时前
cuda学习1: 获取设备信息
学习
FAREWELL000751 小时前
C#进阶学习（十四）反射的概念以及关键类Type
开发语言·学习·c#·反射·type
换日线°2 小时前
CSS常遇到自适应高度动画、带三角气泡阴影一行样式解决
css·微信小程序
隐-梵2 小时前
Android studio学习之路（八）---Fragment碎片化页面的使用
android·学习·android studio
百锦再2 小时前
Kotlin学习基础知识大全(上)
android·xml·学习·微信·kotlin·studio·mobile
灏瀚星空2 小时前
从基础到实战的量化交易全流程学习：1.1 量化交易本质与行业生态
人工智能·笔记·学习·数学建模·信息可视化
FAREWELL000752 小时前
C#进阶学习（十三）C#中的预处理器指令
开发语言·学习·c#·预处理指令
xiaohanbao092 小时前
day6 python数据可视化
python·学习·信息可视化·pandas
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06DeepSeek各版本说明与优缺点分析07西电B测-计算机网络综合实验(含验收问题)08yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记09苍穹外卖面试总结10最新 Kubernetes 集群部署 + flannel 网络插件（保姆级教程，最新 K8S 版本）