![6cab6e05362ec195ecc74124a5e772ca.gif](https://i-blog.csdnimg.cn/blog_migrate/f59404d7ea793924bdb255b065950408.gif)
我们来完成一个这样5行5列的一个表格
![3440fc60725ca6f5b60ceeec63e2926f.png](https://i-blog.csdnimg.cn/blog_migrate/ae14022ef24042205a6452321a680ef1.jpeg)
在编写表格之前,我们先来认识一下HTML中表格的标签
table表示整个表格;tr代表每一行;td代表每一个单元格;
![b77bb5a6609dba2127360c366757cb3c.png](https://i-blog.csdnimg.cn/blog_migrate/0fe806b608533c3a1a9e099d6610452e.jpeg)
还是像之前一样,建立文件夹、目录、.html文件
在HTML中编写标签如下
![134bc3633f84cad835ba9dce257655cc.png](https://i-blog.csdnimg.cn/blog_migrate/efe000d4f3ace6f38c005b059fca0ae5.jpeg)
现在我们看一下效果
![08f9f4b7aed573125677b48bc74a8bb5.png](https://i-blog.csdnimg.cn/blog_migrate/8f4ce1e2a16794b89b2f2272152d2776.jpeg)
但是看起来很别扭,表格中没有边框,这是因为我们没有设置边框,默认边框为0
我们给表格加入边框 border 属性
![1a9dfa285ce568371834066b5fd74728.png](https://i-blog.csdnimg.cn/blog_migrate/9c4561daa9dca4f3956d3cb22bfb850a.jpeg)
再来看一下效果
![754502a2e18a9e9970da3282cc0de04e.png](https://i-blog.csdnimg.cn/blog_migrate/c26c1dccb9ecce44477531dfcb7b0f2c.jpeg)
这个边框好像和我们一开始的也不太一样,边框中间有空隙,我们不想要空隙
就要设置cellspacing为0
![3e83e3c2f8b5533fb3a1703b9f86d2fd.png](https://i-blog.csdnimg.cn/blog_migrate/1c4a4891d731ea0d07f119f30ef41a7a.jpeg)
来看效果,现在就比较正常了
![7d7c7ad0a7461e128fe6edfdd0121b8c.png](https://i-blog.csdnimg.cn/blog_migrate/081b288dee4d78d25aa5facc5bf30693.jpeg)
一个简单的表格制作就练习完成了。
![fe9de24c8de7d6de5c5d83ae8df56075.png](https://i-blog.csdnimg.cn/blog_migrate/751b84fcefddc0aaec750828c480d07e.jpeg)
如果以上都练习好了,那我们来进一步的完善一下这个表格
因为我们的表格每个单元格宽度都不一样的,默认是由文字的多少来决定,如果我们想控制这个宽度,那么就要设置每个单元格的宽度width
![999e27c138b0745b21143915c6480b0e.png](https://i-blog.csdnimg.cn/blog_migrate/a8fdce0803bce02b1c67a2483af97c5e.jpeg)
来看效果,每个单元格就是一样宽了
![2d01d7e61de8599a721a60bcb70f55ad.png](https://i-blog.csdnimg.cn/blog_migrate/edaec8e43d58ac1848790d4e8c1f80f1.jpeg)
但是文字都是左对齐,我们要对其设置居中对齐center
![d9602d58052e82a5ffe266de3ca34015.png](https://i-blog.csdnimg.cn/blog_migrate/48e0b56229f33ba32c761a7db792e7aa.jpeg)
来看效果
![b03c2b61e002f0459b85fba1dcd496c4.png](https://i-blog.csdnimg.cn/blog_migrate/91b4476ed6ab816171f121d28edc98b9.jpeg)
现在就可以看到文字居中对齐了。
![94758383e1e12217a5c8895bf856a4c4.gif](https://i-blog.csdnimg.cn/blog_migrate/1389479f782282bd3e5bbb7506ce8871.gif)
我们来完成一个这样5行5列的一个表格
![a784acb32832831a41a41cfc1ef22644.png](https://i-blog.csdnimg.cn/blog_migrate/3a65a5cfca213f5deff621d1612a3246.jpeg)
在编写表格之前,我们先来认识一下HTML中表格的标签
table表示整个表格;tr代表每一行;td代表每一个单元格;
![b28f176553c182d2aee9e079e09f5191.png](https://i-blog.csdnimg.cn/blog_migrate/b86ffd5dac068c8314f9f24e72959ce4.jpeg)
还是像之前一样,建立文件夹、目录、.html文件
在HTML中编写标签如下
![836c4a48dd17dcd242a4db375aac301e.png](https://i-blog.csdnimg.cn/blog_migrate/ba3a2269a104919c9fa339a7ea4c9937.jpeg)
现在我们看一下效果
![bfd29d23e29ff9f20b303b8b1abaceb5.png](https://i-blog.csdnimg.cn/blog_migrate/8c3d2cd0314879e58edbe15c7cc5ed99.jpeg)
但是看起来很别扭,表格中没有边框,这是因为我们没有设置边框,默认边框为0
我们给表格加入边框 border 属性
![78b6c220049954a2e0f9f7f8b241eb73.png](https://i-blog.csdnimg.cn/blog_migrate/6ea902210528c0a436e1b919bdecaac5.jpeg)
再来看一下效果
![6113dfad1956091e8b245801e2033442.png](https://i-blog.csdnimg.cn/blog_migrate/3b910db496ee1f6435e4fda2ec552fd3.jpeg)
这个边框好像和我们一开始的也不太一样,边框中间有空隙,我们不想要空隙
就要设置cellspacing为0
![ea852fc4b27aa8105104a2e615967206.png](https://i-blog.csdnimg.cn/blog_migrate/170856b362c43f2f842deeafd5fdb7a6.jpeg)
来看效果,现在就比较正常了
![48a2cb7497ca0e7e3a076d2e397368e1.png](https://i-blog.csdnimg.cn/blog_migrate/e23c8aaeb5e791d815645b382a1512d1.jpeg)
一个简单的表格制作就练习完成了。
![a47b102603fcc12403ce81429e886305.png](https://i-blog.csdnimg.cn/blog_migrate/bb4fe3b4e5d8448d641ab1bf4d602500.jpeg)
如果以上都练习好了,那我们来进一步的完善一下这个表格
因为我们的表格每个单元格宽度都不一样的,默认是由文字的多少来决定,如果我们想控制这个宽度,那么就要设置每个单元格的宽度width
![2b3d422da50b32640092095beca20d47.png](https://i-blog.csdnimg.cn/blog_migrate/69204a9b0ae8d919c969eb39e6a7259c.jpeg)
来看效果,每个单元格就是一样宽了
![9cb80188e10ccef50b79e299a9f031cb.png](https://i-blog.csdnimg.cn/blog_migrate/2c8d17863b0f8492d345202fbae1de50.jpeg)
但是文字都是左对齐,我们要对其设置居中对齐center
![d58056dd5181e7db9d8b978a23634469.png](https://i-blog.csdnimg.cn/blog_migrate/7b166d28f1e859542222aa2d9441dba9.jpeg)
来看效果
![8cc75cac6fb8945551ea8f4bcd8c02a4.png](https://i-blog.csdnimg.cn/blog_migrate/d69bdcfa67debe711146d1802c4aff6c.jpeg)
现在就可以看到文字居中对齐了。
--- 笔记来自于B站【千锋教育】视频
- End -
详情请关注公众号---web分享