Apollo's
HTML Help
Aligning images using Tables


Like most things, using tables can be easy or complex. And, like most things on my site, i am going to show you the easy way first.

There are 3 main tags that you will need to remember to make a table. they are:

<<>table<>>which is the main tag that is placed at the beginning of your table code. (this also has a closing tag, <<>/table<>> placed at the very end of the table code)

<<>tr<>> which is the code used to start a row of either images or text (<<>/tr<>> is placed at the end of each row)

<<>td<>> which is the code used to start a cel of either images or text. Cells are the number of boxes placed in a row. That is where images and text are placed. (<<>/td<>> is placed at the end of each cell)

Below, i have an example of a very basic table that can be made. I added a background color to the table so that it would show up better. This is optional. If you do not add a background to the table, it will be transparent. You can also add a gif or jpg background using background="http://url of background" in the table tag like this:


<<>table background="https://members.tripod.com/~mintcar/tiss2.gif"<>>

Below the table is the coding i used to make the table.







hi hello how are ya'
hey sooo... la la la
hmmmm... yup... uh hu..

<<>center<>><<>table bgcolor="white"<>>

<<>tr<>><<>td<>>hi<<>/td<>><<>td <>>hello<<>/td<>><<>td<>>how are ya'<<>/td<>><<>/tr<>>

<<>tr<>><<>td<>>hey<<>/td<>><<>td<>>sooo...<<>/td<> ><<>td<>>la la la<<>/td<>><<>/tr<>>

<<>tr<>><<>td<>>hmmm...<<>/td<>><<>td<>>yup...<<>/td <>><<>td<>>uh hu...<<>/td<>><<>/tr<>>

<<>/table<>><<>/center<>>

Note that i centered the table by adding <<>center<>> before the code and <<>/center<>> after the code. This can be done with any image so that you can center it without making a table. Tables should only be used for those who want to align more than one row of images or text or if they want their images and text to be spaced out further.

Above, i changed the color of the text by adding <<>font color=blue<>> before each word. If you want to align images instead of text, remove the <<>font color="color"<>> and the words, and put <<>img src="http://url of image"<>>

You can also add a border around your tables by adding border="15" or any number in the table tag like this:

<<>table border="10" bgcolor="white">

If you want the words to be centered withing each cell, you must add align="center" in the td tag like this:

<<>td align=center<>>

You can also use that to align images to the left or right of a cell by replacing center with left or right.

If you want a text or image to be at the top or bottom of a cell, simply add valign=top or bottom like this:

<<>td valign=top<>>

There is no need to use valign=middle since that is an automatic default

You can also specify a height or width to your table by using this:

<<>table height=120 width=75%<>>
Once you have added the above options, your table will look like this:


see... you can
align text any way you want


<<>center<>><<>table border=15 background="https://members.tripod.com/~mintcar/tiss2.gif" height=120 width=75%<>>

<<>tr<>><<>td align=left<>>see....<<>/td<>>

<<>td align=center<>>you<<>/td<>>

<<>td align=right<>>can<<>/td<>><<>/tr<>>

<<>tr<>><<>td valign=top<>>align images<<>/td<>>

<<>td valign=middle<>>any way<<>/td<>>

<<>td valign=bottom<>>you want<<>/td<>><<>/tr<>>

<<>/table<>><<>/center<>>
Well, that's tables in a nut shell. If you want to learn more about tables, visit my main page and select a link from the list at the bottom of the page.

Now that you know a little more about HTML, it's time to put it to use. Be creative. Try different things. Experament. As I said in the intro. to my page, "Just about anything can be done using HTML."





Back to the Main Page
What is HTML?
HTML Tags
Where do I put codes?
Examples of Codes
Examples of Links
Where do I make banners?
Put my banner on your email
Put voice on your page
Transloader Help
Apollo's Validator
Apply for the Apollo HTML Award