Unchangables in Blue
Changables in Red
These work fine in IE 5.5+, Google Chrome 4, Opera 8+ & Firefox 1.5 unless otherwise stated.

The <TABLE> tag begins and end the table with the </TABLE> tag. To begin adding contents to your table, you will need the <TD> tag. This stands for table data, you also end a table data with the </TD> tag. Here is a basic table with just one cell:

<table>
<tbody>
     <tr>
           <td>
This is my table!</td>
     </tr>
</tbody>
</table>

The table will turn out like this:

This is my table!

Global Definitions.

First, let us create some global definitions for our tables, so here is a style that defines the text font, color, size, weight and decoration for each cell.

<style>
td {font-family: verdana, arial, sans-serif; font-size:25px; font-weight:bold; text-decoration:none;}
</style>

This goes in the <head> -- </head> tags of your document.

TableBorders.

To put a border around a table we inside the <TABLE> tag simply add this code border="1" You can set the border to be as big or small as you like by changing the number inside the quote marks. If you set it to border="0", your table will have no border around it. For the border colour add borderColor="#00ff00" (lime) to add background colour add bgcolor="#0000ff" (blue) to change the alignment we add align="center" this can be either right, left or center, so this <table width="100" align="center" border="4" borderColor="#00ff00" bgcolor="#0000ff" > will give us this.

 

However it seems that some latter browsers Don’t recognise the borderColor command (IE10 is one of them) so I would suggest that you need to use the style="border: 15px outset lime" tag instead. Nevertheless the bordercolorlight and the bordercolordark still work but who knows for how long; so thats what I used for the next table using the same colour for each: #33ff66.

Now that is a very basic table now to fancy it up a bit first we can give it an inner border by adding cellspacing="4" to the <table> tag to give us this.

 

NOTE:CellSpacing in IE comes out in the form of a line in the colour of your border but in Opera 8+, Google Chrome 4 & Firefox 1.5 it comes out as an indent.

In a table we can add colour styles to each individual border by:
<table style=“border-left-color:lime; border-top-color:red; border-right-color:cyan; border-bottom-color:black”>

 

This also no longer works in IE10


NOTE:This works in IE 5.5+ & Opera 8+ but Does Not Work in Firefox 1.5+ & Google Chrome 4.

Now we could give the border a two tone colour pattern by removing bordercolor="#ff0000" replacing it with bordercolorlight= "#33ff66" bordercolordark="#990000" and that would give us this affect . NOTE: This only works in IE.

Please note how the text is sitting flush against the border.

We'll need to fix that problem by adding cellpadding="6" to our <TABLE> tag. So <table width="510" border="10" bordercolor="#ff0000" cellspacing="2" cellpadding="6" align="center" bordercolorlight= "#f4dcaa" bordercolordark="#e9b852" bgcolor="#ffffff" > gives us this table.

So now as you can see that the text sits nicely away from the borders and when the text has been justified it looks quite neat.

NOTE: the border color light & border color dark overrides the border color but in Firefox 3+ & Google Chrome the border will be red.

Well this is looking quite good now but it is still looks very two dimensional so what we can do is add a style to it. There are two ways of doing this one we can put it in our <head> tags <style> td {border:15 outset red} </style> 15 being the size, outset being the border style and red the colour but this affect all tables on the page if only want to change one table you could do this that inside the <TABLE> tag simply add this code style="border:15 outset red". So now this <table width="600" align="center" cellpadding="10" cellspacing="0" bgcolor="#ffffff" style="border:15 outset red"> will give us this quite pleasing affect .

 Staff Notice 

Due to escalating costs, increased competition and a keen desire to stay in Business it is necessary to change our terms of employment.

It will now be necessary to do something called work in between the tea breaks, coffee breaks, lunch breaks, toilet breaks, smoking breaks, Etc, Etc, Etc.

It’s the management’s intention to call this The Work Break and asks that you put as much enthusiasm into this break as you do the others.

Thank you for participating.

The Management.

Table Border Styles

To get the affect in other browsers you have leave out the bordercolorlight and bordercolordark and put the colour in the Style like this: style="border:15px inset blue"

But this causes IE to show a black opposite border with inset, outset & groove. So of the seven styles you can have. (dashed, dotted, double, outset, inset, outset & groove) The ones that work best in all these browsers IE5+, Google Chrome 4, Opera 8+, Firefox 1.5+ are dashed, dotted, double & outset.

style="border:15px outset pink"

style="border:15px inset blue"

style="border:15px groove lime"

style="border:15px outset red"

style="10px double salmon"

style="border:5px dotted aquamarine"

style="border:5px dashed aqua"

Table Cells.

Up to now this was done with single cells and of course, you probably want the table to have more than one cell in it. To add another cell on the same line, just use the <td> tags again, like this:
<table border="3" bordercolor="#ff0000" bgcolor="#ffffff">
<tbody>
     <tr>
          <td>
This is cell one.</td>
          <td>
This is cell two.</td>
     </tr>
</tbody>
</table>

And now we have two cells:

This is cell one This is cell two

Thats great but what if you want to go to the next row? Well we use <tr> and </tr> the table row tags.
<table border="2">
<tbody>
     <tr>
          <td>
This is cell one. </td>
          <td>
This is cell two. </td>
     </tr>
     <tr>
          <td>
This is cell one on the new row. </td>
          <td>
This is cell two on the new row. </td>
    </tr>
</tbody>
</table>

Now there are two rows, each with two cells:

This is cell one. This is cell two.
Cell one on the new row. Cell two on the new row.

Cell Spacing & Padding

A liitle more about cellspacing=" " and cellpadding=" " commands
an example of both of these now. Let's say we added the cellspacing command to a table and set it to equal 12, like this:

<table border="2" cellspacing="12">

Now the table would look like this:

One Two
Three Four

If we used the cellpadding command and set it to 12, like this:
<table border="2" cellpadding="12">

Now the table looks like this:

One Two
Three Four

Of course, you can use both at once:

<table border="2" cellspacing="15" cellpadding="15">

Now the table looks like this:

One Two
Three Four

You can add just about anything you would like inside the cells. You can add links, images, headings, paragraphs and more.

Add Links

To put a link inside a cell, just place the link tag inside your <td> tags:

<td>
<a class= "SomeClass" href="http://www.SomeSite.org">
Go Here</a>
</td>

Now you will have a link inside your cell:

 

Mouse Overs

Now, within the table itself, we can define the mouse activity for links like this:

<table border="1" cellpadding="1" cellspacing="0" bordercolor="#000000" bgcolor="#ffff00">
<tbody>
     <tr>
           <td width="
155" onMouseOver="this.style.backgroundColor='#ff0000';" onMouseOut="this.style.backgroundColor='#ffff00';"> <div align="center"><a href="http://www.someSite.org"><font color="#000000"> Gary#8217;s Insights</font></a></div></td>
     </tr>
     <tr>
           <td width="
155" onMouseOver="this.style.backgroundColor='LIME';" onMouseOut="this.style.backgroundColor='#ff9933;"> <div align="center"><b><a href="http://www.someSite.org/Jokes.htm"><font color="#000000">Great Jokes </font></a> </b></div></td>
     </tr>
</tbody>
</table>

Note: that we have coded the onmouseout value to the original background color (ffff00) that we scripted in the table. This of course could be different but what this does is set a bgcolor value, change it on mouse hover, then return to our original color.

REMEMBER: Always, play around with these parameters so you will learn to get the effect which best suits your site. You can also combine this with the Rollover styles shown in the Styles Tute section of this site for some wacky fun color changes!

Insert Image

To insert a image into a talble we put the image tag inside the <td> tags. Like so: <td><img src="WhaleSwallowingJonah_XL.gif" alt="WhaleSwallowingJonah_XL.gif" title="Whale Swallowing Jonah" width="254" height="216"></td> to get this:

WhaleSwallowingJonah_XL.gif

You can always enhance it by adding a few more attributes. Like: <table background="../Pics/Backgrounds/WaterAniBG.gif" width="310" border="1" align="center" cellpadding="15" cellspacing="0" bgcolor="#0000ff" style="border:15px outset #bd0000">

ManateeMotherBabySwimming_Big.gif

 

Images as Table Borders

Here’s how to code a background image for a table, using the table tag's Background attribute.

<table width="194" background="Hot.jpg">
<tbody>
<tr>
<td height=10 colspan=3>&nbsp;
( a space)</td>
</tr>
<tr>
<td width=6></td>
<td width="151" bgcolor="#ffff00">
<div align="center"><b>"<font size="4" face="Georgia, Times New Roman, Times, serif">
Table Content</font>"</b> </div></td>
<td width=21></td>
</tr>
<tr>
<td height=10 colspan=3>&nbsp;</td>
</tr>
</tbody>
</table>

 
"Table Content"
 

 

Captions, Headers and Footers

The Table Captions works in IE 5.5+, Google Chrome 4, Opera 8+, Firefox 1.5+.

<caption>...</caption> A CAPTION element may be placed only inside a TABLE element immediately after the <TABLE> tag. It denotes the text to be used as a caption for the table. A caption applies to the entire table, whereas a table heading <TH> applies to a single column or row in the table. Only one CAPTION element is recognized within a Table.

<tbody>...</tbody> A TBODY element consists of one or more rows of table cells. You can have more than one TBODY element defined within a single TABLE element. The TBODY element is used to define structural segments of a table that can require their own styles or borders. A TBODY element is the row-oriented equivalent of the COLGROUP element for columns. Other types of row groupings available are the TFOOT and THEAD elements, neither of which should overlap a TBODY element.

<thead>...</thead> A THEAD element is a special-purpose container of one or more rows of table cells rendered at the top of the table. No more than one THEAD element for Rows or Columns may be defined within a single TABLE element and the THEAD element should be located in the source code imediately after the TABLE element's start tag unless you have a CAPTION tag then it follows that. You are free to use any combination of TD and TH elements you like within the THEAD element.

<tfoot>...</tfoot> A TFOOT element is a special-purpose container of one or more rows of table cells rendered at the bottom of the table and typically, it mirrors the THEAD element content for users who have scrolled down the page. No more than one TFOOT element may be defined within a single TABLE element and the TFOOT element should be located in the source code after the THEAD element and before any TBODY elements are defined in the table. A TFOOT element is a row grouping, like the TBODY and THEAD elements.

Firstly we can add a caption to them by directly under the <TABLE> tag you write <caption>Sales for Intercorp</caption>. There are 4 ways to align a caption and these are Top, Bottom, Left and Right we do this by putting this align="top" in the tag like this <caption align="top">

Secondly we can add a header to the columns by adding a
<th> tag and inside that tag add scope="col". You will need one for each column and should look something like this <th scope="col">Month</th>, now using the scope tag we can give headers to the rows as well by changing it to scope="row" so a row tag should look like this <th scope="row">Jan</th> you can have one or both of these in you table. We also add a footer in the same way.
NOTE:
Both of these automatically center and bold themselves.

Lastly there is one more this every table should have and that is a summary. This is put into that <TABLE> tag like this: <table summary="This is a table containing sales for Intercorp from January to May"> This is good if you reading a page in code form as it allows you see immediately what the table is about. So if we put this all together we like this:

<table width="600" align="center" cellpadding="4" cellspacing="0" style="border:15px outset blue" summary="This is a table containing sales for Intercorp from January to May">
     <caption align="
top" style="filter:shadow(color='maroon', strength='8')"> <font size="6"><b>Sales for Intercorp</b></font> </caption>
<thead>
     <tr>
          <th scope="
col">Month</th>
          <th scope="
col">Sydney</th>
          <th scope="
col">Melbourne</th>
          <th scope="
col">Total Sales</th>
     </tr>
</thead>
<tfoot>
     <tr>
          <th scope="
col">Month</th>
          <th scope="
col">Sydney</th>
          <th scope="
col">Melbourne</th>
          <th scope="
col">Total Sales</th>
     </tr>
</tfoot>
<tbody>
     <tr>
          <th scope="
row">Jan</th>
          <td>
$31,345</td>
          <td>
$28,546</td>
          <td>$59,891</td>
     </tr>
     <tr>
          <th scope="
row">Feb</th>
          <td>
$28,345</td>
          <td>
$21,349</td>
          <td>
$49,694</td>
     </tr>
     <tr>
          <th scope="
row">Mar</th>
          <td>
$35,453</td>
          <td>
$30,234</td>
          <td>
$65,687</td>
     </tr>
     <tr>
          <th scope="
row">Apr</th>
          <td>
$21,457</td>
          <td>
$34,456</td>
          <td>
$55,913</td>
     </tr>
     <tr>
          <th scope="
row">May</th>
          <td>
$31,345</td>
          <td>
$28,561</td>
          <td>
$59,906</td>
     </tr>
</tbody>
</table>

Sales for Intercorp
Month Sydney Melbourne Total Sales
Month Sydney Melbourne Total Sales
Jan $31,345 $28,546 $59,891
Feb $28,345 $21,349 $49,694
Mar $35,453 $30,234 $65,687
Apr $21,457 $34,456 $55,913
May $31,345 $28,561 $59,906

ENJOY YOURSELF

Well thats all I know about tables. Pray it helps.

May you always find peace in your life.
See ya,
Gary.

 

 

BlueBar.gif


Visitor N°
Free Text Counter.
Counter added 05/02/2014.

Top