Html制作表格
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:table
作者:伊利奶盒
撰写时间:2022年3月10日
表格在网页中可以更好的划分所需的内容,比如一个软件的下载地址,通过表格划分可以清楚的告诉使用者新版本增加了什么新功能,以及新版本和旧版本相对应的下载链接,又或者一个游戏的下载页面,通过表格可以清楚的告诉玩家支撑该游戏运行所需的最低配置和推荐配置具体是什么。
知道了表格的用途,那么我们开始制作一个简单的表格吧。
1.首先我们需要创建一个新的html文件建立好基本框架。
2.在<body>标签内输入一个<table>标签表示这是一个表格。
3.在<table>标签内建立一行<tr>以及表头<th>并输入表头内容。
4.接着再建立新的一行,并在<tr>标签里添加单元格<td>。
5.如需多行数据则只需将单元格多复制几份即可。例如:
6.最后在<table>标签添加边框,一个简单的表格就完成了。
7.还可以根据实际需求将单元格合并,如果需要将多个列合并只需要在td标签内添加colspan=”(合并列的数量)”(但是后面的内容会被挤到新的一列);如:
如果要合并多个行则只需要在td标签内添加rowspan=”(合并行的数量)”(但是被占用行的内容会被挤到新的列)如:
8.如果觉得单元格之间的距离影响美观,还可以用cellspacing=”(数字)”来设置单元格之间的距离,输入0则是没有距离。
9.如果觉得表格边框颜色太单调想鲜艳一点,可以用bordercolor属性设置边框颜色。
10.如果觉得白色背景不能吸引眼球则可以用bgcolor属性设置其他背景颜色。
11.除了上面这些样式,还可以设置表格的宽高、插入背景图片、字体颜色、文字居中等。(设置多个样式建议在<style>标签内进行设置)如:
以上就是表格制作的基本操作内容。
作者:伊利奶盒
来源链接:https://blog.csdn.net/qq_41815332/article/details/123454167
版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。
2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。