Lesson 9. More nifty stuff to improve your table's look!


beautiful more tables logo



ratty looking student tapping away on a computer 1. Put a link in your table.
2. Put a pic. in your table.
 3. Move your table on your page.
4. Add a dash of color to your table.
5. Make colored horizontal lines using tables.



purple button Put a link in your table

Links are put inside your table's <TD></TD> tags.
<TD>
<a href="URL of page you want to link to">
text to click on to go to page
</a>
</TD>
First, start with your basic table.

<body>

<table border="1">
<tr>
<td> Kimberly's html lessons. </td>
</tr>
</table>

</body>




Will look like this on your page:

kimberly's html lessons

Now, let's make kimberly's html lessons a link

<body>

<table border="1">
<tr>
<td>
 <a href="http://www.spinnet.jp/makepage">
 Kimberly's html lessons.
</a>
 </td>
</tr>
</table>

</body>

It's now a link to my index page:

kimberly's html lessons



What's the code?
Look at the table below and write out its html code.
Once you think you've got it perfect, CLICK HERE to check if you got it right.

lesson 1. lesson 2.
lesson 3. lesson 4.
lesson 5. lesson 6.
lesson 7. lesson 8.
purple pin This table has 4 table rows.

purple pin 2 TD cells are in each row.

purple pin A link to one of my lessons is in each TD cell.


purple button Put a picture in your table

There is no difference to the computer between photos and graphics, except that photos usually end in .jpg and graphics end in .gif. They are both very easy to put in your table. Like links, they also get slapped between your table's <TD></TD> tags.
Do you remember the html code for putting images on your page?
<TD>
<img src="name of image.jpg/gif">
</TD>

Check out the following examples to see how it's done.

red No.1 One image in a simple table.
<table border="1" cellpadding="10">
<tr>
  <td>
    <img src="kangaroo.jpg">
  </td>
</tr>
</table>

red No.1 Image and text in the one TD cell.
Keep on rocking on.
<table border="1" cellpadding="10">
<tr>
  <td>
    <img src="kangaroo.jpg">
    Keep on rocking on.
  </td>
</tr>
</table>

red No.1 A bit more space with the image and the text in separate TD cells.
Keep on rocking on.
<table border="1" cellpadding="10">
<tr>
 <td> <img src="kangaroo.jpg"> </td>
 <td> Keep on rocking on. </td>
</tr>
</table>

red No.1 Play around and put a different image in each TD cell if you want.
jumping kangaroo
jumping kangaroo
<table border="1" cellpadding="10">
<tr>
 <td> <img src="kangaroo.gif"> </td>
 <td> <img src="kangaroo.jpg"> </td>
</tr>

<tr>
 <td> <img src="kangaroo.jpg"> </td>
 <td> <img src="kangaroo.gif"> </td>
</tr>
</table>


purple button Move your table around on your page.
PLEASE NOTE:
In the above examples you will see no colors if you are not using Internet Explorer 4 or above.

Center your table on your page!

Put it between the <center></center> tags.

<center>

<table border="1">
<tr>
<td> I am a centered table. </td>
</tr>
</table>

</center>



I am a centered table.

Another way to move your table around, is to put
align="left/center/right"
in your <TABLE> tag.

<table border="1" align="left">
<tr>
<td> I am a left-aligned table. </td>
</tr>
</table>


<table border="1" align="center">
<tr>
<td> I am a centered table. </td>
</tr>
</table>

<table border="1" align="right">
<tr>
<td> I am a right-aligned table. </td>
</tr>
</table>




The <table align left/center/right> tag is not all that reliable.
Use the align command in your <TD> tag whenever possible.

purple button Add a dash of color to your table.

Change your table's background color by using : BGCOLOR="color hex code/color name".

I usually put the color command in my table's <TR> tag to alter the color of the whole row, or in the table's <TD> tag to change the color of a single cell.

Have a look at the following example to see what I mean.

A happy life includes:
Good food! Good sleep! Good love!
<table border="1" cellpadding="5">
<tr bgcolor="#ffffcc">
 <th colspan="3">
    A happy life includes:
 </th>
</tr>

<tr>
 <td bgcolor="#ccccff"> Good food! </td>
 <td bgcolor="#ffcccc"> Good sleep! </td>
 <td bgcolor="#ccffcc"> Good love! </td>
</tr>
</table>

Note: With some of the newer browsers, you can use <table bgcolor="?"> to change the entire table's color and <table bordercolor="?"> to change your table's border color. I tend to stick with <tr bgcolor="?"> and <td bgcolor="?">. This way I know that my tables will be more compatible with most people's browsers.


purple button Make a thick colored line using tables.

Tables can be used to make colored lines easily. if you put BGCOLOR="?" in your <TR> or <TD> tag, and you put a period between your <TD></TD> tags.

<table width="250">
<tr bgcolor="#cc0000">
 <td>.</td>
</tr>
</table>
Solid red line.

.
<table width="250">
<tr>
<td bgcolor="#cc0000">.</td>
<td bgcolor="#ff6600">.</td>
<td bgcolor="#0033ff">.</td>
<td bgcolor="#ffff00">.</td>
</tr>
</table>
More <TD> cells for a multicolored line.

. . . .

TAKE NOTE:
purple pin If you don't set your table's width, your line will be 'dot sized'!
purple pin If you forget to put a period between your <TD></TD> tags, you can see your lines in Internet Explorer 4+ but not in Netscape Navigator.
purple pin You can also change the thickness of your lines by putting height="?" in the table tag like this. - <td height="10">
But, if you do this, DON'T put a period. Put small graphic between your <TD></TD> tags.