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

开发工具与关键技术：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>标签内进行设置）如：

 

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

更多推荐

Html制作表格