Tables :
Borders and BGs








Borders
As you may have discovered, borders can be very difficult to create on tables. Are you sick of having ugly borders on your tables that look like this:

   
   
 or 
   
   


Why not use CSS instead, just look at what you can create:

  
  

Strange? maybe... Cool? DEFINITELY!

Remember that CSS classes can be re-used over an entire website.
You can learn more about CSS here.




There is another neat trick that you can do with the cellspacing:

  
  


This is the code:

<table border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>


Basically, there is 1 pixel of spacing around each cell. The background color of the table is black. Now when you make each cell have it's own baclground color of white, it gives the appearance of a table with a normal one pixel border. Let us take another look:

  
  


Like it? Us nerds at EchoEcho do!





Backgrounds
HTML Background colours are also better off with CSS. The bgcolor attribute is not valid with the W3C and CSS, however, is.

For example, this is not valid HTML 4.0:
<table bgcolor="#330099">
<tr>
<td>Text</td>
<tr>
</table>


But this is:
<table style="background-color #330099:">
<tr>
<td>Text</td>
<tr>
</table>


In summing up, use CSS instead of HTML for formatting tables. CSS is devoted to formatting unlike its predessor. If you don't know CSS, learn it now!

 << PREVIOUS
READ MORE >>  
















DEVELOPER TIP!





     "Better Than Books - As Easy As It Gets!"