整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
<table> 元素不是作為布局工具而設(shè)計的。
<table> 元素的作用是顯示表格化的數(shù)據(jù)。
這里設(shè)置的solid是定義實線。
使用 <table> 元素能夠取得布局效果，因為能夠通過 CSS 設(shè)置表格元素的樣式：
<html>
<head>
<style>
table.a {
width:100%;
border:5px solid #dfffdd;
}
table.a th, td {
padding:10px;
}
table.a th {
width:100px;
}
</style>
</head>
<body>
<table class="a">
<tr>
<th>
<img src="url" alt="Note" style="height:66px;width:66px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
<tr>
<th>
<img src="url" alt="Note" style="height:66px;width:66px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>
</body>
</html>
HTML基礎(chǔ)教程：使用表格的布局
希望以上可以解決你們心中的一些疑惑，其中可能會有不對的地方或是需要改進的地方，歡迎留言糾正。感覺還不錯歡迎關(guān)注收藏轉(zhuǎn)載哦 !!!!
頁布局對網(wǎng)站的外觀特別重要，布得好，留得住用戶，增收流量；布不好，用戶逃之夭夭，還順道罵兩句。大多數(shù)Web系統(tǒng)會借用雜志或報紙那樣排版，至于為什么這樣，我不說，你也懂的，就是產(chǎn)品經(jīng)理吵架吵不過程序員時，常說的：用戶教育成本低。
在HTML中，如果是數(shù)據(jù)集(像excel那種)的布局，常用<table>標(biāo)簽，如果是內(nèi)容塊(網(wǎng)站板塊)的布局，則常用<div>標(biāo)簽。
表格由<table>標(biāo)簽來定義。每個表格均有若干行<tr>標(biāo)簽和列<td>標(biāo)簽組成。<td>數(shù)據(jù)單元格的內(nèi)容可以包含文本、圖片、水平線、表格等內(nèi)容。表格頭由<th>標(biāo)簽生成。<table>標(biāo)簽常用的屬性是border，用來指定邊框?qū)挾取?lt;th>和<td>的屬性rowspan，可指定跨行數(shù)。
如果真的不理解表格的意義，那你打開excel，好好操作一翻，橫向合并一下單元格就知道什么是跨行了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第5個HTML-表格</title>
</head>
<body>
<table border="1">
<tr>
<th>序號</th>
<th>產(chǎn)品名稱</th>
<th>編號</th>
<th>規(guī)格</th>
</tr>
<tr>
<td>1</td>
<td>平板電腦</td>
<td>P1010</td>
<td>9.7英尺</td>
</tr>
<tr>
<td>2</td>
<td>筆記本電腦</td>
<td>C2111</td>
<td>15英尺</td>
</tr>
</table>
</body>
</html>輸出結(jié)果
網(wǎng)站分塊布局，常用<div>標(biāo)簽進行定義。常見網(wǎng)站布局為上中下，上放導(dǎo)航欄，中間放內(nèi)容，底部放版權(quán)和友情鏈接，而它們的分割便是由<div>標(biāo)簽負責(zé)的。當(dāng)然，用<div>布局，需要CSS的支持才行。同表格<td>標(biāo)簽一樣，<div>標(biāo)簽中，也是可以嵌入<p>、<hr>等標(biāo)簽的。
<div style="color:blue">
<h3>老陳說編程</h3>
<p>一個當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗。<br/>
想學(xué)編程的朋友，可關(guān)注：老陳說編程。<br/>
分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒錯的。</p>
</div>輸出結(jié)果
好了，有關(guān)HTML布局的內(nèi)容，老陳先講這么多，如果覺得對你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點贊，就是對老陳繼續(xù)創(chuàng)作和分享最大的鼓勵。
一個當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗。想學(xué)編程的朋友，可關(guān)注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒錯的。
#前端##Web##程序員##CSS##HTML5#
web前端設(shè)計排版時我們可能會用到表格布局和div+CSS布局，但現(xiàn)在主要使用后者，為何？今天我們來談一談兩者之間的發(fā)展和原理。
話不多說下面來干貨
上個世紀(jì)Web開發(fā)人員流行使用表格進行文檔整體布局。因為當(dāng)時大部分瀏覽器不支持CSS，而且大部分人不會CSS，且沒有文檔拆分設(shè)計，致使文檔臃腫，到了上個世紀(jì)末大部分沒有相關(guān)背景的人進入，對于那些沒有相關(guān)背景的開發(fā)人員覺得表格布局簡單，致使使用它的人更多。本世紀(jì)出出現(xiàn)了泡沫危機致使大部分非專業(yè)人士的推出，而剩下來的大神覺得css更具有優(yōu)勢，所以div+CSS就得以發(fā)展。
傳統(tǒng)表格布局利用了HTML中的表格元素設(shè)置參數(shù)以達到無邊框特性，將網(wǎng)頁中的各個元素按版式劃分放入表格的各單元格中，從而實現(xiàn)復(fù)雜的排版組合。
特點
現(xiàn)在依然有網(wǎng)站在使用表格布局，表格布局使用方法簡單，制作只要將內(nèi)容按照行和列拆分，用表格組裝起來即可實現(xiàn)設(shè)計版面布局。
如今我們對網(wǎng)站外觀要求和體驗的不斷提高，開發(fā)人員用各種圖片來裝飾網(wǎng)頁。由于一些大圖會致使下載速度緩慢，所以一般我們將大圖切分成若干個小圖，使網(wǎng)頁加載速度加快。下圖所示為使用表格布局的頁面和該頁面的部分HTML代碼。
網(wǎng)頁效果
CSS布局是網(wǎng)頁html通過div標(biāo)簽+css樣式表代碼開發(fā)制作的（html）網(wǎng)頁的統(tǒng)稱。
所有都元素都被看做是一個個盒子，它們占據(jù)一定空間，在其中有著特定的內(nèi)容。我們可以通過調(diào)整盒子的邊框和間距等參數(shù)來調(diào)節(jié)盒子的位置以及大小。頁面是由大大小小許多盒子組成的，這些盒子互相之間彼此影響，因此，我們既需要理解每個盒子內(nèi)部的機構(gòu)，也需要理解盒子直接的關(guān)系以及互相的影響。
組成
盒子模型由content（內(nèi)容）、border（邊框）、padding（內(nèi)邊距）、margin（外邊距）共4個部分組成。如下圖：
一個盒子在頁面上由“內(nèi)容+內(nèi)邊距+外邊距+邊框”組成的，可以通過設(shè)定盒子的border、padding和margin來實現(xiàn)各種各樣的排版效果。也不是所有用<div>定義的網(wǎng)頁元素才是盒子，所有的網(wǎng)頁元素都可以看做是盒子。網(wǎng)頁上的表格、圖片、文字等，從盒子模型的角度就是大大小小的盒子排列或嵌套在一起的。
網(wǎng)頁改版維護的維護
表格布局：復(fù)雜的表格設(shè)計使得設(shè)計不易，修改更復(fù)雜，最后生成的網(wǎng)頁代碼有許多冗余，還有許多沒有任何意義的元素，文件量龐大，下載慢，解析速度也慢，維護和更新困難。
Div+CSS：可以把要展示的內(nèi)容與其表現(xiàn)樣式分開，對CSS文件進行修改，其他HTML文件中自動進行套用，不必在每個HTML文件中重復(fù)設(shè)置，減少設(shè)計者更多負擔(dān)，修改頁面更省時。
保持視覺的一致性：
DIV+CSS技術(shù)，方便統(tǒng)一網(wǎng)頁風(fēng)格，避免了不同區(qū)域或不同頁面體現(xiàn)出的效果偏差。
頁面載入得更快：
大部分頁面代碼寫在了CSS當(dāng)中，使頁面體積容量更小。比表格嵌套的方式，DIV+CSS將頁面獨立成更多區(qū)域，打開頁面時，逐層加載，而不像表格嵌套那樣整個頁面圈在一個大表格里，由此頁面加載速度更加極速。
搜索引擎友程度高：
用表格進行網(wǎng)頁布局的代碼較多，搜索引擎要把多的代碼去掉。而使用DIV+CSS布局設(shè)計網(wǎng)頁，所有樣式都在CSS里，正文代碼得到極大的精簡，也減少了HTML代碼，正文就突出了，搜索程序能在更短的時間內(nèi)爬完整個頁面，搜索程序執(zhí)行效率得到了提升。
如果有任何錯誤和紕漏，請私信我更正。
如果你有任何意見一定要私信告訴我，讓我快速成長起來喲。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
