百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

初始HTML——表格标签_html制表标签

myzbx 2025-02-17 13:15 62 浏览

经过昨天的学习算是对HTML有了一点点了解,知道了什么是前端,什么是HTML、前端三大标准、主流浏览器和html的基本结构及常用标签。那么今天继续看看html还有什么新的知识吧。

特殊字符(了解即可)

有常见性就有特殊性,我们使用电脑时经常会用到空格键,在html文档上有时也会使用到空格键等等,那怎么在html上又是以什么形式展示给浏览器解析呢?

浏览器显示结果

特殊字符名称

HTML编辑字符


空格

& n b s p;

<

小于号

& l t ;

>

大于号

& g t;

&

& a m p;

?

版权

& c o p y ;

表格标签

作用:在浏览器上清晰美观地显示、展示数据。

表格标签的语法

表格标签

,一个table标签中可嵌套多个tr标签。

行标签:,一个tr标签代表一行。一个行标签中可以嵌套多个单元格标签。

单元格标签:,一个td标签代表一个单元格。在单元格中可以填充文本、图片、超链接等等内容。

在html中表格不是由横线划分行和列,而是大大小小的矩形盒子来划分。Table是一个最大的矩形盒子,里面包含tr标签,这个是一个和table长度差不多的矩形盒子,table一行仅容纳一个tr盒子。在tr盒子中还包含有N个td盒子,td盒子就是单元格。

表格示例:

在html文档中编辑表格标签结构时,除了一个标签一个标签地敲之外,可以使用快捷方式快速操作:如五行三列的表格,可以在table标签中输入:“tr*5>td*3”然后敲回车,就将其表格结构迅速展现出来。

表格示例:

姓名 性别 年龄
张三丰 27
李四喜 18
王五通 35
秦六夏 30

运行界面示例:默认状态下表格是没有线条分界,表格对齐方式左对齐。

表头单元格标签

位于表格的第一行或第一列,可以使其内容加粗居中显示。

语法:

表头表格代码示例:

表头表格示例:

姓名 性别 年龄
张三丰 27
李四喜 18
王五通 35
秦六夏 30

运行界面示例:

表格结构标签

表格结构标签分为表格头部标签表格主体标签。类似于head标签和body标签对于html标签之间的关系。

表格头部标签:。定义表格头部,嵌套在

中,一般位于第一行。

表格主体标签:。定义表格主体,嵌套在

中,主要用于显示数据。

代码示例:

表格结构标签

姓名 性别 年龄
张三丰 36
李四喜 30

运行界面:

表格属性

虽然表格属性在实际开发过程中不常使用,一般都是通过CSS样式设置,但是还是需要记住这些属性关键词,在css中属性关键词也会用到。

注:这些属性都要写在table标签的开始标签中,多个属性之间需要使用空格分隔。

align:表格的对其方式。

align=“left”:在浏览器中居左显示。也是默认显示。

align=“center”:在浏览器中居中显示。

align=“right”:在浏览器中居右显示。

border:表格是否具有边框。

border=”1”:表格添加边框。

cellpadding:单元格内的元素和td边框的距离。

举个例子,如果表格是一件教室的话,桌子就是单元格,桌子上放的书本就是单元格内的元素,书本边缘和桌子边缘之间产生的空白区域就是cellpadding的值。

cellspacing:单元格和单元格之间的距离。默认是有空隙的,可设置为零,使其空隙清零,成为一条直线。

还是以教室为表格,桌子为单元格。桌子和桌子之间的距离就是cellspacing的值。

width:表格的宽度,属性值可以是像素值也可以是百分比。

height:表格的高度,属性值可以是像素值也可以是百分比。

代码示例:

表头表格示例:

姓名 性别 年龄
张三丰 27
李四喜 18
王五通 35
秦六夏 30

运行界面:

合并单元格

合并单元格是指将两个或两个以上的单元格合并成一个单元格。合并属性一般写在单元格标签的开始标签上。合并代码属性设置后,要将没有写合并的单元格代码的其他合并单元格标签删除掉。

目标单元格:(合并代码存在位置)

跨行合并:最上侧单元格为目标单元格,写合并代码。

跨列合并:最左侧单元格为目标单元格,写合并代码。

合并单元格的方式:

跨行合并:将处于不同行的单元格进行合并

语法:rowspan=“合并单元格个数”

代码示例:

跨行合并表格:

运行界面:

跨列合并:将处于不同列的单元格进行合并

语法:colspan=“合并单元格个数”

代码示例:

跨列合并表格:

运行示例:

今天学习的表格内容就到这里了,明天开始学习列表。

相关推荐

为什么钟表的指针是从左向右顺时针转?

所有的钟表指针都是从左向右转的,所以我们就用它来表示旋转方向了。那么,为什么钟表都是从左向右转呢?正着转也好,反着转也好,一圈不都是12小时吗?这就要从钟表的前身说起了。在钟表出现之前,人们使用过一种...

牛人将电子钟改造高精度时钟,日误差0.26秒!解决走时不准通病

家里有好多个电子钟,精度各种参差不齐,然后走时就是各种混乱,是可忍孰不可忍……自打发现8025这个好玩意儿之后,就决定不忍了。第一个上场的聪明钟,为啥叫聪明钟然后还走的不准。三节电池供电,其中3V给主...

篮球裁判手势图解之计时钟、得分替换和暂停手势

▋篮球裁判手势图解之计时钟手势停止计时钟手势,伸开手掌,垂直举过头部。犯规停止计时钟手势,一拳握紧,垂直举过头部。计时开始手势,用手做劈柴动作,将垂直举过头部的手放下。▋篮球裁判手势图解之得分手势1...

罗马数字的起源与用途

一、罗马数字的诞生与进化罗马数字起源于古罗马帝国,拥有一个漫长而复杂的历史,始于公元前8世纪至9世纪,与古罗马帝国在帕兰丁山(PalantineHill)周围建立的时间大致相同。不过,罗马数...

基于 Arduino Nano R3 的红外遥控数字时钟

由于在ArduinoNano上没有足够的引脚来编写代码,该项目只有有限的功能(即使没有设置时间的设施)。通过添加红外线遥控器,我可以灵活地整合所有需要的功能(如果需要,可能会更多),不需要额外的...

大班必备33首数字歌,轻松学数学

适合大班宝贝的33首数学歌,让孩子们在玩中学,通过好玩、好记的的儿歌来了解数学的知识点,轻松学数学!以上所有有关数学概念的知识点,其中包含了钟表、点数、分解组成、加减、单双数、倒数正数、凑十、方位...

11的寓意和象征

在数字的王国里,每个数字都有其独特的内涵和象征意义。今天,我们将一起探索数字11的奥秘和象征意义。这个奇特的数字,不仅在我们的日常生活中扮演着重要的角色,而且在神秘主义和宗教中也占有的一席之地。首先,...

基于TM1637的数字时钟

方案介绍这个项目是一个原型,我将在我正在进行的其他数字时钟项目中使用。这是我计划在我的下一个数字时钟项目中使用的时间和闹钟设置机制的原型。我希望能给你提供到帮助。如果你想到任何改进,请告诉我。我会更乐...

【金龟子讲睡前故事】数字不见啦

“快做数学题!”妈妈大声吼邦邦。“啊,好烦呀!”邦邦回到屋里,对着数学练习册大声嚷嚷。考拉熊博士在邦邦的屋外听到邦邦的声音,自言自语说:“好像又在发脾气,我得去看看他。”考拉熊博士推门进去,只见邦邦大...

SE 最终幻想 35 周年,《FF7 重制版》破坏剑数字时钟 9 月发售

IT之家3月9日消息,SE今日正式开设了《最终幻想》35周年纪念网站,天野喜孝绘制官方LOGO公布!值得一提的是,索尼PlayStation游戏发布会即将于北京时间3月10...

谁说数字钟就是黑白状?他们让你改变看法

如果我们没有了钟表,你会用什么衡量时间?是利用太阳的变化还是凭猜测?之前设计癖也介绍一些有趣的钟表,像是Edelkrone设计的无表针的Oqloq钟表,也有淡化了表针概念的轨道钟表,今天再给大...

杭州元宵游玩大赏|“人体时钟”亮相文三数字生活街区,还有元宵巡游活动等你嗨

钱江晚报·小时新闻记者方力通讯员冯晨晨刘静滴答滴答,在这个时钟里面有一位虚拟的“小姐姐”。她的工作内容就是不断地把分针擦掉,然后再画上新的分针,她每画一次分针擦干净后,再画上一条新的分针,就刚...

来用PPT做一只数字时钟动画

“什么是可见性?“可见性”即指PPT动画元素中的一种。在我们之前的图文教程《动画基础扫盲课,必修!》中提到过一些常用的PPT动画元素。分别为可见性,X,Y坐标,旋转,高度和宽度。而其中所谓的“可见性”...

4060+4013+74ls161数字电子时钟仿真电路图

苹果手机桌面时钟怎么显示 苹果手机桌面时钟显示操作

苹果手机系统流畅,系统使用起来很舒适,是很多人的首选。苹果时钟可以在桌面上显示数字时钟,如果在编辑主屏幕时,不小心把时钟删掉了,要怎么恢复呢?或者想要设置时钟显示,操作是什么样的呢?苹果手机桌面时钟怎...