CSS学习笔记8——表格

一、表格 

 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>标签中输入文字。

 代码展示

<!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属性 

<!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属性 

<!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属性 

<!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>

<!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>标签的属性

代码示例

<!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、表格的结构

<!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控制表格边框

<!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控制单元格边距

<!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控制单元格的宽度和高度 

<!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>

效果展示

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/903531.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

爬虫学习笔记（一）

爬虫学习笔记（一）

目的 通过编写程序爬取互联网上的优质资源 爬虫必须要使用python吗 非也~ 编程语言知识工具&#xff0c;抓取到数据才是目的&#xff0c;而大多数爬虫采用python语言编写的原因是python的语法比较简单&#xff0c;python写爬虫比较简单&#xff01;好用&#xff01;而且pyt…
阅读更多...
大厂面试：MySQL篇

大厂面试：MySQL篇

前言 本章内容来自B站黑马程序员java大厂面试题和小林coding 博主学习笔记&#xff0c;如果有不对的地方&#xff0c;海涵。 如果这篇文章对你有帮助&#xff0c;可以点点关注&#xff0c;点点赞&#xff0c;谢谢你&#xff01; 1.MySQL优化 1.1 定位慢查询 定位 一个SQL…
阅读更多...
C++_数据结构_详解红黑树

C++_数据结构_详解红黑树

✨✨ 欢迎大家来到小伞的大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C学习 小伞的主页&#xff1a;xiaosan_blog 制作不易&#xff01;点个赞吧&#xff01;&#xff01;谢谢喵&#xff01;&…
阅读更多...
DNA复制过程3D动画教学工具

DNA复制过程3D动画教学工具

DNA复制过程3D动画教学工具 访问工具页面: DNA复制动画演示 工具介绍 我开发了一个交互式的DNA复制过程3D动画演示工具&#xff0c;用于分子生物学教学。这个工具直观展示了&#xff1a; DNA双螺旋结构的解旋过程碱基互补配对原理半保留复制机制完整的复制周期动画 主要特点…
阅读更多...
使用阿里云 CDN 保护网站真实 IP：完整配置指南

使用阿里云 CDN 保护网站真实 IP：完整配置指南

使用阿里云 CDN 保护网站真实 IP&#xff1a;完整配置指南 一、宝塔面板准备工作1. 确认网站部署状态2. 宝塔中检查网站配置 二、配置阿里云 CDN1. 添加域名到 CDN2. 配置 DNS 解析3. 配置成功确认 三、宝塔面板安全加固&#xff08;隐藏 IP 的关键步骤&#xff09;1. 禁止通过…
阅读更多...
PHP经验笔记

PHP经验笔记

isset — 检测变量是否设置,并且不是NULL; 若变量存在且值不为NULL&#xff0c;则返回 TURE 若变量存在且其值为NULL或变量不存在&#xff0c;则返回 FALSE 结论 1. 当变量为空字符串、数值0和布尔值false时&#xff0c;isset全部返回true 2. 当变量不存在和变量存在且值为NULL…
阅读更多...
Linux——安装NVM

Linux——安装NVM

1. 安装命令 官方地址&#xff1a;https://github.com/nvm-sh/nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash2. 安装完成后执行命令 source ~/.bashrc3. 验证 nvm -v
阅读更多...
CentOS 7 磁盘阵列搭建与管理全攻略

CentOS 7 磁盘阵列搭建与管理全攻略

CentOS 7 磁盘阵列搭建与管理全攻略 在数据存储需求日益增长的今天&#xff0c;磁盘阵列&#xff08;RAID&#xff09;凭借其卓越的性能、数据安全性和可靠性&#xff0c;成为企业级服务器和数据中心的核心存储解决方案。CentOS 7 作为一款稳定且功能强大的 Linux 操作系统&am…
阅读更多...
C++每日训练 Day 18：构建响应式表单与数据验证（初学者友好）

C++每日训练 Day 18：构建响应式表单与数据验证（初学者友好）

&#x1f4d8; 本篇目标&#xff1a;在前几日协程与事件驱动机制基础上&#xff0c;构建一个响应式表单系统&#xff0c;实现用户输入的异步验证与反馈。通过协程挂起/恢复机制&#xff0c;简化异步逻辑&#xff0c;提升代码可读性。 &#x1f501; 回顾 Day 17&#xff1a;响应…
阅读更多...
Vue初步总结-摘自 黑马程序员

Vue初步总结-摘自 黑马程序员

本文摘自 bilibili 前端最新Vue2Vue3基础入门到实战项目全套教程&#xff0c;自学前端vue就选黑马程序员&#xff0c;一套全通关&#xff01; 更多详情可参考&#xff1a; https://www.yuque.com/u26161316/pic6n4/heyv8nv8ubfk3fhe?singleDoc# 《Vue》
阅读更多...
【基于Qt的QQ音乐播放器开发实战：从0到1打造全功能音乐播放应用】

【基于Qt的QQ音乐播放器开发实战：从0到1打造全功能音乐播放应用】

&#x1f339; 作者: 云小逸 &#x1f91f; 个人主页: 云小逸的主页 &#x1f91f; motto: 要敢于一个人默默的面对自己&#xff0c;强大自己才是核心。不要等到什么都没有了&#xff0c;才下定决心去做。种一颗树&#xff0c;最好的时间是十年前&#xff0c;其次就是现在&…
阅读更多...
线程池（二）：深入剖析synchronized关键字的底层原理

线程池（二）：深入剖析synchronized关键字的底层原理

线程池&#xff08;二&#xff09;&#xff1a;深入剖析synchronized关键字的底层原理 线程池&#xff08;二&#xff09;&#xff1a;深入剖析synchronized关键字的底层原理一、基本使用1.1 修饰实例方法1.2 修饰静态方法1.3 修饰代码块 二、Monitor2.1 Monitor的概念2.2 Moni…
阅读更多...
Linux CentOS 7 安装Apache 部署html页面

Linux CentOS 7 安装Apache 部署html页面

*、使用yum包管理器安装Apache。运行以下命令&#xff1a; sudo yum install httpd *、启动Apache服务 sudo systemctl start httpd *、设置Apache服务开机自启 # 启用开机自启动 sudo systemctl enable httpd# 禁用开机自启动 sudo systemctl disable httpd *、验证Apac…
阅读更多...
前端设置三行文本省略号，失效为什么？

前端设置三行文本省略号，失效为什么？

实际效果&#xff1a;第三行出现省略号&#xff0c;但是第四行依旧显示了部分文字 这个问题通常是由于 CSS 多行文本截断&#xff08;-webkit-line-clamp&#xff09;的计算方式或布局冲突导致的。以下是完整解决方案&#xff0c;确保三行文本截断正确显示省略号&#xff0c;并…
阅读更多...
git学习之git常用命令

git学习之git常用命令

1. 初始化仓库 git init初始化一个新的 Git 仓库。 2. 克隆远程仓库 git clone <repository-url>从远程服务器克隆一个已有仓库到本地。 3. 配置用户名和邮箱 git config --global user.name "Your Name" git config --global user.email "youexampl…
阅读更多...
【Spring Boot】深入解析：#{} 和 ${}

【Spring Boot】深入解析：#{} 和 ${}

1.#{} 和 ${}的使用 1.1数据准备 1.1.1.MySQL数据准备 &#xff08;1&#xff09;创建数据库&#xff1a; CREATE DATABASE mybatis_study DEFAULT CHARACTER SET utf8mb4;&#xff08;2&#xff09;使用数据库 -- 使⽤数据数据 USE mybatis_study;&#xff08;3&#xff…
阅读更多...
Poco C++全面开发指南：日期和时间

Poco C++全面开发指南：日期和时间

时间戳 时间戳是指格林威治时间1970年01月01日00时00分00秒&#xff08;北京时间1970年01月01日08时00分00秒&#xff09;起至现在的总秒数。在poco中可以可以使用Timestamp类获取。 #include <Poco/Timestamp.h> #include <iostream>int main() {Poco::Timestam…
阅读更多...
水利三维可视化平台怎么做？快速上手的3步指南

水利三维可视化平台怎么做？快速上手的3步指南

分享大纲&#xff1a; 1、了解水利三维可视化平台 2、选择合适的开发平台 3、快速搭建水利三维可视化平台 第一步&#xff1a;了解水利三维可视化平台 水利三维可视化平台是利用大数据、物联网、数字孪生等技术&#xff0c;将物理实体数字化建模&#xff0c;并通过三维可视化技…
阅读更多...
高级前端面试题：基于2025年最新技术体系

高级前端面试题：基于2025年最新技术体系

高级前端面试题：基于2025年最新技术体系 引言 随着前端技术的不断发展，2025年的前端面试题也呈现出新的特点和趋势。本报告基于最新的前端技术体系，收集了当前热门的面试题，旨在帮助准备高级前端工程师面试的候选人全面了解面试考察点。报告内容涵盖HTML5 Canvas、WebGL、…
阅读更多...
图像处理——边缘检测

图像处理——边缘检测

1 概述 边缘检测是图像处理和计算机视觉中的一项基本技术&#xff0c;用于识别图像中亮度变化剧烈的像素点&#xff0c;这些像素点通常对应于物体的边界。它通过检测图像中亮度或颜色变化显著的区域&#xff0c;提取出物体的轮廓&#xff0c;常用于计算机视觉、图像处理和模式识…
阅读更多...
最新文章

Copyright @ 2022~2023