跳到主要內容
:::|

5.3:H205102 在網頁內容呈現設計時,避免以表格做多欄文字的設計

說明:網頁開發者應避免使用表格來作為網頁排版的工具,最好使用CSS樣式表來作為網頁的排版工具。如果使用表格來作為排版的工具,可能會造成身心障礙者所使用的特殊瀏覽器無法正確的辨別出網頁中的資訊,表格應該只用於資料的編排而非用網頁版面的設計。

範例:下面的不良設計是使用表格的方式來作為網頁版面文字編排的工具。

不良設計

不良設計:

< TABLE width= " 800 " height= " 75 " border= " 0 " cellpadding= " 0 " cellspacing= " 0 " >
< TR>
< TD width= " 200 " bgcolor= " #eeeeee " >資料一 < /TD>
< TD width= " 400 " bgcolor= " #9999FF " >主要網頁內容資料二 < /TD>
< TD width= " 200 " bgcolor= " #999999 " >資料三 < /TD>
< /TR>
< TR>
< TD bgcolor= " #eeeeee " >【內容】 < /TD>
< TD bgcolor= " #9999FF " >【內容】 < /TD>
< TD bgcolor= " #999999 " >【內容】 < /TD>
< /TR>
< TR>
< TD bgcolor= " #eeeeee " > < /TD>
< TD bgcolor= " #9999FF " > < /TD>
< TD bgcolor= " #999999 " > < /TD>
< /TR>
< /TABLE>

正確示範

網頁設中應要盡量避免使用表格來作為網頁版面的編排,下面的正確例子是使用style sheets的方式來進行網頁中文件的編排。

正確範例:

< HEAD>
< STYLE type= " text/css " >
< !--
#col1{
top:10%;
left:0%;
width:20%;
background:#eeeeee;
position:absolute;
overflow: hidden;
height: 90%;
background-color: #eeeeee;
}
#col2{
top:10%;
left:20%;
width:40%;
background:#eeeeee;
position:absolute;
overflow: hidden;
height: 90%;
background-color: #9999FF;
}
#col3{
top:10%;
left:60%;
width:20%;
background:#D5CFB0;
position:absolute;
overflow: hidden;
height: 90%;
background-color: #999999;
}
-->
< /STYLE>
< /HEAD>

< DIV id= " col1 " >
< P align= " center " >資料一 < /P>
< P align= " center " >【內容】 < /P>
< /DIV>
< DIV id= " col2 " >
< P align= " center " >主要網頁內容資料二 < /P>
< P align= " center " >【內容】 < /P>
< /DIV>
< DIV id= " col3 " >
< P align= " center " >資料三 < /P>
< P align= " center " >【內容】 < /P>
< /DIV>

上一頁| 回首頁