CSS 居中布局方式一

able + margin 实现水平方向居中, table-cell + vertical-algin 实现垂直居中

、精简的代码，使用DIV+CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。观看更多的HTML教程内容。代码精简提高了百度蜘蛛的爬行效率以及高效性，能在最短的时间内爬完整个页面，同时这样对收录质量有一定好处;

2、提高访问速度、增加用户体验性

使得加载速度得到很大的提高，那么用户点击页面的等待时间就越少，用户体验性的增加相应的带来就是网站受到搜索引擎的喜欢，进而提高网站排名。

3、div+css结构清晰，很容易被搜索引擎搜索到，天生就是适合优化seo，降低网页大小，让网页体积变得更小。注意：div+css结构清晰、精简，不意味着可以全部用div+css结构，比如通篇HTML标签全DIV的，貌似除了<head>之上及<body>之上及之外，其它全是<div>，就如同整个HTML是一万个毫不相干的内容拼装起来，或者通篇是<div><ul><li>结构的，就如同这个页面所有元素全是列表。事实上这两种情况还相当普遍，因为曲解了“DIV+CSS”的真实含义，也许根本就不应该有这个说法，因为一个完整页面几乎不可能仅仅DIV+CSS就能完成。

一.精简代码，减少重构难度。

网站使用DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话，需手动改很多页面，而且看着那些表格也会感觉很乱也很浪费时间，但是使用css+div布局只需修改css文件中的一个代码即可。

二.网页访问速度

使用了DIV+CSS布局的网页与Table布局比较，精简了许多页面代码，那么其浏览访问速度自然得以提升，也从而提升了网站的用户体验度。

三.SEO优化

采用div-css布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

四.浏览器兼容性

若使用table布局网页，在使用不同浏览器情况下会发生错位，而div+css则不会，无论什么浏览器，网页都不会出现变形情况。

最后，需要注意的是，蜘蛛不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响搜索引擎的收录，所以采用外部调用的方式调用CSS是非常不错的方法。而同时，若非必须太多花哨的网站，采用CSS布局，同样可以到达所想要的效果。如网站导航中的文字颜色变化、下拉菜单等。

i，朋友，您来啦。带上小板凳，我们一起瞅一瞅今天的话题。

前言

如今web布局的方式多种多样，如：table布局、float布局、position布局，flex布局、grid布局等等。研究过可视化布局的朋友，已经用上了新的布局方式，除了IE，手机和PC兼容性还不错，您知道是什么吗？

继续回到我们的话题，如何使用Table元素展示分组数据？

rowspan方法

这是最直接的方法，而且不论码龄、不论前后端都会使用的方式。

<table>
    <thead>
        <tr>
            <th style="text-align:center;width:80px;">-</th>
            <th style="text-align:center;width:80px;">标识</th>
            <th style="text-align:center;width:80px;">类型</th>
            <th style="text-align:center;width:200px;">名称</th>
            <th style="text-align:center;width:auto;">备注</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="text-align:center;">
                <input type="checkbox">
            </td>
            <td style="text-align:center;">1</td>
            <td style="text-align:center;" rowspan="3">
                家电
            </td>
            <td style="text-align:center;">冰箱</td>
            <td></td>
        </tr>
        <tr>
            <td style="text-align:center;">
                <input type="checkbox">
            </td>
            <td style="text-align:center;">2</td>
            <!-- <td style="text-align:center;">家电</td> -->
            <td style="text-align:center;">洗衣机</td>
            <td></td>
        </tr>
        <tr>
            <td style="text-align:center;">
                <input type="checkbox">
            </td>
            <td style="text-align:center;">3</td>
            <td style="text-align:center;display:none;">家电</td>
            <td style="text-align:center;">空调</td>
            <td></td>
        </tr>
    </tbody>
</table>

但这种方式有一些不好的地方：
1、不利于编码：当多个单元格进行跨行时，可能一时分不清，到底哪些单元格在哪一列。

2、不利于生成：当通过javascript脚本，根据数据动态生成跨行属性的值时，可能因为算法等问题，导致数据可能遇到显示错行的情况。

3、代码复杂度：当通过表格进行某些操作时，可能无法准确获取某一行的数据，比如：合计、导出、数据修改等。如果提前准备优化过的分组数据，这增加了代码复杂度，完全没必要。

4、可视化编辑：当通过可视化工具操作时，合并拆分代码太复杂，非常容易出错。

5、不利于阅读：当您的用户使用屏幕阅读器进行浏览时，可能会给他造成困惑。

6、不利于SEO：搜索引擎爬虫，在解析含有rowspan布局的表格时，可能遇到困难，无法准确获取相关信息。

7、不利于数据更新：当需要根据数据，动态去更新表格时，可能需要重新渲染整个表格，或者局部更新数据时，导致更新错误，同时增加代码复杂度。

8、难以实现条件格式化：在对表格进行条件格式化时（如调整颜色、背景、字体等），含有rowspan的单元格，可能使这一编码过程变得复杂。

9、排序筛选复杂化：排序或筛选时，您可能无法准确获取对应列的相关信息。

这么多缺点，难道就不能使用表格了吗？没有其他解决方法了吗？

其实要解决这些问题，也比较简单，大道至简，嵌套一层就可以了。

嵌套一层方法

在需要跨行的单元格，嵌套一层div或span等，然后设置要跨行的行数，也就是高度，然后就可以了，是不是很简单？

CSS

table{border-collapse:collapse;width:100%;}
table,
th,td{border:1px solid #dddddd;}
th,td{height:28px;padding:0 6px;}
.cell-container {
    position: relative;
}
.cell-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

HTML

<table border="1">
    <thead>
        <tr>
            <th style="text-align: center; width: 29px;">-</th>
            <th style="text-align:center;width:80px;">标识</th>
            <th style="text-align:center;width:80px;">类型</th>
            <th style="text-align:center;width:200px;">名称</th>
            <th style="text-align:center;width:auto;">备注</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="text-align:center;">
                <input type="checkbox">
            </td>
            <td style="text-align:center;">1</td>
            <td style="text-align:center;" class="cell-container">
                <div class="cell-content" 
                         style="height: calc(28px * 3);display: flex;place-content: center;background-color: rgb(255, 255, 255);align-items: center;">家电</div>
            </td>
            <td style="text-align:center;">冰箱</td>
            <td></td>
        </tr>
        <tr>
            <td style="text-align:center;">
                <input type="checkbox">
            </td>
            <td style="text-align:center;">2</td>
            <td style="text-align:center;">家电</td>
            <td style="text-align:center;">洗衣机</td>
            <td></td>
        </tr>
        <tr>
            <td style="text-align:center;">
                <input type="checkbox">
            </td>
            <td style="text-align:center;">3</td>
            <td style="text-align:center;">家电</td>
            <td style="text-align:center;">空调</td>
            <td></td>
        </tr>
    </tbody>
</table>

关注作者：关注有趣的编程。

希望本文能够对您有所帮助，感谢您的阅读！

人人为我，我为人人，谢谢您的浏览，让我们一起加油吧。

在线咨询

上一篇：JavaScript中动态追加第一位元素（循环）
下一篇：尺子专业测距仪app 多功能的测量测距工具

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS 居中布局方式一

前言

rowspan方法

嵌套一层方法

您的项目需求