CSS 居中布局方式一

able + margin 實(shí)現(xiàn)水平方向居中, table-cell + vertical-algin 實(shí)現(xiàn)垂直居中

、精簡的代碼，使用DIV+CSS布局，頁面代碼精簡，這一點(diǎn)相信對XHTML有所了解的都知道。觀看更多的HTML教程內(nèi)容。代碼精簡提高了百度蜘蛛的爬行效率以及高效性，能在最短的時(shí)間內(nèi)爬完整個(gè)頁面，同時(shí)這樣對收錄質(zhì)量有一定好處;

2、提高訪問速度、增加用戶體驗(yàn)性

使得加載速度得到很大的提高，那么用戶點(diǎn)擊頁面的等待時(shí)間就越少，用戶體驗(yàn)性的增加相應(yīng)的帶來就是網(wǎng)站受到搜索引擎的喜歡，進(jìn)而提高網(wǎng)站排名。

3、div+css結(jié)構(gòu)清晰，很容易被搜索引擎搜索到，天生就是適合優(yōu)化seo，降低網(wǎng)頁大小，讓網(wǎng)頁體積變得更小。注意：div+css結(jié)構(gòu)清晰、精簡，不意味著可以全部用div+css結(jié)構(gòu)，比如通篇HTML標(biāo)簽全DIV的，貌似除了<head>之上及<body>之上及之外，其它全是<div>，就如同整個(gè)HTML是一萬個(gè)毫不相干的內(nèi)容拼裝起來，或者通篇是<div><ul><li>結(jié)構(gòu)的，就如同這個(gè)頁面所有元素全是列表。事實(shí)上這兩種情況還相當(dāng)普遍，因?yàn)榍饬恕癉IV+CSS”的真實(shí)含義，也許根本就不應(yīng)該有這個(gè)說法，因?yàn)橐粋€(gè)完整頁面幾乎不可能僅僅DIV+CSS就能完成。

一.精簡代碼，減少重構(gòu)難度。

網(wǎng)站使用DIV+CSS布局使代碼很是精簡，相信大多朋友也都略有所聞，css文件可以在網(wǎng)站的任意一個(gè)頁面進(jìn)行調(diào)用，而若是使用table表格修改部分頁面卻是顯得很麻煩。要是一個(gè)門戶網(wǎng)站的話，需手動(dòng)改很多頁面，而且看著那些表格也會(huì)感覺很亂也很浪費(fèi)時(shí)間，但是使用css+div布局只需修改css文件中的一個(gè)代碼即可。

二.網(wǎng)頁訪問速度

使用了DIV+CSS布局的網(wǎng)頁與Table布局比較，精簡了許多頁面代碼，那么其瀏覽訪問速度自然得以提升，也從而提升了網(wǎng)站的用戶體驗(yàn)度。

三.SEO優(yōu)化

采用div-css布局的網(wǎng)站對于搜索引擎很是友好，因此其避免了Table嵌套層次過多而無法被搜索引擎抓取的問題，而且簡潔、結(jié)構(gòu)化的代碼更加有利于突出重點(diǎn)和適合搜索引擎抓取。

四.瀏覽器兼容性

若使用table布局網(wǎng)頁，在使用不同瀏覽器情況下會(huì)發(fā)生錯(cuò)位，而div+css則不會(huì)，無論什么瀏覽器，網(wǎng)頁都不會(huì)出現(xiàn)變形情況。

最后，需要注意的是，蜘蛛不喜歡一個(gè)頁面有太多的css代碼，否則同樣會(huì)影響蜘蛛的爬行，影響搜索引擎的收錄，所以采用外部調(diào)用的方式調(diào)用CSS是非常不錯(cuò)的方法。而同時(shí)，若非必須太多花哨的網(wǎng)站，采用CSS布局，同樣可以到達(dá)所想要的效果。如網(wǎng)站導(dǎo)航中的文字顏色變化、下拉菜單等。

i，朋友，您來啦。帶上小板凳，我們一起瞅一瞅今天的話題。

前言

如今web布局的方式多種多樣，如：table布局、float布局、position布局，flex布局、grid布局等等。研究過可視化布局的朋友，已經(jīng)用上了新的布局方式，除了IE，手機(jī)和PC兼容性還不錯(cuò)，您知道是什么嗎？

繼續(xù)回到我們的話題，如何使用Table元素展示分組數(shù)據(jù)？

rowspan方法

這是最直接的方法，而且不論碼齡、不論前后端都會(huì)使用的方式。

<table>
    <thead>
        <tr>
            <th style="text-align:center;width:80px;">-</th>
            <th style="text-align:center;width:80px;">標(biāo)識(shí)</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;">洗衣機(jī)</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;">空調(diào)</td>
            <td></td>
        </tr>
    </tbody>
</table>

但這種方式有一些不好的地方：
1、不利于編碼：當(dāng)多個(gè)單元格進(jìn)行跨行時(shí)，可能一時(shí)分不清，到底哪些單元格在哪一列。

2、不利于生成：當(dāng)通過javascript腳本，根據(jù)數(shù)據(jù)動(dòng)態(tài)生成跨行屬性的值時(shí)，可能因?yàn)樗惴ǖ葐栴}，導(dǎo)致數(shù)據(jù)可能遇到顯示錯(cuò)行的情況。

3、代碼復(fù)雜度：當(dāng)通過表格進(jìn)行某些操作時(shí)，可能無法準(zhǔn)確獲取某一行的數(shù)據(jù)，比如：合計(jì)、導(dǎo)出、數(shù)據(jù)修改等。如果提前準(zhǔn)備優(yōu)化過的分組數(shù)據(jù)，這增加了代碼復(fù)雜度，完全沒必要。

4、可視化編輯：當(dāng)通過可視化工具操作時(shí)，合并拆分代碼太復(fù)雜，非常容易出錯(cuò)。

5、不利于閱讀：當(dāng)您的用戶使用屏幕閱讀器進(jìn)行瀏覽時(shí)，可能會(huì)給他造成困惑。

6、不利于SEO：搜索引擎爬蟲，在解析含有rowspan布局的表格時(shí)，可能遇到困難，無法準(zhǔn)確獲取相關(guān)信息。

7、不利于數(shù)據(jù)更新：當(dāng)需要根據(jù)數(shù)據(jù)，動(dòng)態(tài)去更新表格時(shí)，可能需要重新渲染整個(gè)表格，或者局部更新數(shù)據(jù)時(shí)，導(dǎo)致更新錯(cuò)誤，同時(shí)增加代碼復(fù)雜度。

8、難以實(shí)現(xiàn)條件格式化：在對表格進(jìn)行條件格式化時(shí)（如調(diào)整顏色、背景、字體等），含有rowspan的單元格，可能使這一編碼過程變得復(fù)雜。

9、排序篩選復(fù)雜化：排序或篩選時(shí)，您可能無法準(zhǔn)確獲取對應(yīng)列的相關(guān)信息。

這么多缺點(diǎn)，難道就不能使用表格了嗎？沒有其他解決方法了嗎？

其實(shí)要解決這些問題，也比較簡單，大道至簡，嵌套一層就可以了。

嵌套一層方法

在需要跨行的單元格，嵌套一層div或span等，然后設(shè)置要跨行的行數(shù)，也就是高度，然后就可以了，是不是很簡單？

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;">標(biāo)識(shí)</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;">洗衣機(jī)</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;">空調(diào)</td>
            <td></td>
        </tr>
    </tbody>
</table>

關(guān)注作者：關(guān)注有趣的編程。

希望本文能夠?qū)δ兴鶐椭兄x您的閱讀！

人人為我，我為人人，謝謝您的瀏覽，讓我們一起加油吧。

在線咨詢

上一篇：JavaScript中動(dòng)態(tài)追加第一位元素（循環(huán)）
下一篇：尺子專業(yè)測距儀app 多功能的測量測距工具

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

CSS 居中布局方式一

前言

rowspan方法

嵌套一層方法

您的項(xiàng)目需求