HTML基础 - HTML表格-程序员宅基地

技术标签: html5  vscode  前端  前端基础  html  网页设计  

HTML基础 - HTML表格

1.无表头的表格 <table> <tr> <td>

<table>标签代表的是表
<tr>标签代表的是行
<td>标签代表的是列
在html页面中的表格来着,就和excl的表格不一样喽,咱自己有自己的规则:
这就是没有表头,也就是最简单的一个表格。(设置了边框为1 :border= “1”)
在这里插入图片描述

去掉多余框格线 cellspacing=”0”

这个时候咱们看表格中有些奇奇怪怪的框格对吧,怎么去掉他们呢:
在这里插入图片描述

这样就舒服多啦。

表格在网页居中显示 align=“center”

上一张图能看见,表格是在网页的左上方显示,那么显示的位置怎么变换呢,比如使它居中显示:
在这里插入图片描述

这就跑到页面中部啦。

2.有表头的表格 <th>

<th>表示就是表头了哦,字体是加粗居中显示的
在日常开发中,如果只有一个表格比较容易让人不明所以,这时候就需要有表头啦,表面这是个啥,或者说每一列代表了什么东西
在这里插入图片描述

3.有标题的表格 <caption>

<caption>标签表示表头
前面说了每一列是什么意思,现在需要有标题了,标题就是让人明白这个表是啥意思,具体想干啥:
在这里插入图片描述

4.定义每一列的样式 <colgroup> <col>

使用<colgroup>标签内的<col>
例:
使一行为蓝色

<col span="1" style="background-color: aqua;"> 

使两行为橘色

<col span="2" style="background-color: orange;">

span等于几,就是代表让几列变色
在这里插入图片描述

5.页眉,主体,页脚 <thead> <tbody> <tfoot>

<thead>页眉标签,页眉的位置是在文章的上部
<tbody>主体标签,表示内容主题
<tfoot>页脚标签,表示内容最后
正常一般的文章呢也是这样的,页眉在上,页脚在下,主题在中间。
在这里插入图片描述

其实有时候直接照文章从上到下的排列顺序也可以达到这样的要求,那么为什么非得定个什么页眉标签<thead>,页脚标签<tbody>和主题标签<tfoot>呢?
因为这些标签是用来固定我们的数据的,比如页眉标签,只要我使用了,不管是代码中放在哪里,它都能自己找到自己该在的位置,然后乖乖跑过去呆着,其他的也是一样:
在这里插入图片描述

6.合并单元格 行 关键词:colspan

首先呢,这是最原本的表格
在这里插入图片描述

现在呢,咱需要把“嘉文”和“提莫”合并在一起,并且取个新名字叫“嘉文四世”,
对比之前的图片可以看见,删除了“提莫”那一行数据,然后把原本的“嘉文”改成了“嘉文四世”,并且在与之对应的<td>标签上增加了colspan=”2”。
注:colspan=“2” 代表合并两个单元格,数字越往上加,代表合并单元格越多
在这里插入图片描述

7.合并单元格 列 关键词:rowspan

首先呢,这是最原本的表格
在这里插入图片描述

现在呢,咱们需要把“金克斯”和“伊芙琳”给合并了,并且起个新名字叫“暴走萝莉”。
和之前对比可以发现<td>标签新增了rowspan=”2”,并且删除了原本的“金克斯”改成了“暴走萝莉”,并且删除了原本的“伊芙琳”那一行数据。
注:rowspan=“2” 代表合并两个单元格,数字越往上加,代表合并单元格越多

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_45383769/article/details/124016726

智能推荐

SPEC virt2013 KVM测试_specvirt-程序员宅基地

文章浏览阅读4.1k次。1、背景介绍 SPEC是Standard Performance Evaluation Corporation(标准性能评估机构)的简称,是一个全球性的、权威的、代表目前业界标准的第三方应用性能测试组织。成立于1988年,是由斯坦福大学、清华大学、微软、等全球几十所知名大学、研究机构、IT企业组成,得到Intel、IBM、Huawei等支持和全球众多用户的广泛认可。 ..._specvirt

论文阅读笔记《Anomaly Detection in Nanofibrous Materials by CNN-Based Self-Similarity》-程序员宅基地

文章浏览阅读921次,点赞2次,收藏7次。核心思想  本文提出一种基于自相似度的异常检测方法,核心思想在于正常样本图像之间的相似性更大,而缺陷样本和正常样本之间的相似性更小,如果某个样本与正常样本之间的最小距离都超过一个阈值时,就判定为异常样本。首先利用一个在ImageNet数据集上预训练好的特征提取网络对正常样本进行特征提取,然后对特征向量进行PCA降维,降维后再进行K-means聚类,每个类别中距离聚类中心最近的样本就作为这个类别的代表,所有类别代表构成一个正常样本字典。然后测试时用测试样本分别计算与字典中所有类别代表之间的欧氏距离,并计算其_anomaly detection in nanofibrous materials by cnn-based self-similarity

【Git】Git中 tag 与 branch 的关系与使用_git tag和branch-程序员宅基地

文章浏览阅读1.9k次,点赞4次,收藏3次。标签是用于标记特定提交的静态引用。它是一个有意义的名称,用于表示项目的里程碑、版本发布或重要的提交。标签是不可变的,一旦创建就不会随着新的提交而移动。标签可以是轻量标签(lightweight tag),只是一个指向特定提交的引用也可以是注释标签(annotated tag),它包含了额外的信息(如标签的作者、日期、注释等)分支是代码开发过程中的不同线路或方向。每个分支都是从主分支(一般是master)派生出来的,开发者可以在分支上进行独立的工作,而不会影响主分支或其他分支。_git tag和branch

matlab进行fft变换,画出频谱图_matlab傅里叶变换后画频谱图-程序员宅基地

文章浏览阅读3.2w次,点赞19次,收藏133次。一、fft()函数matlab提供了快速傅里叶变换的函数fft(),fft函数能够进行指定点数的快速傅里叶变换。调用格式如下:resfft = fft(data1,1000); %resfft,fft 变换结果, data1--进行变换的数据,1000--指定1000点fft变换二、画出频谱图N = 1000; %点数n = 0:N-1; fs = 1000; %采样频率figureplot(n/N*fs,abs(resfft));..._matlab傅里叶变换后画频谱图

STM32输入上拉下拉 寄存器怎么设置实现_上拉输入怎么写-程序员宅基地

文章浏览阅读1w次,点赞5次,收藏13次。STM32输入上拉下拉 寄存器怎么设置实现在输出模式下:ODR是数据输出寄存器,但是在 输入模式下,同时也用来配置上拉下拉设置。在Alientek的源码中的按键输入实验中有如下一段初始化代码:void KEY_Init(void){ RCC->APB2ENR|=1 GPIOA->CRL&=0XFFFFFFF0;//PA0设置成输入_上拉输入怎么写

随便推点

手机视频解码的两种方式-程序员宅基地

文章浏览阅读7.9k次,点赞2次,收藏4次。手机视频解码有两种方式:“硬解”和“软解”,两种解码方式分别调用的是手机的CPU和GPU。 在手机上GPU和CPU的关系很紧密,在以前的智能机很多GPU的事都是由CPU来完成的,手机发展到如今已经有了独立的GPU。但是,GPU还是和CPU封装在一起的,由芯片开发商一起开发。如今的手机系统中,“硬解”的处理能力已非常强大;一些手机的GPU处理器,在视频和渲染方面有了极大的提升,有的芯片甚至..._解码方式

在VC6.0下编译osip、exosip协议栈的方法 _exosip_call_build_options-程序员宅基地

文章浏览阅读3.2k次。原文http://blog.csdn.net/wiizane/archive/2007/04/10/1559654.aspx打好包的代码在我的资源里,明明上传了为什么不显示啊下载地址注 必须先编译osipparser2 然后是osip2 最后才是exosip2引用了pthread今天VC6.0环境下上对osip协议栈和exosip协议栈进行编译,学到不少知识,记录下来,当作今天_exosip_call_build_options

【Java刷题进阶】基础入门篇⑥-程序员宅基地

文章浏览阅读701次,点赞22次,收藏20次。Java基础学习主要以练习为主,很多朋友听完视频课程学会基础以后感觉对练手项目无从下手,这里推荐去牛客网看看,这里的IT题库内容很丰富,属于国内做的很好的IT学习网站,而且是课程+刷题+面经+求职+讨论区分享,一站式求职学习网站,最最最重要的里面的资源全部免费!!从基础开始练习,知识点编排详细,题目安排合理,题目表述以指导的形式进行。整个题单覆盖了java入门的全部知识点以及全部语法,通过知识点分类逐层递进,从基础开始到最后的实践任务,都会非常详细地指导你应该使用什么函数,应该怎么输入输出。...

socket的阻塞模式和非阻塞模式_socket的怎么设置非阻塞模式-程序员宅基地

文章浏览阅读7.1k次,点赞13次,收藏72次。文章目录socket的阻塞模式和非阻塞模式如何将socket设置为非阻塞模式send和recv函数在阻塞和非阻塞模式下的表现非阻塞模式下send和recv函数的返回值总结阻塞与非阻塞socket的各自使用场景socket的阻塞模式和非阻塞模式如何将socket设置为非阻塞模式无论是Windows还是Linux,默认创建的socket都是阻塞模式的。在linux上,我们可以使用fcntl函数或者ioctl函数给创建的socket增加O_NONBLOCK标志来将socket设置为非阻塞模式。int o_socket的怎么设置非阻塞模式

IPSEC---VPN-程序员宅基地

文章浏览阅读907次,点赞25次,收藏16次。提示:这里对文章进行总结:例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

英飞凌TC3XX芯片执行软件复位后初始化失败的问题_英飞凌芯片复位地址-程序员宅基地

文章浏览阅读516次,点赞8次,收藏10次。在使用TC3xx芯片开发过程中,调用Mcu_PerformReset()接口函数进行软件复位,发现复位后restart,卡死在初始化过程中。由于调用的接口为软件复位,查询手册可知软件复位不会清ram,猜测可能是mcu初始化时校验ram,发现其中初始值不为0导致的错误。找到ModuleId为101的对应模块Mcu。中所示,修改MemMap_Common.h文件,将定段为NOINIT的变量改为定段到ZERO_INIT中。修改定段信息,将原本定段为NOINIT的变量改为定段到ZERO_INIT中,即初始化为0。_英飞凌芯片复位地址

推荐文章

热门文章

相关标签