表格制作说明

表格製作說明一般規定：表格需以定義於table…./table間表格內容以『列(row)先行(column)後』的方式依序編寫。表格中的一列需以定義於tr…./tr間，tr為tablerow的縮寫。資料項目需以定義於td…./td間，td為tabledata的縮寫，唯/td可省略。表格的編碼步驟1、先繪一表格草圖如：甲乙12342.於表格前後，先加上table及/table，如：table甲乙1234/table3.於表格的每一列的前後，先加上tr及/tr，如：tabletr甲乙/trtr12/trtr34/tr/table4.於表格的每一欄位資料的前後，加上td及/td，如：tabletrtd甲/tdtd乙/td/trtrtd1/tdtd2/td/trtrtd3/tdtd4/td/tr/table5.將框線去除即得tabletrtd甲/tdtd乙/td/trtrtd1/tdtd2/td/trtrtd3/tdtd4/td/tr/table6.上述之實例表格的實例表格製作說明一.htm表格框線上例中所顯示的表格無框線，可於table內加入border屬性border屬性說明格式：border=數字數字愈大框線愈粗，該選項不寫或數值為0時，表無框線。依瀏覽器的功能可能會有所不同：若【border=數字】不寫，在有底色時，顏色區塊是連續的。若【border=0】，在有底色時，欄位顏色區塊是不連續的(有欄位的格線)。BODYtableborder=1trtd甲/tdtd乙/td/tr../table/BODY/HTMLborder屬性的應用實例表格製作說明2-1.htmborder=1表格製作說明2-2.htmborder=3表格空白欄之處理因HTML對白空白(whiteblank)的處理方式可以中文之「全型空白」用其提供的空白特殊符號「 」(Non-BlankSPace)，同於資料內有“”(大於符號)時，需使用「>」(greater)一樣。表格背景顏色bgcolor屬性說明格式：bgcolor=“顏色名”|”#rrggbb例如：bgcolor=silverbgcolor=#ff0000代表純紅因紅色全用，綠色和藍色無背景顏色屬性可以放在tabletrtd標籤內例如：tablebgcolor=silver整個表格的背景顏色為銀色，除非trtd有另外指定。trbgcolor=#ff0000本例的背景顏色為正紅色，除非td有另外指定。tdbgcolor=blue本例的背景顏色為藍色，可變更trtd的指定。表格的框線由table的bgcolor所決定，無法由tr、td變更，若要變更可使用DHTML。bgcolor屬性的應用實例HTMLHEADTITLE表格背景顏色練習一/TITLE/HEADBODYtablebgcolor=silverborder=1trtd甲/tdtd乙/td/trtrbgcolor=ff0000tdbgcolor=blue1/tdtd2/td/trtrtd3/tdtd4/td/tr/tablebr/BODY/HTML表格製作背景顏色說明.htm表格欄位的長寬border屬性width和height屬性說明格式：width=整數|整數%整數：表示寬度為整數個像素(pixel)點。整數%：表示寬度的佔可分配的整數比率。以該視窗或框頁所分配到螢幕的大小為100%。height=整數整數：表示高度為整數個像素(pixel)點。整數%：表示高度的佔可分配的整數比率。例如：width=100width=10%height=20height=20%以該視窗或框頁所分配到螢幕的大小（寬、高）為100%。若指明200%，則大小為分配到螢幕大小的2倍。長寬屬性可以放在tabletrtd標籤內但同一個行（COLumn）的寬度是相同的，同一個列（ROW）的高度是相同的。例如：tablewidth=100整個表格的寬度為100個像素(pixel)點。tablewidth=100%整個表格的寬度為可分配的全部。續上例width和height屬性的應用實例下例為一個全畫面的表格（可以隨視窗大小而調變）。其欄位比率分別為20%30%20%50%50%HTMLHEADTITLE表格的寬和高/TITLE/HEADBODYtablebgcolor=silverborder=1width=100%height=”100%”trheight=”20%”td甲/tdtd /tdtd乙/td/trtrheight=”30%”tdwidth=30%1/tdtdwidth=20%x/tdtdwidth=50%2/td/trtrheight=”50%”td3/tdtd /tdtd4/td/tr/tablebr/BODY/HTML表格製作w-and-h說明.htm表格跨欄colspan和rowspan屬性說明格式：colspan=“整數”跨行合併：該欄位合併後繼“整數”欄位（同列）。rowspan==“整數”跨列合併：該欄位合併在其下方後繼“整數”欄位（同行）。例如：tdcolspan=2和同列後繼欄位合併成一欄（共2格）。tdrowspan=3和同行後繼二個欄位合併成一欄（共3格）。tdrowspan=3colspan=2和同列後繼欄位及和同行後繼二個欄位合併成一欄（共6格）。屬性的應用實例下列表格姓名性別e-mailtdcolspan=2tdrowspan=2住址tdcolspan=2參考表格的編碼步驟編碼的次序由左至右，被合併的欄位不需有任何的標籤。HTMLHEADmetahttp-equiv=content-typecontent=text/html;charset=big5TITLE表格的跨欄製作說明/TITLE/HEADBODYtableborder=1trtd姓名/tdtdwidth=60 /tdtd性別/tdtdwidth=60 /td/trtrtde-mail/tdtdcolspan=2 /tdtdrowspan=2 /td/trtrtd住址/tdtdcolspan=2 /td/tr/table/BODY/HTML表格的跨欄製作說明.htm表格欄位內容排列valign和align屬性說明格式：valign=“top”|middle|“bottom”垂直方向，三個選項上、中、下align=“left”|center|“right”水平方向，三個選項左、中、右leftrighttopbottomcentermiddlevalignaligntdvalign=“top”align=“left”tdvalign=“middle”align=“center”tdvalign=“bottom”align=“right”leftrighttopbottomcentermiddlevalignaligntdvalign=“top”align=“left”tdvalign=“middle”align=“center”tdvalign=“bottom”align=“right”屬性的應用實例九種組合的情況顯示HTMLHEADmetahttp-equiv=content-typecontent=text/html;charset=big5TITLE表格的內容排列說明/TITLE/HEADBODYtableborder=1width=300trheight=100tdvalign=topalign=left左上/tdtdvalign=topalign=center中上/tdtdvalign=topalign=right右上/td/trtrheight=100tdvalign=middlealign=left左中/tdtdvalign=middlealign=center中中/tdtdvalign=middlealign=right右中/td/trtrheight=100tdvalign=bottomalign=left左下/tdtdvalign=bottomalign=center中下/tdtdvalign=bottomalign=right右下/td/tr/table/BODY/HTML表格的內容排列說明.htm