# 5.3:H205102 在網頁內容呈現設計時，避免以表格做多欄文字的設計 ## 不良設計 下面的不良設計是使用表格的方式作為網頁版面文字編排的工具。 不良設計：
    <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>
範例結束