本篇文章給大家談?wù)凥TML表格布局網(wǎng)頁設(shè)計，以及html表格頁面設(shè)計對應(yīng)的知識點(diǎn)，希望對各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、用HTML語言做一個表格
• 2、html表格布局問題
• 3、html表格布局

用HTML語言做一個表格

html做個表格的步驟如下：

1、首先新建一個html，點(diǎn)擊body/body中間，先填入表格內(nèi)容；

2、內(nèi)容根據(jù)需求來寫即可，示例代碼如下：

table

p style="text-align:center "功課表/p

tr

th語文/th

td7:00-7:40/td

td7:50-8:30/td

/tr

tr

th數(shù)學(xué)/th

td7:00-7:40/td

td7:50-8:30/td

/tr

tr

th英文/th

td7:00-7:40/td

td7:50-8:30/td

/tr

/table

3、然后在head/head中間輸入樣式表的樣式；

4、樣式也根據(jù)個人的需求來設(shè)置即可，設(shè)置單元格的寬度高度，合并單元格，位置，顏色等等，示例代碼如下：

style type="text/css"

body

{

width:340px;

height :800px;

}

table

{

border-collapse :collapse ;

}

th,td

{

width:100px;

height:40px;

border :1px solid black;

font-size:12px;

text-align :center;

}? ?

/style

5、這里需要注意這個代碼“table”的意義是將表格邊框合并為單一的邊框，將相鄰變合并。

6、預(yù)覽結(jié)果如下所示，一個簡單的表格就制作出來了。

html表格布局問題

如果你一定要用table去實(shí)現(xiàn)，就是大量的table標(biāo)簽嵌套table，然后不斷的嵌套，針對每個單元格、標(biāo)簽進(jìn)行控制

然后提一句，從2007年開始，整個前端開發(fā)（HTML5開發(fā)）、網(wǎng)頁制作的制作規(guī)范，行業(yè)當(dāng)中就是使用HTML+CSS的模式進(jìn)行（也稱為DIV+CSS），其原因在于table的語義性、可維護(hù)性都比較差，從語義的角度來說，table是表格，也就是呈現(xiàn)數(shù)據(jù)的數(shù)據(jù)表，并非網(wǎng)頁布局的東西。

對于很多學(xué)校、大學(xué)的官網(wǎng)，由于是2005年左右的一系列產(chǎn)品，所以，會采用table的布局方式。如果你是在制作學(xué)校的某一個網(wǎng)頁，在維護(hù)學(xué)校，那你沒的選擇，只能按我第一段說的那么去操作，雖然麻煩~如果你是在自學(xué)HTML和CSS，在拿學(xué)校的頁面做練習(xí)，那么一定以“行業(yè)規(guī)范”為準(zhǔn)，選擇好的合適的書籍輔助學(xué)習(xí)。

html表格布局

DW就是這點(diǎn)煩人，所以不喜歡用它。

建議你不要使用表格布局，用設(shè)計布局，先畫一個足夠大的TABLE，然后先畫第一列，寬和高都畫得比圖片大，然后插入圖片，再調(diào)整單元格大小到圖片大小。

意思也就是說，如果你先定義好寬窄，DW會根據(jù)內(nèi)容自動調(diào)整，因此會改變排版。所以你先畫一個足夠大的單元格，先將內(nèi)容加進(jìn)去，再來改變單元格的大小。

HTML表格布局網(wǎng)頁設(shè)計的介紹就聊到這里吧，感謝你花時間閱讀本站內(nèi)容，更多關(guān)于html表格頁面設(shè)計、HTML表格布局網(wǎng)頁設(shè)計的信息別忘了在本站進(jìn)行查找喔。