在html文件编写中，经常使用到table来做一些表格。如何让它显示的更像一张表格？接下来为你讲解。
基本格式
1 | <div> <th>我的一张表格</th> <table border="1"> <tr> <th>姓名</th> <th>年龄</th> <th>班级</th> </tr> <tr> <td>张山</td> <td>20</td> <td>计算机1班</td> </tr> </table></div>
|
登录后复制
显示效果如下：
看起来显得有点挤，让他的宽度增加就是设置table的width属性。想让单元格之间是一条实线分割，设置table的cellspacing=0。想让单元格中的内容和单元格边框距离为0，设置table的cellpadding=0.想要每个单元格的高度增大一点，可以在每个标签中设置height=40属性。
1 | <div> <th>我的二张表格</th> <table border="1" cellspacing="0" cellpadding="0" width="400" > <tr> <th>姓名</th> <th>年龄</th> <th>班级</th> </tr> <tr> <td height="40">张山</td> <td >20</td> <td >计算机1班</td> </tr> </table> </div>
|
登录后复制
显示效果如下：
显然数据都在最左端，想要文字显示在中间，可以设置td的align属性。
1 | <div> <th>我的三张表格</th> <table border="1" cellspacing="0" cellpadding="0" width="400"> <tr> <th>姓名</th> <th>年龄</th> <th>班级</th> </tr> <tr> <td align="center" height="40">张山</td> <td align="center">20</td> <td align="center">计算机1班</td> </tr> </table> </div>
|
登录后复制
显示效果如下：
