html漂亮表格效果_初识表格

我们来完成一个这样5行5列的一个表格

在编写表格之前，我们先来认识一下HTML中表格的标签

table表示整个表格；tr代表每一行；td代表每一个单元格；

还是像之前一样，建立文件夹、目录、.html文件

在HTML中编写标签如下

现在我们看一下效果

但是看起来很别扭，表格中没有边框，这是因为我们没有设置边框，默认边框为0

我们给表格加入边框 border 属性

再来看一下效果

这个边框好像和我们一开始的也不太一样，边框中间有空隙，我们不想要空隙

就要设置cellspacing为0

来看效果，现在就比较正常了

一个简单的表格制作就练习完成了。

如果以上都练习好了，那我们来进一步的完善一下这个表格

因为我们的表格每个单元格宽度都不一样的，默认是由文字的多少来决定，如果我们想控制这个宽度，那么就要设置每个单元格的宽度

来看效果，每个单元格就是一样宽了

但是文字都是左对齐，我们要对其设置居中对齐

来看效果

现在就可以看到文字居中对齐了。

--- 笔记来自于【千锋教育】视频

​