html中如何让table显示的更好

在html文件编写中,经常使用到table来做一些表格。如何让它显示的更像一张表格?接下来为你讲解。

基本格式

<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>

显示效果如下:

html中如何让table显示的更好

看起来显得有点挤,让他的宽度增加就是设置table的width属性。想让单元格之间是一条实线分割,设置table的cellspacing=0。想让单元格中的内容和单元格边框距离为0,设置table的cellpadding=0.想要每个单元格的高度增大一点,可以在每个<td>标签中设置height=40属性。

<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>

显示效果如下:

html中如何让table显示的更好

显然数据都在最左端,想要文字显示在中间,可以设置td的align属性。

<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>

显示效果如下:

html中如何让table显示的更好

上一篇:MUI - IOS系统,相册选择照片后,点击确定按钮无反应


下一篇:“fatal error C1010”错误解决的三种方法