HTML Basix - HTML tutorials and online webmaster tools


Htaccess code generators Code generators Tutorials

Online and offline code generators


Subscribe to RSS feed
Subscribe to the HTML Basix RSS feed.
Borders  width  cellpadding  background images  rowspan 
alignment  height  cellspacing  background colour  colspan 


HTML Tables


Huh? What's a table?

A table is one of these things:

 


Not much to look at huh...and why would you want one of those on your page??

How about if I show how else you can build a table:

   


Still not impressed? How about if I do this:

areyouimpressedyet?


You're a bit hard to please, aren't you?? Ok, I'll dig into my bag for some more party tricks.

areyounow???
impressed


Still don't get it? Look what else I can do...

Icanpictures!!
do


Go on, say it...so? Who cares? Who wants those ugly boxes on their website anyway? Let me show you another example...this time, I've made the table without a border:

Icanpictures!!
do


Ah, see...now you get it! By using tables, you can CHOOSE where you want stuff on your page, not just on the next line down. Makes it all a whole lot more interesting, huh. Got you thinking now, haven't I??


Yeah...but what's a table??

Tables are a very organised piece of work. Within each table, you have rows where your information goes. Each row is broken up into as many pieces as you want. These pieces are called 'table data'.

Tables can get very confusing sometimes...if they're not done exactly right, your page can end up all over the place. The first rule you need to remember is each table you build will have a row, or several rows...and each row has a data cell in which you place your data, or information. Computers are pretty stupid in that they need telling EXACTLY what to do (I guess you know that by now!!). As such, you have to understand how a computer reads a 'table'.

First of all, it sees a "<table>" tag, and knows it has to look for a "<tr>" (table row). Once it defines that there's a row, it then proceeds to display all of the "<td>" (table data) cells within that row. It displays the data cells in that row across the page until it hits a "</tr>" telling it that row is finished, and to look for a new one. If there's no new "<tr>" (table row) then it looks for a closing "</table>" tag.


So how do I do it?

This is where you need to put your thinking cap on. A basic table is set out like this:

<table>
<tr>
<td>
info goes here
</td>
</tr>
</table>
info goes here


You put the information you want in the table between the "<td>" and "</td>" tags.

If you want two or more cells of data in the one line, you add another set of "<td>" and "</td>" tags within the table row.

For two cells of data, you'd type it like this:

<table>
<tr>
<td>
info goes here
</td>
<td>
info goes here
</td>
</tr>
</table>
info goes here info goes here


You can add as many table data cells as you like, or as space permits. The next thing you need to know is how to do two rows of data. Notice the ending of a row with </tr> and the <tr> showing the start of the next one:

<table>
<tr>
<td>
row 1 cell 1
</td>
<td>
row 1 cell 2
</td>
</tr>
<tr>
<td>
row 2 cell 1
</td>
<td>
row 2 cell 2
</td>
</tr>
</table>
row 1 cell 1row 1 cell 2
row 2 cell 1row 2 cell 2


Within the table data cells, you can use the normal font size tags, font colour tags....they all work. If you want an image in one of the cells, instead of typing anything you'd just put your <img src=pic.gif> within the <td></td> tags.

<table>
<tr>
<td>
row 1 cell 1
</td>
<td>
<img src="smiley.gif">
</td>
</tr>
<tr>
<td>
row 2 cell 1
</td>
<td>
row 2 cell 2
</td>
</tr>
</table>
row 1 cell 1
row 2 cell 1 row 2 cell 2

You can see that the table will automatically adjust it's size to suit what's in it. You can fix what size you want the data cells if you like...that's covered in another lesson.


That about covers the basics on tables. There's a whole heap more to learn, you've only scratched the surface. For instance, you can add various attributes to the <table> and <td> tags that will help you get exactly what you want. The next lesson will cover how to place the data cells precisely where you want them on a page.



Site Stats     
VisitorsPageviews
Total: 8,545,626 Total: 22,922,166
Today: 937 Today: 2,833
Yesterday: 1,182 Yesterday: 4,003
Past Month: 36,642 Past Month: 124,093

1,255 visitors in the last 24 hours
This page has been visited 85,126 times
There are currently 10 visitors online
click to see where
most people online at once:
286 visitors on 06/27/2012
   You beaut











This site is © HTML Basix 2003 - 2009