HCI 201 Multimedia and the World Wide Web

Fall 1999 - Section 703 - Code Efficiently: Table Coloring


The following chunks of HTML code both produce the same thing in a browser...

Column #1 Column #2 Column #3 Column #4
Sidehead A bla bla bla
Sidehead B yada yada yada
Sidehead C bla bla bla

Method 1:
<TABLE CELLPADDING="5" CELLSPACING="0" BORDER="0">
<TR>
<TH BGCOLOR="#666699">Column #1</TH>
<TH BGCOLOR="#666699">Column #2</TH>
<TH BGCOLOR="#666699">Column #3</TH>
<TH BGCOLOR="#666699">Column #4</TH>
</TR>
<TR>
<TH BGCOLOR="#9999CC">Sidehead A</TH>
<TD BGCOLOR="#CCCCFF">bla</TD>
<TD BGCOLOR="#CCCCFF">bla</TD>
<TD BGCOLOR="#CCCCFF">bla</TD>
</TR>
<TR>
<TH BGCOLOR="#9999CC">Sidehead B</TH>
<TD BGCOLOR="#CCCCFF">yada</TD>
<TD BGCOLOR="#CCCCFF">yada</TD>
<TD BGCOLOR="#CCCCFF">yada</TD>
</TR>
<TR>
<TH BGCOLOR="#9999CC">Sidehead C</TH>
<TD BGCOLOR="#CCCCFF">bla</TD>
<TD BGCOLOR="#CCCCFF">bla</TD>
<TD BGCOLOR="#CCCCFF">bla</TD>
</TR>
</TABLE>

Method 2:
<TABLE CELLPADDING="5" CELLSPACING="0" BORDER="0" BGCOLOR="#CCCCFF">
<TR BGCOLOR="#666699">
<TH>Column #1</TH>
<TH>Column #2</TH>
<TH>Column #3</TH>
<TH>Column #4</TH>
</TR>
<TR>
<TH BGCOLOR="#9999CC">Sidehead A</TH>
<TD>bla</TD>
<TD>bla</TD>
<TD>bla</TD>
</TR>
<TR>
<TH BGCOLOR="#9999CC">Sidehead B</TH>
<TD>yada</TD>
<TD>yada</TD>
<TD>yada</TD>
</TR>
<TR>
<TH BGCOLOR="#9999CC">Sidehead C</TH>
<TD>bla</TD>
<TD>bla</TD>
<TD>bla</TD>
</TR>
</TABLE>

The second one is much more efficient, taking up less storage space on the server and downloading faster.


Week 9
Previous | Next

Course Home | Announcements | Class Roster | Schedule | Syllabus