table标签及排版详解（一）

最新推荐文章于 2024-05-22 00:30:00 发布

置顶 Demy_sunny

最新推荐文章于 2024-05-22 00:30:00 发布

阅读量1.6w

点赞数 2

文章标签： table居中 table边框文字居中

本文链接：https://blog.csdn.net/Demy_sunny/article/details/80184324

版权

先来看一个table的例子：

<!DOCTYPE html>
<html>
<head>
    <title>例子</title>
</head>
<body>
    <div id="top">
        <table  class="top-left">
            <tr>
                <td>姓名</td>
                <td>性别 </td>
                <td>年龄 </td>
            </tr>
             <tr>
                <td>张三</td>
                <td>男 </td>
                <td>21 </td>
            </tr>
             <tr>
                <td>李四</td>
                <td>男 </td>
                <td>22 </td>
            </tr>
        </table>
    </div>
</body>
</html>

如图：
初始表格
这是一个最原始的table，没有任何CSS样式，下面对表格加样式：
1、给表格加边框：
在head中加入CSS样式：

<style type="text/css">
     .top-left{
        border: 1px solid #CCC;    <!-- 1px表示边框宽度、solid表示边框线类型，表示实线，dotted(点状）、double（双线）、dashed（虚线）
       }
    </style>

在浏览器中查看，如图：
只有外边框的表格
可以看出，只具有外边框，很多时候我们是希望将单元格的表框也显示出来，我们还需要加上这样一条样式：

 .top-left td{
        border: 1px solid #CCC;
    }

现在所有单元格都有了边框。
所有单元格都有边框的表格
2、让表格相对于div 居中：
在.top-left样式中加入下面这个语句：

margin: auto;

表格相对DIV水平居中
我们看到这里只实现了水平居中，并没有实现垂直方向居中，这时我们需要对上面的CSS样式代码进行修改，这里是用到的div水平垂直居中的一个方法，当然居中有很多方法：

 #top{
            position: absolute;
            width: 300px;
            height: 300px;
            border: 1px solid red;
            left: 0px;
            top: 0px;
            bottom: 0px;
            right: 0px;
            margin: auto;
            font-size: 12px;
            color: #555555;
        }

div居中
3、表格相对div水平垂直居中
我们需要对CSS样式进行修改：

  .top-left{
        border: 1px solid #CCC;
        border-collapse: collapse;
         position: absolute;
         height: 100px;
         width: 100px;
         left: 50%;
         top: 50%;
         margin-left :-50px;
         margin-top: -50px;

table相对div居中
4、让table中文字居中
我们需要在.top-left中增加一句代码，实现文字居中显示：

text-align: center;

文字居中
5、设置table中插入背景图片

<table   class="top-left" background="cons_1x.png">

有背景图片的table
如果你的图片大小跟table大小不统一，可以在CSS样式中加上一句样式：

background-size: 100px;

这样就可以控制图片大小与table大小接近。
今天的更新就到这里，后面还会继续对相关问题进行总结，请持续关注~~~

Demy_sunny

关注

2
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
table标签及排版详解（一）

先来看一个table的例子：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;例子&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;div id="top"&gt; &lt;table class=&
复制链接

扫一扫