Not So Simple Tables Page Four
| Tik Tok | Lisaviolet | Mr. Calm | My Site |
| My Other Site | lvdesigns | Cats | More Cats |
| The | Hills | Are | Alive |
| With | The | Sound | of |
| Music | And | The | Sun |
| Will | Come | Up | Tomorrow |
Here is a Not so simple table in vibrant colors. It has 24 cells and a very wide border. Even the cells are different colors and sizes. Let's look at the complete code for this table:
<center>
<table width="65%" border="10" cellspacing="3" cellpadding="3" bordercolorlight="#FF3300" bordercolordark="#0000FF" bordercolor="#CC3333" bgcolor="#FFFFCC">
<tr>
<td bgcolor="#33CCCC"
width="25%">Tik Tok</td>
<td width="28%">Lisaviolet</td>
<td bgcolor="#FF9966" width="22%">Mr. Calm</td>
<td width="25%">My Site</td>
</tr>
<tr>
<td bgcolor="#33CCCC"
width="25%">My Other Site</td>
<td width="28%">lvdesigns</td>
<td bgcolor="#FF9966" width="22%">Cats</td>
<td width="25%">More Cats</td>
</tr>
<tr>
<td bgcolor="#33CCCC"
width="25%">The</td>
<td width="28%">Hills</td>
<td bgcolor="#FF9966" width="22%">Are </td>
<td width="25%">Alive</td>
</tr>
<tr>
<td bgcolor="#33CCCC"
width="25%">With</td>
<td width="28%">The </td>
<td bgcolor="#FF9966" width="22%">Sound</td>
<td width="25%">of</td>
</tr>
<tr>
<td bgcolor="#33CCCC"
width="25%">Music</td>
<td width="28%">And</td>
<td bgcolor="#FF9966" width="22%">The </td>
<td width="25%">Sun</td>
</tr>
<tr>
<td bgcolor="#33CCCC"
width="25%">Will </td>
<td width="28%">Come </td>
<td bgcolor="#FF9966" width="22%">Up</td>
<td width="25%">Tomorrow</td>
</tr>
</table>
</center>
Pretty WOW! isn't it! Here's the code with my comments in red. I'll only do the first few cells to get you going:
<center>(Centers the table on the page)
<table width="65%" border="10" cellspacing="3" cellpadding="3" bordercolorlight="#FF3300" bordercolordark="#0000FF" bordercolor="#CC3333" bgcolor="#FFFFCC">
Let's break the first line of code up so we can dissect it easier:
<table width="65%" (I've opened the tag, and set the table width in a percent)
border="10" (I selected a border width of 10 pixels)
cellspacing="3" (cellspacing is 3 pixels)
cellpadding="3" (cellpadding is 3 pixels)
bordercolorlight="#FF3300" (I selected a bordercolorlight in a red color using the proper hexadecimal code)
bordercolordark="#0000FF" (I wanted a dark blue for the bordercolordark)
bordercolor="#CC3333" (Here's my default border color)
bgcolor="#FFFFCC"> (My default background color is pale yellow and I closed the tag)
<tr> (Opens the table row items)
<td bgcolor="#33CCCC"
width="25%">(Indicates the table data cell.
Now notice there is a separate bgcolor for this cell and a cell width
in percent is set) Tik Tok </td>(Closes
the table data cell)
<td width="28%">(Indicates the table data
cell. Now notice there is no bgcolor for this cell, the default is used.
A cell width in percent is set)Lisaviolet</td>(Closes
the table data cell)
<td bgcolor="#FF9966" width="22%">(Indicates
the table data cell. Now notice there is a separate bgcolor for this cell and
a cell width in percent is set) Mr. Calm</td>(Closes
the table data cell)
<td width="25%">(Indicates the table data
cell. Now notice there is no bgcolor for this cell, the default is used. A cell
width in percent is set)My Site</td>(Closes
the table data cell)
</tr>(Closes the table row items)
<tr> (Opens the table row items)
<td bgcolor="#33CCCC"
width="25%">My Other Site</td>
<td width="28%">lvdesigns</td>
<td bgcolor="#FF9966" width="22%">Cats</td>
<td width="25%">More Cats</td>
</tr> (Closes the table row items)
<tr> (Opens the table row items)
<td bgcolor="#33CCCC"
width="25%">The</td>
<td width="28%">Hills</td>
<td bgcolor="#FF9966" width="22%">Are </td>
<td width="25%">Alive</td>
</tr>(Closes the table row items)
<tr>
<td bgcolor="#33CCCC"
width="25%">With</td>
<td width="28%">The </td>
<td bgcolor="#FF9966" width="22%">Sound</td>
<td width="25%">of</td>
</tr>
<tr>
<td bgcolor="#33CCCC"
width="25%">Music</td>
<td width="28%">And</td>
<td bgcolor="#FF9966" width="22%">The </td>
<td width="25%">Sun</td>
</tr>
<tr>
<td bgcolor="#33CCCC"
width="25%">Will </td>
<td width="28%">Come </td>
<td bgcolor="#FF9966" width="22%">Up</td>
<td width="25%">Tomorrow</td>
</tr>
</table>
</center>
After reading the first couple of rows you'll see a pattern in cell background color and widths in percents. Want to have each cell a different color? Simply put in the hexadecimal color code after bgcolor=
The limits on cell widths is by row. All the cells in a row must be the same percent of the table's width. Trust me on this one, just look at the example :0)
End of Page Four....click here for Page Five
Back to Site Help
This helpful information compiled by Tik Tok