Navigation
Poll
Would you be an active poster if Ron's Guide had a message board?


Total Votes: 62
Comments: 18 — View
Past pollsPoll idea?
Rate Ron's Guide
Rate our resource at Bigwebmaster.com
Organizing Data with Tables
Tables are extremly useful, they make things more organized and easy to read. This tutorial will get you started with tables.

Tables are extremly useful, they make things more organized, easy to read, and can save you some room on your page. Lets say you had two paragraphs something like this...

This is the first paragraph
I want on my page... This is the second paragraph
I want on my page...

How could you make the two paragraphs side-by-side? That's where tables are helpful...
You can set up a simple table to make the paragraphs side-by-side... For Example:

This is the first paragraph I want on my page... This is the second paragraph I want on my page...

Here's how I did that:
<table border="1">
 <tr>
  <td>This is the first paragraph I want on my page...</td>
  <td>This is the second paragraph I want on my page...</td>
 </tr>
</table>
You can also align images side by side and in rows:
<table>
 <tr>
  <td><img></td>
  <td><img></td>
  <td><img></td>
 </tr>
 <tr>
  <td><img></td>
  <td><img></td>
  <td><img></td>
 </tr>
</table>

There are many attributes that work with tables, Here are some of them that should get you started... Remember you can compile these Smile

These go inside the <table> tag
border="#" Determines the border width around the entire table.
width="%" Determines the width of the table in percentages.
height="%" Determines the height of the table in percentages.
cellspacing="#" Determines how much space is between the cells.
bgcolor="red, blue, etc..." Determines the background color of the table.

These go inside the <td> tag
width="%" Determines the width of the cell in percentages.
height="%" Determines the height of the cell in percentages.
colspan="#" Sets the number of columns a cell spans.
rowspan="#" Sets the number of rows a cell spans.
bgcolor="red, green, etc..." Determines the back ground color of each cell
align="left, center, or right" Sets the alignment of cells.
valign="top, middle, or bottom" Sets the vertical alignment for cells.

For the width an height attributes you can also you numbers (i.e height="250" width="500")

Discuss Tutorial: Organizing Data with Tables 10 Comments
Comment by Ron on Mar 16, 2004, 4:13 am
Please post questions or comments about this tutorial below. Smile
Comment by unsc on Nov 26, 2004, 9:54 pm
how do i make it so they arent side-by-side?
Comment by unsc on Nov 26, 2004, 9:55 pm
oops, sorry, as soon as i posted that i found out how Tongue
Comment by i dont understand on Jun 9, 2005, 2:08 pm
Crying Crying Crying Crying Crying Crying Crying Cryingi dont understand
Comment by Jester on Jun 26, 2005, 9:10 am
Hey thanks I have wanted to know the different meanings of the table HTML (i.e. width, cellspacing, etc) And now I know you can actually put images for headers and such.
Thanks Grin
Comment by Ariane on Jul 28, 2005, 11:49 pm
Did a Google search and couldn't find any really helpful sites, except yours!! Your site is a HUGE help!
Many thanks and God bless! Grin
Comment by Kira-Cup on Sep 12, 2005, 5:15 am
How do I get thinsg to move in info boxes?
Comment by Thatpissontheground.. on Oct 11, 2005, 10:15 pm
Its not that you don't understand its that you are... THATPISSONTHEGROUND, HIT IT TO ME BOYZ!!!
we got deathstar, we got deathstar, we got,,,,,,,deathstar. yea, we rockin' now bitch.
Comment by pho3nix.Child();™ on Mar 20, 2006, 2:33 pm
yo ron.. i'm trying to do a tutorial system with tables and i want to know how did you get your tables side by side with the gap in the middle... i mean you use single tables for each... but when i do it they just go under one another
Comment by Jear on Jul 15, 2006, 4:42 pm
yeah, ron. i've the same question with pho3nix.child. like how did you do it? i sooo want to do a layout like this, im new in creating websites. Grin i've always wanted to design my site with like 3 tables or whatever you call that. could you post a tutorial bout this ron. Grin will ya? Grin

« Previous [ 1 ] Next »
Post a comment
Sorry, you must be a registered member to post comments.

If you would like to register, you can do so here.
If you already have an account, please login.