HTML是用于開發(fā)網(wǎng)頁的“超文本標(biāo)記語言”，今天我們一起來學(xué)習(xí)一下HTML+CSS網(wǎng)頁布局中Table布局方式。

常見的網(wǎng)頁布局用CSS而言一般有經(jīng)典行布局、經(jīng)典列布局、雙飛翼布局、圣杯布局等。

今天小編教大家用Table表格布局。大家先來欣賞幾個(gè)網(wǎng)頁：

這幾個(gè)網(wǎng)頁布局都挺好看的對(duì)吧，不過今天我們不深究網(wǎng)頁如何做到那么好看，我們僅僅做網(wǎng)頁如何布局。

來看這張圖：

這個(gè)網(wǎng)頁效果就是我們今天要做的。

首先，我們仔細(xì)觀察下效果圖，這是一個(gè)幾行幾列的表格呢？

仔細(xì)觀察我們發(fā)現(xiàn)這是一個(gè)四行五列的表格，所以我們先把四行五列的表格寫出來：

August精彩編程

首頁
標(biāo)題1	標(biāo)題2	標(biāo)題3	標(biāo)題4	標(biāo)題5
側(cè)邊導(dǎo)航欄	主頁內(nèi)容
尾部

寫完四行五列表格后我們給表格加上行內(nèi)樣式。

August精彩編程

首頁
標(biāo)題1	標(biāo)題2	標(biāo)題3	標(biāo)題4	標(biāo)題5
側(cè)邊導(dǎo)航欄	主頁內(nèi)容
尾部

接著效果就基本有了。我們先看看到這里網(wǎng)頁是什么效果：

接著我們隊(duì)表格進(jìn)行跨行或跨列合并。

我們?cè)俜治鲆幌?#xff1a;

首先第一行，第一行是頭部，我們需要對(duì)頭部做什么？只有一行一列對(duì)吧，所以我們需要對(duì)第一行跨列合并，夸5列。

其次是第二行，第二行不用做什么處理，保持這樣就行。

再然后是第三行，第三行也要跨列合并，第一列無需處理，第二列開始夸4列。

最后一行是底部，底部也只有一行，因此我們需要對(duì)底部夸5列。

看代碼：

August精彩編程

首頁
標(biāo)題1	標(biāo)題2	標(biāo)題3	標(biāo)題4	標(biāo)題5
側(cè)邊導(dǎo)航欄	主頁內(nèi)容
尾部

基本效果就有了，我們看圖：

但是，圖中箭頭所指位置為什么會(huì)這樣呢？原因是，我們隊(duì)表格進(jìn)行跨列，實(shí)際上是添加了跨列屬性的那一格邊寬，把原本這個(gè)位置上的格子擠掉，那要怎么解決呢？只需要把多出來的單元格標(biāo)簽去掉即可。接下來看完整代碼：

August精彩編程

首頁
標(biāo)題1	標(biāo)題2	標(biāo)題3	標(biāo)題4	標(biāo)題5
側(cè)邊導(dǎo)航欄	主頁內(nèi)容
尾部

最后看效果圖

這就是我們今天的內(nèi)容，Table表格對(duì)網(wǎng)頁進(jìn)行布局，你學(xué)會(huì)了嗎？

三套很棒的編程教程，零基礎(chǔ)到就業(yè)，免費(fèi)領(lǐng)！

總結(jié)

以上是生活随笔為你收集整理的html网页 table布局实例,HTML用Table表格对网页布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。