HTML表格布局網(wǎng)頁設計(html表格頁面設計)
本篇文章給大家談談HTML表格布局網(wǎng)頁設計,以及html表格頁面設計對應的知識點,希望對各位有所幫助,不要忘了收藏本站喔。
本文目錄一覽:
- 1、用HTML語言做一個表格
- 2、html表格布局問題
- 3、html表格布局
用HTML語言做一個表格
html做個表格的步驟如下:
1、首先新建一個html,點擊body/body中間,先填入表格內容;
2、內容根據(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ù)學/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ù)個人的需求來設置即可,設置單元格的寬度高度,合并單元格,位置,顏色等等,示例代碼如下:
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、預覽結果如下所示,一個簡單的表格就制作出來了。
html表格布局問題
如果你一定要用table去實現(xiàn),就是大量的table標簽嵌套table,然后不斷的嵌套,針對每個單元格、標簽進行控制
然后提一句,從2007年開始,整個前端開發(fā)(HTML5開發(fā))、網(wǎng)頁制作的制作規(guī)范,行業(yè)當中就是使用HTML+CSS的模式進行(也稱為DIV+CSS),其原因在于table的語義性、可維護性都比較差,從語義的角度來說,table是表格,也就是呈現(xiàn)數(shù)據(jù)的數(shù)據(jù)表,并非網(wǎng)頁布局的東西。
對于很多學校、大學的官網(wǎng),由于是2005年左右的一系列產(chǎn)品,所以,會采用table的布局方式。如果你是在制作學校的某一個網(wǎng)頁,在維護學校,那你沒的選擇,只能按我第一段說的那么去操作,雖然麻煩~如果你是在自學HTML和CSS,在拿學校的頁面做練習,那么一定以“行業(yè)規(guī)范”為準,選擇好的合適的書籍輔助學習。
html表格布局
DW就是這點煩人,所以不喜歡用它。
建議你不要使用表格布局,用設計布局,先畫一個足夠大的TABLE,然后先畫第一列,寬和高都畫得比圖片大,然后插入圖片,再調整單元格大小到圖片大小。
意思也就是說,如果你先定義好寬窄,DW會根據(jù)內容自動調整,因此會改變排版。所以你先畫一個足夠大的單元格,先將內容加進去,再來改變單元格的大小。
HTML表格布局網(wǎng)頁設計的介紹就聊到這里吧,感謝你花時間閱讀本站內容,更多關于html表格頁面設計、HTML表格布局網(wǎng)頁設計的信息別忘了在本站進行查找喔。
掃描二維碼推送至手機訪問。
版權聲明:本文由飛速云SEO網(wǎng)絡優(yōu)化推廣發(fā)布,如需轉載請注明出處。