![]() ![]() |
5.3:H205102 When design web content layout, avoid using tables for linearized design.Improper designBelow 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 demonstrationWhen 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 |
![]() |