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>

    显示效果如下:

  • 相关阅读:
    nodejs中exports与module.exports的区别
    Webpack--自学笔记
    cookie、sessionStorage、localStorage 详解
    JavaScript中URL的解码和编码
    javascript中怎么判断对象{}为空
    关于获取、设置css样式封装的函数入门版
    多行文本溢出显示省略号(…)
    前端优化的问题
    volatile
    MySQL(六) decimal数据默认处理
  • 原文地址:https://www.cnblogs.com/zhaopengcheng/p/5511508.html
Copyright © 2011-2022 走看看