# 5.3:H205102 When design web content layout, avoid using tables for linearized design. ## Improper design Below is an improper example where table was used as a tool for word arrangement in the website. Improper design:
    <TABLE width="800" height="75" border="0" cellpadding="0" cellspacing="0">
    <TR>
    <TD width="200" bgcolor="#eeeeee">information 1</TD>
    <TD width="400" bgcolor="#9999FF">the main web content 2</TD>
    <TD width="200" bgcolor="#999999">information 3</TD>
    </TR>
    <TR>
    <TD bgcolor="#eeeeee">ĦicontentĦj</TD>
    <TD bgcolor="#9999FF">ĦicontentĦj</TD>
    <TD bgcolor="#999999">ĦicontentĦj</TD>
    </TR>
    <TR>
    <TD bgcolor="#eeeeee"></TD>
    <TD bgcolor="#9999FF"></TD>
    <TD bgcolor="#999999"></TD>
    </TR>
    </TABLE>
End of example ## Proper demonstration When designing website, one should avoid using table for layout arrangement, the example below used proper style sheets to do document layout. Proper exampleĦG
    <HEAD>
    <STYLE type="text/css">
    <!--
    #col1{
        top:100px;
        left:10px;
        width:200px;
        background:#eeeeee;
        border:0px solid #000;
        margin-left:0px;
        position:absolute;
        overflow: hidden;
        height: 90px;
        background-color: #eeeeee;
        }
    #col2{
        top:100px;
        left:210px;
        width:400px;
        background:#eeeeee;
        border:0px solid #000;
        margin-left:0px;
        position:absolute;
        overflow: hidden;
        height: 90px;
        background-color: #9999FF;
        }
    #col3{
        top:100px;
        left:610px;
        width:200px;
        background:#D5CFB0;
        border:0px solid #000;
        position:absolute;
        margin-left:0px;
        overflow: hidden;
        height: 90px;
        background-color: #999999;
        }
    -->
    </STYLE>
    </HEAD>

      <DIV id="col1">
      <P align="center">information 1</P>
      <P align="center">ĦicontentĦj</P>
      </DIV>
      <DIV id="col2">
      <P align="center">the main web content 2</P>
      <P align="center">ĦicontentĦj</P>
      </DIV>
      <DIV id="col3">
      <P align="center">information 3</P>
      <P align="center">ĦicontentĦj</P>
      </DIV>
End of example