当前位置:首页 > 前端技术 > Html制作表格

Html制作表格

2022年08月04日 19:08:48前端技术2

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术:table

作者:伊利奶盒

撰写时间:2022年3月10日

表格在网页中可以更好的划分所需的内容,比如一个软件的下载地址,通过表格划分可以清楚的告诉使用者新版本增加了什么新功能,以及新版本和旧版本相对应的下载链接,又或者一个游戏的下载页面,通过表格可以清楚的告诉玩家支撑该游戏运行所需的最低配置和推荐配置具体是什么。

知道了表格的用途,那么我们开始制作一个简单的表格吧。

1.首先我们需要创建一个新的html文件建立好基本框架。

Html制作表格 _ JavaClub全栈架构师技术笔记 

2.在<body>标签内输入一个<table>标签表示这是一个表格。

Html制作表格 _ JavaClub全栈架构师技术笔记 

3.在<table>标签内建立一行<tr>以及表头<th>并输入表头内容。

Html制作表格 _ JavaClub全栈架构师技术笔记 

4.接着再建立新的一行,并在<tr>标签里添加单元格<td>。

Html制作表格 _ JavaClub全栈架构师技术笔记 

5.如需多行数据则只需将单元格多复制几份即可。例如:

Html制作表格 _ JavaClub全栈架构师技术笔记 

6.最后在<table>标签添加边框,一个简单的表格就完成了。

Html制作表格 _ JavaClub全栈架构师技术笔记Html制作表格 _ JavaClub全栈架构师技术笔记 

7.还可以根据实际需求将单元格合并,如果需要将多个列合并只需要在td标签内添加colspan=”(合并列的数量)”(但是后面的内容会被挤到新的一列);如:

Html制作表格 _ JavaClub全栈架构师技术笔记 Html制作表格 _ JavaClub全栈架构师技术笔记

如果要合并多个行则只需要在td标签内添加rowspan=”(合并行的数量)”(但是被占用行的内容会被挤到新的列)如:

Html制作表格 _ JavaClub全栈架构师技术笔记Html制作表格 _ JavaClub全栈架构师技术笔记 

8.如果觉得单元格之间的距离影响美观,还可以用cellspacing=”(数字)”来设置单元格之间的距离,输入0则是没有距离。

Html制作表格 _ JavaClub全栈架构师技术笔记Html制作表格 _ JavaClub全栈架构师技术笔记 

9.如果觉得表格边框颜色太单调想鲜艳一点,可以用bordercolor属性设置边框颜色。

Html制作表格 _ JavaClub全栈架构师技术笔记 Html制作表格 _ JavaClub全栈架构师技术笔记

10.如果觉得白色背景不能吸引眼球则可以用bgcolor属性设置其他背景颜色。

Html制作表格 _ JavaClub全栈架构师技术笔记Html制作表格 _ JavaClub全栈架构师技术笔记 

11.除了上面这些样式,还可以设置表格的宽高、插入背景图片、字体颜色、文字居中等。(设置多个样式建议在<style>标签内进行设置)如:

Html制作表格 _ JavaClub全栈架构师技术笔记Html制作表格 _ JavaClub全栈架构师技术笔记 

以上就是表格制作的基本操作内容。

作者:伊利奶盒
来源链接:https://blog.csdn.net/qq_41815332/article/details/123454167

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/17391.html

分享给朋友:

“Html制作表格” 的相关文章

Markdown中使用html标签

有时候,我们会在笔记中使用一些HTML标签,但是Markdown中直接使用html标签会被解析为格式.该怎么书写,可以直接显示为html的标签呢. <h1>这是一个标题</h1> //其中的<h1&g...

HTML5 速查列表

HTML 速查列表 HTML 速查列表. 你可以打印它,以备日常使用。 HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题<...

script标签的属性

script标签的属性

共六个,language废弃,charset不常用。 async:异步加载脚本,且不保证加载顺序(下载时不影响页面解析,但解析时会暂停页面渲染) defer:立即下载,延迟执行(遇到</html>标签时执行),有顺序 type:默认type='tex...

HTML框架结构标签(frameset)

HTML框架结构标签(frameset)

第一次了解到竟然还有HTML框架结构标签()。为此小编在实例中应用了一下,但是在搭建框架之初就遇到 了问题。为此总结本博客,以便大家能及时解决问题。 什么是HTML框架结构标签(<frameset>)...

HTML5 自动聚焦autofocus属性

原文:https://davidwalsh.name/autofocus 翻译:http://blog.csdn.net/renfufei/article/details/9797419   HTML5 推出了一大堆精彩的东西给我们。 过去我们要...

超链接a标签的属性target的可选值有哪些以及区别

超链接a标签的属性target的可选值有哪些以及区别 1、<a target="_blank"></a> 2、<a target="_parent"></a> 3、<a targ...

HTML表单标签常用属性及其常见子标签

表单标签 通过form来定义 <form> //1.input类型 //2.select类型 //3.textarea类型 </form> 常用属性 ​ action:提交路径,默认是当...

HTML全部标签简介

HTML全部标签简介

XHTML1.0提供了几种DOCTYPE可选择: 1.过渡型(Transitional ) 2.严格型(Strict ) HTML是简单的文本标签语言,一个HTML网页文件都是有元素构成的,元素由开始标签、结束标签、属性和元素的内容4部分构成。再...

html的class怎么使用方法,HTML的class属性怎么用?使用方法详细总结!

html的class怎么使用方法,HTML的class属性怎么用?使用方法详细总结!

我们在开发网页时有一个属性经常被用到,那就是 class。这篇文章 w3cschool 小编来为大家介绍下 HTML 的 class 属性怎么用。学习 class 看这篇文章就够了。 class 属性怎么用? class 属性用来规定元素的类名,最常用在...

HTML5 video 视频标签使用介绍

HTML <video> 适用于HTML 5+,用于定义在线观看的视频流媒体。 <video width="320" height="240" src="movie.ogg" controls="controls"> 这里是注释文字,如果无法...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。