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

嵌套一層方法

您的項目需求