我们来完成一个这样5行5列的一个表格
在编写表格之前，我们先来认识一下HTML中表格的标签
table表示整个表格；tr代表每一行；td代表每一个单元格；
还是像之前一样，建立文件夹、目录、.html文件
在HTML中编写标签如下
现在我们看一下效果
但是看起来很别扭，表格中没有边框，这是因为我们没有设置边框，默认边框为0
我们给表格加入边框 border 属性
再来看一下效果
这个边框好像和我们一开始的也不太一样，边框中间有空隙，我们不想要空隙
就要设置cellspacing为0
来看效果，现在就比较正常了
一个简单的表格制作就练习完成了。
如果以上都练习好了，那我们来进一步的完善一下这个表格
因为我们的表格每个单元格宽度都不一样的，默认是由文字的多少来决定，如果我们想控制这个宽度，那么就要设置每个单元格的宽度width
来看效果，每个单元格就是一样宽了
但是文字都是左对齐，我们要对其设置居中对齐center
来看效果
现在就可以看到文字居中对齐了。
我们来完成一个这样5行5列的一个表格
在编写表格之前，我们先来认识一下HTML中表格的标签
table表示整个表格；tr代表每一行；td代表每一个单元格；
还是像之前一样，建立文件夹、目录、.html文件
在HTML中编写标签如下
现在我们看一下效果
但是看起来很别扭，表格中没有边框，这是因为我们没有设置边框，默认边框为0
我们给表格加入边框 border 属性
再来看一下效果
这个边框好像和我们一开始的也不太一样，边框中间有空隙，我们不想要空隙
就要设置cellspacing为0
来看效果，现在就比较正常了
一个简单的表格制作就练习完成了。
如果以上都练习好了，那我们来进一步的完善一下这个表格
因为我们的表格每个单元格宽度都不一样的，默认是由文字的多少来决定，如果我们想控制这个宽度，那么就要设置每个单元格的宽度width
来看效果，每个单元格就是一样宽了
但是文字都是左对齐，我们要对其设置居中对齐center
来看效果
现在就可以看到文字居中对齐了。
--- 笔记来自于B站【千锋教育】视频
- End -
详情请关注公众号---web分享
还没有评论，来说两句吧...