HTML表格標記詳細講解(適合初學者)

2020-03-24 17:25:24

字體：大中小

來源：轉載

供稿：網友

■ TABLE TR TD ：這三個標記是定義表格的最重要的標記，可以說只學這三個己足夠。 TABLE 是一個容器標記，意思是說它用以聲明這是表格而且其他表格標記只能在他的范圍內才適用，屬容器標記的還有其他。
TR 用以標示表格列（row）
TD 用以標示儲存格（cell） TABLE 的參數設定（常用）：例如： table width= 400 border= 1 cellspacing= 2 cellpadding= 2 align= CENTER valign= TOP background= myweb.gif bgcolor= #0000FF bordercolor= #FF00FF bordercolorlight= #00FF00 bordercolordark= #00FFFF cols= 2 width= 400
表格寬度，接受絕對值（如 80）及相對值（如 80%）。 border= 1
表格邊框厚度，不同瀏覽器有不同的內定值，故請指明。 cellspacing= 2
表格格線厚度，請看例子三，那是加厚到 5 的格線。 cellpadding= 2
文字與格線的距離，請看例子四，那是加至 10 的 padding。 align= CENTER
表格的擺放位置（水平），可選值為： left, right, center，請看例子五或六，那表格是放于中間的，為怕一些瀏覽器不支援，故特加上居中標記 CENTER ，只是多層保證而己，當然只用 CENTER 亦可。 valign= TOP .
表格內字畫等的擺放貼位置（垂直），可選值為： top, middle, bottom。 background= myweb.gif
表格紙，與 bgcolor 不要同用。 bgcolor= #0000FF
表格底色，與 background 不要同用，請看例子六。 bordercolor= #FF00FF
表格邊框顏色，NC 與 IE 有不同的效果，請看例子六。 bordercolorlight= #00FF00
表格邊框向光部分的顏色，請看例子二。『只適用于 IE』 bordercolordark= #00FFFF
表格邊框背光部分的顏色，請看例子二，使用 bordercolorlight 或 bordercolordark 時 bordercolor 將會失效。『只適用于 IE』 cols= 2
表格欄位數目，只是讓瀏覽器在下載表格是先畫出整個表格而己。 TR 的參數設定（常用）：例如： tr align= RIGHT valign= MIDDLE bgcolor= #0000FF bordercolor= #FF00FF bordercolorlight= #808080 bordercolordark= #FF0000 align= RIGHT
該一列內字畫等的擺放貼位置（水平），可選值為： left, center, right。 valign= MIDDLE
該一列內字畫等的擺放貼位置（垂直），可選值為： top, middle, bottom。 bgcolor= #0000FF
該一列底色，請看例子五。 bordercolor= #FF00FF
該一列邊框顏色，請看例子三。『只適用于 IE』 bordercolorlight= #808080
該一列邊框向光部分的顏色，請看例子三。『只適用于 IE』 bordercolordark= #FF0000
該一列邊框背光部分的顏色，請看例子三，使用 bordercolorlight 或 bordercolordark 時 bordercolor 將會失效。『只適用于 IE』 TD 的參數設定（常用）：例如： td width= 48% height= 400 colspan= 5 rowspan= 4 align= RIGHT valign= BOTTOM bgcolor= #FF00FF bordercolor= #808080 bordercolorlight= #FF0000 bordercolordark= #00FF00 background= myweb.gif width= 48%
該一儲存格寬度，接受絕對值（如 80）及相對值（如 80%）。 height= 400
該一儲存格高度。 colspan= 5
該一儲存格向右打通的欄數。請看例子六 rowspan= 4
該一儲存格向下打通的列數。請看例子六 align= RIGHT
該一儲存格內字畫等的擺放貼位置（水平），可選值為： left, center, right。 valign= BOTTOM
該一儲存格內字畫等的擺放貼位置（垂直），可選值為： top, middle, bottom。 bgcolor= #FF00FF
該一儲存格底色，請看例子四。 bordercolor= #808080
該一儲存格邊框顏色，請看例子三。『只適用于 IE』 bordercolorlight= #FF0000
該一儲存格邊框向光部分的顏色，請看例子三。『只適用于 IE』 bordercolordark= #00FF00
該一儲存格邊框背光部分的顏色，請看例子三，使用 bordercolorlight 或 bordercolordark 時 bordercolor 將會失效。『只適用于 IE』 background= myweb.gif
該一儲存格紙，與 bgcolor 任用其一。例子一： table width= 60% border= 1
tr td 只有一個儲存格（cell）的表格 /td /tr
/table 顯示結果只有一個儲存格（cell）的表格例子二： table width= 60% border= 5 bordercolorlight= #FF00FF bordercolordark= #FF0000
tr td 第一列第一欄 /td td 第一列第二欄 /td /tr
/table 顯示結果第一列第一欄第一列第二欄例子三： table width= 60% border= 1 cellspacing= 5
tr bordercolor= #0000FF td 第一列第一欄 /td td 第一列第二欄 /td
/tr
tr bordercolorlight= #FF00FF bordercolordark= #00FF00 td 第二列第一欄 /td td 第二列第二欄 /td
/tr
/table 顯示結果第一列第一欄第一列第二欄第二列第一欄第二列第二欄例子四： table width= 60% border= 1 cellpadding= 10
tr td bgcolor= #FFCCE6 第一列第一欄 /td td bgcolor= #FFFFC6 第一列第二欄 /td
/tr
tr td bgcolor= #FFD9FF 第二列第一欄 /td td bgcolor= #DAB4B4 第二列第二欄 /td
/tr
/table 顯示結果第一列第一欄第一列第二欄第二列第一欄第二列第二欄例子五：原始碼 center
table width= 60% cellspacing= 0 cellpadding= 2 align= CENTER
tr td bgcolor= #FFD2E9 第一列第一欄 /td td bgcolor= #FFDAB5 第一列第二欄 /td td bgcolor= #FFFFB5 第一列第三欄 /td
/tr
tr bgcolor= #C0C0C0 td 第二列第一欄 /td td 第二列第二欄 /td td 第二列第三欄 /td
/tr
/table
/center 顯示結果第一列第一欄第一列第二欄第一列第三欄第二列第一欄第二列第二欄第二列第三欄例子六原始碼 center
table width= 350 border= 1 cellspacing= 0 cellpadding= 2 align= CENTER bgcolor= #FFC4E1 bordercolor= #0000FF
tr td 第一列第一欄 /td td colspan= 2 第一列之第二欄及第三欄 /td
/tr
tr td rowspan= 2 第二列及第三列之第一欄 /td td 第二列第二欄 /td td 第二列第三欄 /td
/tr
tr td 第三列第二欄 /td td 第三列第三欄 /td
/tr
/table
/center 顯示結果第一列第一欄第一列之第二欄及第三欄第二列及第三列之第一欄第二列第二欄第二列第三欄第三列第二欄第三列第三欄■ TH ： TH 與 TD 同樣是標示一個儲存格，唯一不同的是 TH 所標示的儲存格中的文字是以粗體出現，通常用于表格第一列以標示欄目。它的用法是取代 TD 的位置便可以，其參數設定請參考 TD 。
當然若為 TD 所標示的儲存格中的文字加上粗體標記 B 便等如 TH 的效果。例子：原始碼 center
table width= 350 border= 1 cellspacing= 0 cellpadding= 2 align= CENTER
tr align= CENTER th Month /th th % of IE visitor /th th % of NC visitor /th
/tr
tr align= CENTER td August /td td 61% /td td 39% /td
/tr
tr align= CENTER td July /td td 54% /td td 46% /td
/tr
tr align= CENTER td June /td td 52% /td td 48% /td
/tr
/table
/center 顯示結果Month % of IE visitor % of NC visitor August 61% 39% July 54% 46% June 52% 48%■ CAPTION ： CAPTION 的作用是為表格標示一個標題列，有如在表格上方加上一沒格線的打通列。當然亦可置于下方，通常用以存放該表格的標題。 CAPTION 的參數設定（常用）：
例如： caption align= TOP valign= TOP /caption align= TOP
該表格標題列相對于表格的擺放貼位置（水平），可選值為： left, center, right, top, middle, bottom，若 align= bottom 的話標題列便會出現對表格的下方，不管你的原始碼中把 caption 放在 table 中的頭部或尾部。 valign= TOP
該表格標題列相對于表格的擺放位置（上下），可選值為： top, bottom。和 align= TOP 或 align= BOTTOM 是一樣的，雖然功能重復了，但如果你要標題列置于下方及向右或向左貼，那末兩個參數便可一用了。當只一個參數時，請首選 align，因為 valign 是由 HTML 3.0 才開始的參數。例子： center
table width= 350 border= 1 cellspacing= 0 cellpadding= 2 align= CENTER
caption 網頁速成八月份訪客瀏覽器使用分析 /caption
tr align= CENTER th Month /th th % of IE visitor /th th % of NC visitor /th
/tr
tr align= CENTER td August /td td 61% /td td 39% /td
/tr
/table
/centerhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：優化HTML的輸入框提高用戶體驗和易用度的方法

下一篇：HTML5標記div、section、article使用說明