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.
<<>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.
|
| |||||||||
<<>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%<>>
| |||||||||
<<>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<>>
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."
|