<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width: 650px; height: 250px; border: 1px solid #ddd; /* 将内边框塌陷掉,如果还是不理解可以将下面这句代码注释掉,看一下效果图,会对其有个认识。 */ border-collapse: collapse; margin: 50px auto; } .box th{ background: #53a0ce; border: 1px solid #ddd; color: #fff; } .box td{ border: 1px solid #ddd; color: #770077; text-align: center; } .box .left{ text-align: left; text-indent: 20px; } </style> </head> <body> <table class="box"> <tr> <!-- th在这里也是一列的意思,它与td的区别在于th相当于是一种表头,可以通过效果图粗略看出,有个加粗的效果。 --> <th>name</th> <th>age</th> <th>gender</th> <th>height</th> </tr> <tr> <td class="left">jill Smith</td> <td>25</td> <td>female</td> <td>175</td> </tr> <tr> <td class="left">john stone</td> <td>30</td> <td>male</td> <td>179</td> </tr> <tr> <td class="left">jane strip</td> <td>29</td> <td>female</td> <td>165</td> </tr> <tr> <td class="left">gary mountain</td> <td>21</td> <td>male</td> <td>180</td> </tr> <tr> <td class="left">james camera</td> <td>31</td> <td>male</td> <td>185</td> </tr> </table> </body> </html>
css表格案例
猜你喜欢
转载自blog.csdn.net/owc1874/article/details/80759637
今日推荐
周排行