目前，在大多數(shù)開(kāi)發(fā)環(huán)境中，已經(jīng)基本不用table元素來(lái)做網(wǎng)頁(yè)布局了，取而代之的是div+css，那么為什么不用table系表格元素呢？
用DIV+CSS編寫(xiě)出來(lái)的文件k數(shù)比用table寫(xiě)出來(lái)的要小，不信你在頁(yè)面中放1000個(gè)table和1000個(gè)div比比看哪個(gè)文件大
table必須在頁(yè)面完全加載后才顯示，沒(méi)有加載完畢前，table為一片空白，也就是說(shuō)，需要頁(yè)面完畢才顯示，而div是逐行顯示，不需要頁(yè)面完全加載完畢，就可以一邊加載一邊顯示
非表格內(nèi)容用table來(lái)裝，不符合標(biāo)簽語(yǔ)義化要求，不利于SEO
table的嵌套性太多，用DIV代碼會(huì)比較簡(jiǎn)潔
但是有的項(xiàng)目中又需要類(lèi)似表格的布局怎么辦呢？可以用display:table來(lái)解決
display:table系列幾乎是和table系的元素相對(duì)應(yīng)的，請(qǐng)看下表：
目前display:table的應(yīng)用場(chǎng)景也是比較廣泛的，Google地圖在搜索路線(xiàn)時(shí)，左側(cè)的路線(xiàn)詳情就是用的display:table來(lái)實(shí)現(xiàn)的。
- div模擬表格：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>模擬表格</title>
</head>
<body>
<style type="text/css" rel="stylesheet">
.table {
display: table;
border: 1px solid #cccccc;
margin: 5px;
/*display: table時(shí)padding會(huì)失效*/
}
.row {
display: table-row;
border: 1px solid #cccccc;
/*display: table-row時(shí)margin、padding同時(shí)失效*/
}
.cell {
display: table-cell;
border: 1px solid #cccccc;
padding: 5px;
/*display: table-cell時(shí)margin會(huì)失效*/
}
</style>
<div class="table">
<div class="row">
<div class="cell">張三</div>
<div class="cell">李四</div>
<div class="cell">王五</div>
</div>
<div class="row">
<div class="cell">張三</div>
<div class="cell">李四</div>
<div class="cell">王五</div>
</div>
</div>
</body>
</html>
- 讓塊級(jí)標(biāo)簽實(shí)現(xiàn)行內(nèi)效果，即浮動(dòng)至同一橫軸，并實(shí)現(xiàn)等高效果
table表格中的單元格最大的特點(diǎn)之一就是同一行列表元素都等高。所以，很多時(shí)候，我們需要等高布局的時(shí)候，就可以借助display:table-cell屬性。說(shuō)到table-cell的布局，不得不說(shuō)一下“匿名表格元素創(chuàng)建規(guī)則”：
CSS2.1表格模型中的元素，可能不會(huì)全部包含在除HTML之外的文檔語(yǔ)言中。這時(shí)，那些“丟失”的元素會(huì)被模擬出來(lái)，從而使得表格模型能夠正常工作。所有的表格元素將會(huì)自動(dòng)在自身周?chē)伤璧哪涿鹴able對(duì)象，使其符合table/inline-table、table-row、table- cell的三層嵌套關(guān)系。
舉個(gè)例子吧，如果我們?yōu)樵厥褂谩癲isplay:table-cell;”屬性，而不將其父容器設(shè)置為“display:table-row;”屬性，瀏覽器會(huì)默認(rèn)創(chuàng)建出一個(gè)表格行，就好像文檔中真的存在一個(gè)被聲明的表格行一樣。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display:table實(shí)現(xiàn)浮動(dòng)效果</title>
</head>
<body>
<style type="text/css" rel="stylesheet">
.table {
display: table;
margin: 5px;
width: 1000px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 10px;
background-color: red;
}
</style>
<div class="table">
<div class="row">
<div class="cell">內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)內(nèi)容內(nèi)</div>
<div class="cell">內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</div>
<div class="cell">內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</div>
</div>
</div>
</body>
</html>
上例中div.row可以不要，效果一樣
- 結(jié)合vetical-align實(shí)現(xiàn)塊級(jí)元素垂直居中
