html实例教程（html表格制作教程）
本文目录
html表格制作教程
使用webstorm制作网页文件的时候，难免会遇到制作表格的情况，而且关键的布局方式一般都是使用表格完成的。
工具/原料
电脑webstorm方法/步骤
1、制作表格我们需要使用标签table在html中输入table标签，然后设置行和列，，tr代表行,td代表列，然后在行和列中输入相关的内容。
2、预览网页我们发现，网页显示格式看起来不像是表格，因为没有框线，这时候我们需要给table标签设置边框，border，如图所示，在table标签中，定义border的值，这样再预览网页我们就可以看到表格样式。
3、图中的表格表头和文本内容显示格式一致，我们可以使用th标签代替td标签作为表格的表头，系统自动将表头内部的文本内容加粗居中显示，这样表头格式就被着重定义出来。
4、可以使用caption标签给表格添加标题，caption是table标签的子标签需要写在table标签内部，将需要定义的标题文本输入到caption中。
5、两行数值一样的话可以设置为rowspan值，如图所示，两行数据一致，直接设置rowspan值为2，下一行的这个数值就不必单独定义了，如果是三行数值一致，那么可以直接设置为3。
6、将多列相同数据一起显示可以使用colspan来进行设置，如图所示，第三列所有的内容都全部显示一致，我们可以设置像表格中的合并效果然后一起显示，这样就不必每一列都输入内容。
实例教程：HTML中会移动的文字
我们在浏览页面的时候，会看到在页面上移动的文字，文字的移动方向有从左到右、从右到左、从上到下、从下到上等。下面，我们来看看如何使用HTML代码编写会移动的文字吧。
工具/材料
HTML
- 01
语法代码
（1）一般使用《marquee》《/marquee》来设置移动文字，比如我们编写如下代码：
（2）《marquee》会移动的文字《/marquee》
预览效果可以发现编写在《marquee》《/marquee》标签内的文字，会从右边到左边循环移动，如下图所示： - 02
文字移动速度
（1）使用scrollamount来设置文字的移动速度，比如我们编写如下所示代码：
《marquee scrollamount=16》快点，快点《/marquee》
《marquee scrollamount=12》等等我《/marquee》
（2）预览效果
可以看到scrollamount的数值越大，移动的速度就会越快，如下图所示： - 03
设置文字移动的方向
（1）direction在英文上是方向的意思，同样使用direction来设置文字的移动方向，方向可以设置为左、右、上、下等等，编写如下代码：
《marquee direction=left》文字从右边向左边《/marquee》 《P》
《marquee direction=right》从左边向右边移《/marquee》
（2）预览效果
可以看到当direction=left时，文字从右边向左边，当direction=right时，文字从左边向右边，如下图所示： - 04
文字循环的次数
（1）一般来说文字是默认无限次循环的，下面，我们来看看如何指定文字的循环次数吧。使用loop来设置文字的循环次数，比如编写代码如下：
《marquee loop=3 》文字只会循环三次《/marquee》
（2）预览效果
可以在浏览器上看到，文字只会循环三次，如下图所示： - 05
文字对齐
在HTML中的文字对齐功能，使用align属性来设置，属性值可以为top、Middle、button，比如我们编写如下所示的代码：
（2）预览效果
然后在浏览器中预览效果，可以看到文字向上对齐，如下图所示： - 06
移动面积
（1）设置会移动的文字范围，比如文字在长为多少，宽为多少的区域内移动，比如我们编写如下代码：
《marquee height=40 width=50% bgcolor=pink》在区域内移动的文字《/marquee》
（2）预览效果
在浏览器中可以看到文字在高为40，宽为浏览器一半的区域内移动，且区域的颜色为粉红色，如下图所示： - 07
延时
（1）设置文字的运行速度，让文字可以时而快，时而慢地做运动，编写代码如下所示：
（2）预览效果
在浏览器中预览效果，可以看到文字先做快速度，然后做慢速度，如下图所示：
更多文章：
2026年7月28日 01:31
2026年9月21日 14:46
2026年9月21日 12:56
2026年6月5日 18:43
2026年5月31日 23:45
2026年5月31日 01:27
八爷源码被抓（八爷党联合隆科多，为什么还敌不过病入膏肓的十三爷）
2026年5月4日 12:31
2026年9月25日 00:55
2026年9月12日 23:04
2026年9月19日 03:05
2026年9月19日 13:16
新站SEO优化哪些长尾词容易排名？seo门户网新手如何快速找到高排名的长尾词
2026年9月12日 20:11
2026年9月26日 18:40
2026年8月18日 01:54
2026年9月28日 10:40
2026年9月15日 02:31
2026年9月28日 06:52
2026年8月7日 05:42
2026年9月14日 05:13
2026年8月5日 10:09
