zoukankan      html  css  js  c++  java
  • 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>

    显示效果如下:

    看起来显得有点挤,让他的宽度增加就是设置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>

    显示效果如下:

    显然数据都在最左端,想要文字显示在中间,可以设置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>

    显示效果如下:

  • 相关阅读:
    896. 单调数列
    819. 最常见的单词
    collections.Counter()
    257. 二叉树的所有路径
    万里长征,始于足下——菜鸟程序员的学习总结(三)
    Ogre启动过程&原理
    Ogre导入模型
    四元数
    Ogre3D嵌入Qt框架
    如何搭建本地SVN服务
  • 原文地址:https://www.cnblogs.com/zhaopengcheng/p/5511508.html
Copyright © 2011-2022 走看看