learning html quickly and easily for free. Using tables: How do I align graphics, images, or text horizontally? Putting images in a box formation. Saving space on your web pages.

Learning html
quickly and easily for free.
HTML Tables.

Topics on this page.
Using tables: How do I align graphics, images, or text horizontally? Putting images in a box formation. Saving space on your web pages.

The reason you would create a table for is to be able to align certain blocks of text or images side by side or in a box form. This is a great way to utilize space on your page, and make your web pages look more professional.

For instance...If you had 2 paragraghs that you wanted to seperate...
Example...

This is one of the paragraghs
that I want to place on my page.

This is the 2nd paragragh
I would like to place on my page,
and ofcourse I want them to be
seperated.

This is what it would look like in normal format.
But what if I wanted to set the two paragraghs side by side? So I can utilize more of my page.
That's where a table would work nicely.
Example...

This is one of the paragraghs
that I want to place on my page

This is the 2nd paragragh
I would like to place on my page,
and ofcourse I want them to be
seperated.

How'd he do that?
Here are the basic tags for creating a table...
<table>
<tr>

<td>This is one of the paragraghs
that I want to place on my page.</td>

<td>This is the 2nd paragragh
I would like to place on my page,
and ofcourse I want them to be
seperated.</td>

</tr>
</table>

Or if you wanted to line up images horizontally across your web page and in rows.

ex....

This is the html code for the image table above....

There are many things you can do with a table...

For instance if you wanted to change the background color of the entire table you would use this...

<table bgcolor="green">
remember that you can compile attributes as well...
<table bgcolor="green" cellspacing="0" cellpadding="0" border="0" width="50%">

Here are some other tags and attributes that work with tables...

<table border="#"> This determines the border width around the entire table.
<table width="%"> Determines the width of the table in percetages.
<table cellspacing="#"> Determines how much space is between the cells in the table.
<table bgcolor="red, blue, etc..."> Determines the background color of the table.

<td align="left, center, or right"> Sets the alignment of cells.
<td valign="top, middle, or bottom"> Sets the vertical alignment for cells.

<td colspan="#"> Sets the number of columns a cell spans.
<td rowspan="#"> Sets the number of rows a cell spans.
<td bgcolor="red, green, teal, etc..."> Determines the back ground color of each cell

There are more, but that should get you started.

Ok...here is a larger table...and remember that you can put anything that you want into tables...text, graphics, hyperlinks, banners, etc...
example...
Table

cell 1	cell 2		cell 3... the boxes will accomadate your size requirements.
	cell 1a	cell 2a	cell 3a... you can pretty much put as much as you want in these boxes.

If this site
has helped you at all...
Please add a link to us. from your web site.

Next Page...FRAMES.

24 Hours a Day - 7 Days a Week!!!

Now you can make your HTML learning experience much quicker and easier by joining our HTML Tutorial Club.
For only $20.00 a week, you can ask as many questions as you like and converse with Web Design Experts.
Try it out and get 1 Day FREE.
All Web Design questions answered within 24 hrs.