web第十课:table表格标签

2023-10-17 21:50

本文主要是介绍web第十课:table表格标签,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.table表格介绍 

table是表格标签,里面包含有行tr,行tr里包含td单元格

注意:table里只能包含tr,tr里面也只能包含td,td里面可以包含其他标签

 代码演示:

这里在码标签的时候别忘了我们的快捷方式,这里我们介绍两种:

number one:

number two:

  结果:

此时大家是不是疑惑了,说好的表格呢,为啥没出来线框之类的东西。这时候就要提到它的属性了,往下看:

2.table表格的相关属性:

 border:是一个数值,控制表外边框宽度的一个属性,

width:有像素px和百分比两个单位,像素好理解,百分比指的是占父标签的百分比,

height:和width一样,百分比指的也是占父标签的百分比,但是和width有点区别,在百分比上

代码演示:

 结果:

 表的细节部分:

 到这里肯定有小伙伴疑惑了,接下来就几个大家可能疑惑的点讲一讲:

(1)为什么给table标签加属性的时候,不应该只有外面一层有边框吗,为什么里面的每一个单元格都也加了边框?

解答:那是因为在给table加border属性的时候,里面的单元格边框也自动生成了,不仅加了外边框,里面边框也加了,当宽度和高度增加了,单元格边框是会根据大边框而变化,

(2)这里设置的边框的width,当值为百分比时,指的是占父标签的百分比,举例,看上面那个代码演示,width的值是50%,因为这个50%指的是占父标签的百分之50,这里table的父标签是body,在这里就是整个白的大屏幕,所以看结果刚好占了50%,但是你看这个height不是也是占50%吗,但是它好像并没有占大白屏幕的50%,原因是当你在设置height之前,body的高度其实为0,不是我们看到的这个大白屏幕,当你设置了高度时,这个高度将body的高度给撑起来了,是这个意思。这个高度不用担心,等设置了css给窗口一个定高,这个时候再设置50%的高度就有效了。

我们继续往下看其他的属性:

表格显示在中间,背景颜色为绿色,边框颜色为黄色,如下所示:

代码演示:

 结果:

 接下来,改变边框间距及单元格和内容之间的空隙:

代码演示:

 结果:

 单元格和内容之间的间距指的是结果图红色箭头的距离,设置边框距离也就是单元格和单元格之间的距离为0,就等于一个表格,中间只有一条线隔开内容

3.行tr标签的属性

 属性解释:

height:设置的是每一行的高度占比,宽度是设置不了的,和外面大表格宽度一样

bgcolor:背景颜色指的可以单独给每一行设置不一样的颜色

align和valign:设置的是表格里文字的对齐方式

代码演示:

 结果:

 这里我只给第一行设置了属性,看结果看看它们的区别就知道啦,valign属性用来设置文字垂直属性的,不设置这个属性时,默认文字为middle

4.单元格td标签的属性

 代码演示:

 结果:

 看看结果发现:

(1)当我们改变一个单元格的宽度,实际上是改变了这个单元格所在的列的宽度,看“结果的1”

(2)当我们改变了一个单元格的高度,实际上是改变了这个单元格所在行的高度,看“结果的2”

 

这篇关于web第十课:table表格标签的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/228160

相关文章

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

Java Web指的是什么

Java Web指的是使用Java技术进行Web开发的一种方式。Java在Web开发领域有着广泛的应用,主要通过Java EE(Enterprise Edition)平台来实现。  主要特点和技术包括: 1. Servlets和JSP:     Servlets 是Java编写的服务器端程序,用于处理客户端请求和生成动态网页内容。     JSP(JavaServer Pages)

BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

目录   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 [web][HCTF 2018]admin 考点:弱密码字典爆破 四种方法:   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 访问环境 老规矩,我们先查看源代码

EMLOG程序单页友链和标签增加美化

单页友联效果图: 标签页面效果图: 源码介绍 EMLOG单页友情链接和TAG标签,友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样,如果自适应就填写100%,TAG文件不用修改 安装方法:把Links.php和tag.php上传到网站根目录即可,访问 域名/Links.php、域名/tag.php 所有模板适用,代码就不粘贴出来,已经打

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

9.8javaweb项目总结

1.主界面用户信息显示 登录成功后,将用户信息存储在记录在 localStorage中,然后进入界面之前通过js来渲染主界面 存储用户信息 将用户信息渲染在主界面上,并且头像设置跳转,到个人资料界面 这里数据库中还没有设置相关信息 2.模糊查找 检测输入框是否有变更,有的话调用方法,进行查找 发送检测请求,然后接收的时候设置最多显示四个类似的搜索结果

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown 0. 引言1. 提示词2. 原始版本 0. 引言 最近尝试将图片中的表格转换成Markdown格式,需要不断条件和优化提示词。记录一下调整好的提示词,以后在继续优化迭代。 1. 提示词 英文版本: You are an AI assistant tasked with extracting the content of

JavaWeb【day09】--(Mybatis)

1. Mybatis基础操作 学习完mybatis入门后,我们继续学习mybatis基础操作。 1.1 需求 需求说明: 根据资料中提供的《tlias智能学习辅助系统》页面原型及需求,完成员工管理的需求开发。 通过分析以上的页面原型和需求,我们确定了功能列表: 查询 根据主键ID查询 条件查询 新增 更新 删除 根据主键ID删除 根据主键ID批量删除

利用Django框架快速构建Web应用:从零到上线

随着互联网的发展,Web应用的需求日益增长,而Django作为一个高级的Python Web框架,以其强大的功能和灵活的架构,成为了众多开发者的选择。本文将指导你如何从零开始使用Django框架构建一个简单的Web应用,并将其部署到线上,让世界看到你的作品。 Django简介 Django是由Adrian Holovaty和Simon Willison于2005年开发的一个开源框架,旨在简

web群集--nginx配置文件location匹配符的优先级顺序详解及验证

文章目录 前言优先级顺序优先级顺序(详解)1. 精确匹配(Exact Match)2. 正则表达式匹配(Regex Match)3. 前缀匹配(Prefix Match) 匹配规则的综合应用验证优先级 前言 location的作用 在 NGINX 中,location 指令用于定义如何处理特定的请求 URI。由于网站往往需要不同的处理方式来适应各种请求,NGINX 提供了多种匹