首页 > 其他分享 >【HTML】第六讲:表格的创建

【HTML】第六讲:表格的创建

时间:2023-11-03 21:32:08浏览次数:39  
标签:第六 表格 标签 单元格 跨列 rowspan HTML 设置

熟能生巧@放纵lili

一、表格标签的基本介绍。

1、<table>标签

<table>标签可以用于定义表格对象,同事可以使用其标签设置表格的宽度、对齐方式、背景颜色等样式。其常用的属性有:

width宽度、height高度、bgcolor背景颜色、align=“left(左)/center(居中)right(右)”文字水平对齐、valign=“top(顶端)/middle(居中)/bottom(底部)”文字垂直对齐、cellspancing=“”单元格之间的间距、cellpadding=“ ”单元格与内容之间的空隙。

2、td标签

<td>标签其实就是表格中的单元格。

4、<th>标签

<th>标签也是表格中的单元格,和<td>标签类似,但它通常用于表头的单元格,更为特殊一些。

5、<tr>行标签

<tr>标签是用来生成表格中的行标签,一个<tr></tr>标签表示表格的一行。

可以包含多个<td>或<th>标签。

二、表格基本结构

【HTML】第六讲:表格的创建_表格的创建

现在我们来给这个表格添点内容

【HTML】第六讲:表格的创建_HTML_02

大家这时候就会发现,这怎么没有边框啊!别急,别急!上面讲的一些常用属性这不就派上用场了吗

【HTML】第六讲:表格的创建_HTML_03

这里我们也可以看到<th>标签实际上对字体会有默认的设置。

三、单元格的跨行和跨列设置。

1、单元格的跨行设置

rowspan=“ 所要合并单与格的行数 ”(用于<td>标签)

【HTML】第六讲:表格的创建_表格_04

【HTML】第六讲:表格的创建_表格的创建_05

可以看到,只是在原有的表格的后三行中,每行各在左边加了一个单元格,使rowspan=“ ”向下跨两行,而“体育”被移到了右边,可见,rowspan=“ ”是向下跨行,而不是合并单元格,只需将空格删去即可。

【HTML】第六讲:表格的创建_表格_06

2、单元格的跨列设置。

colspan=“ 所要合并单元格的列数”(用于<td>标签)

【HTML】第六讲:表格的创建_表格_07

【HTML】第六讲:表格的创建_表格的创建_08

可见colspan也会跨列。

给表头设计一下

【HTML】第六讲:表格的创建_HTML_09

表格还有很多的样式设置

【HTML】第六讲:表格的创建_表格_10

这里只展示了一点,学会了相关属性的设置,各种花花绿绿的表格都能做的出来,要多加练习!






标签:第六,表格,标签,单元格,跨列,rowspan,HTML,设置
From: https://blog.51cto.com/u_16292324/8174621

相关文章

  • html 5
    ***HTML5的基本骨架<!DOCTYPEhtml><htmllang="en"><head></head><body></body></html>**DOCTYPE声明DOCTYPE是documenttype的缩写,避免浏览器的怪异模式****head元素head标签用于定于文档的头部,定义了文档的各种属性和信息,包括标题,web中的位置以及和......
  • 麻烦看下这个表格宏命令如何修复?
    大家好,我是皮皮。一、前言前几天在Python最强王者交流群【......
  • # yyds干货盘点 # 麻烦看下这个表格宏命令如何修复?
    大家好,我是皮皮。一、前言前几天在Python最强王者交流群【......
  • 前端歌谣的刷题之路-第六十九题-根据id获取元素
     前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣题目......
  • 列表/表格搜索方法->前端实现
    很多业务系统中都会用到表格/列表,大部分都是用组件,配合搜索接口可以实现,搜索按钮是发送请求获取数据来更新表格数据。但不是所有的列表都会有对应的后端搜索接口,比如在对一个弹窗里面的列表进行选择,数据量不是特别大的情况下希望前端支持筛选,可以更加方便快捷的对数据进行操作,这......
  • 如何使用HtmlUnit库采集天猫图片
    天猫阿里旗下一个优秀的购物平台,很多刚开始接触电商的朋友都一天猫为变准,用心打造自己的商品宝贝,天猫上面很多商家的精美图片也是我们用以效仿的好范本。今天我就用HtmlUnit库写一个用于采集天猫商品图片的爬虫,希望能对刚刚接触电商的朋友有所帮助。```javaimportcom.gargoylesof......
  • 利用HtmlAgilityPack库采集美图秀秀图片
    上次有个美女跟我说美图秀秀官网的图片都好漂亮,既然美女都开口了,我能说什么呢?于是,我就用HtmlAgilityPack库写了一个C#爬虫程序,专门来采集美图秀秀的图片,看着网站挺复杂,不过这个爬虫写起来倒是一点也不难,这就给大家分享。```csharpusingSystem;usingSystem.Net;usingHtmlAgili......
  • 基于WebGL+HTML5的智慧粮仓3D可视化系统
    仓廪实、天下安。民之所需,行之所至。建设背景古往今来,粮食问题历来是安邦定国的头等大事。“粮食”作为人类生活的生命之源,在人们的日常生活中起着决定性的作用。收获的粮食归仓,仓储工作是稳定“大国粮仓”的重要环节,当粮食收购后,如何让丰收成果颗粒归仓,减少损失,并确保粮食储藏质量......
  • 甘特图组件DHTMLX Gantt用例 - 如何拆分任务和里程碑项目路线图
    创建一致且引人注意的视觉样式是任何项目管理应用程序的重要要求,这就是为什么我们会在这个系列中继续探索DHTMLXGantt图库的自定义。在本文中我们将考虑一个新的甘特图定制场景,DHTMLXGantt组件如何创建一个项目路线图。用例-带有自定义时间尺度、拆分任务和文本标签的项目路线......
  • 2023-2024-1 20231329《计算机程序与设计》第六周学习总结
    作业信息这个作业属于哪个课程https://edu.cnblogs.com/campus/besti/2023-2024-1-CFAP这个作业要求在哪里https://www.cnblogs.com/rocedu/p/9577842.html#WEEK06这个作业的目标计算机科学概论第7章并完成云班课测试《C语言程序设计》第5章并完成云班课测试......