前言：
表格是一个好东西，它不仅可以让我们在工作上享受诸多便利，生活中也常常是随处可见。表格的特点有可视化、汇总、计算等特点。常用的软件有金山的（WPS系列）和微软的（office系列）。
那如果我们想将上面这张表格以网页的形式呈现出来，应该怎么办呢？下面就跟着小编一起往下看吧！
前期准备：
- 你得需要有一款属于自己的编程软件，如：HBuilder、DW等（当然还有很多别的编辑器），小编这里用的是HBuilder。如图：
进入页面之后：
我们主要写代码的区域主要是在工作区进行。
同样工作区默认的内容代表的意思分别是：
（由于<>里写代码会被文章认为是在写代码，所以我就以《》代替！）
《!DOCTYPE html》声明HTML文档：告诉计算机我要写的文档格式是HTML（网页格式）。
《html》根标签：HTML的根本，凡事写网页都是需要在它的范围之类书写。
《head》头部：网页的头部内容。
《meat charsent=“utf-8”》网页的标准
《title》《/title》标题
《/head》
《body》《/body》身体
《/html》
我们今天学习的内容就是在《body》里面书写，（基础知识的话我后面会出一遍更加详细的，如果有不懂的可以加我好友私聊。）
- 需要一款浏览器来查看你写的代码显示的内容。如：谷歌、火狐等等。小编用的是谷歌浏览器，如图：
好了，准备工作已经就绪，下面就开始我们的表演：
正文分享：
- 我们的表格标签叫《table》标签，所以我们首先要在《body》里写上《table》标签，如图：
- 我们要建立的表格是一个12行8列的表格，所以我们就写table>tr12>td8然后按键盘TAB键，出现一个12行8列的表格。（tr代表表格的行，td代表表格的单元格）如图：
，会发现什么都没有。。。
这是为什么呢？
因为现在的表格是没有边框的，所以我们要给这个表格加一个边框，边框的属性是border，而且这个属性我们是要加在《Table》标签上，好让整个表格都有边框。一般边框都是1px的，所以我们要在《Table》标签里写上border=1px。如图：
然后打开浏览器看一看：
为什么我们的表格会显示这么小呢？是因为我们还没有给它宽、高，所以同样我们要在《Table》里给它加上宽和高。我们的表格宽度是543px高度是415px，所以我们在《Table》里写上width=543px（宽度值）、height=415px（高度值），为了大家能够看的方便， 我们再给他一个网页居中，align=center（居中）。如图：
现在表格就出来了，但是好像跟我们普通的表格好像不一样。
那是因为浏览器里面表格之间都是有间距的，那我们如何删除这个间距呢？
同样在《Table》标签里加上cellspacing=0（cellspacing代表单元格与单元格之间的间距）就行，如图：
这样一个像样的表格就出来了，下面我们就是要在表格里面添加内容了，内容我们是要在单元格里面写，所以我们的内容就在td之间写，如图：
可以看到，我们在单元格里面写内容之后，内容会把单元格撑大，那是因为我们网页里的单元格会有一个自动适应的功能，为了能够让单元格更加美观，所以我们要给单元格加宽度，如图：
同理我们给每一个单元格设置相应的宽度和内容（单元格的高度不用设置，单元格里的内容会将单元格撑开，如果有要求就需要设置，height=数值，高度属性）如图：
由于小编很懒，就不全部写完了，原理都是一样的，接下来，我们就要想办法让表格里面的内容居中显示了，那我们用什么办法让表格的内容居中呢？其实和我们让表格网页居中的原理一样，我们给表格加上居中属性：align=center 就行！如图：
这样依次将表格的内容填满就可以还原我们图一的表格了，如图：
在这里补充说一下，我们网页版的表格在内容与单元格之间会有距离，这个很难用图片的形式表达出来，所以最后补充，取消这个距离，我们要用cellpadding=0这个属性，这个属性和cellspacing是表格的专属属性，表格必加，所以希望记住这个单词，如图：
以上就是做表格的全部过程，手敲不易，大神勿喷！（来源：武汉千锋逆战班的一名学生）
798
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
