I assume that if you are reading this tutorial you have MASTERED the first tutorial and can even problem solve your own mistakes. If this is not the case, please revisit it before you continue on this tutorial. This tutorial is intended to enhance your skills, not give you more ways to mess up. Assuming you read the last tutorial word for word, you should know to put a picture up, you need only remember 2 words, "image source", take out the vowels, and add a couple attributes to it. If this sounds like chinese or you are saying to yourself, "OOOOOH I get it now", please STOP, go back to Tutorial #1 and reread EVERYTHING. You are the only one responsible for your education, and you should be humble enough to know your faults and go back and fix them. Do not try to be brave and just think you'll get better with time, you have been given many hints so far, as you will in the future, but it is up to you to step up to the plate.
Tables will probably end up being the single most useful tool in Designing a website, from the layout of a whole page to the organization of information, a table is very useful.
<TABLE>
<TR>
<TD>
</TD>
</TR>
</TABLE>
Above is the format for a single cell table with no information in it. Try puting this between the body tags with a bare skeleton web page. Add some text between the TD tags as well, save and load the page in your browser.
You may now begin to use Crimson Editor on your computer to edit the html files (download it from download.com if you like), you will find that the line numbering as well as the coloring of tags will make things useful. Why did I not suggest you use this before? Simple, like many things in life, the best way to learn something is to begin with the harder tool, then progress to something that does much of the work for you. If I were to put you straight into a program that does the coding for you, how would you learn how to fix the problems? Soon you will be using even more tools to code for/with you, but please understand if you can't fix a problem now, there is no reason to continue.
Now, lets break down the table skeleton a little. Lets start with the TABLE tag. First of all, like MOST tags in HTML, you should ALWAYS end the tag with its / counterpart. Next, lets look at the many attributes you can use inside it.
here's an example:
<TABLE BORDER="1" BGCOLOR="RED">
What do you think this table might look like? How thick will the border be? What if I put 2 or 20 in the border attribute? Try it, find out by editting the table skeleton I gave you before.
Table Rows and Table Columns have many attributes. Many times a user would like the attributes for one column to be the same. For this, there is the tag COLGROUP. With this tag, which goes before the first row is defined, you can set attributes to each column in the order defined.
<COLGROUP WIDTH="100">
<COLGROUP ALIGN="CENTER">
Can you see here that all cells in the first column will have the same width, no more than 100 pixels, and the second column will be aligned to the center? You can define as many of these groups as you need for your table. This assumes much of your planning for the look of your table was handled before, as it should be.
The TR tag. TR Stands for Table Row. In case you don't know the difference between a row and a column, the rows go from left to right, like the lettered part of an Excel sheet. Only TD tags and what goes inside them should be in between the TR tag and its closer, but there are a few attributes that you can add to the tag.
<TR></TR>
<TR HEIGHT="20"></TR>
<TR VALIGN="TOP"></TR>
A Column is just the opposite of a row, instead of left to right, its the part of a table that goes up and down. There is no "TC" tag, however there is a TD tag, or Table Data as I like to think of it. Because the TD tag is used inside the TR tag, it is assumed that the data between the tags is column information. The TD tag can be very handy, and its attributes are good to know.
<TD ALIGN="RIGHT">Hello</TD>
<TD COLSPAN="3">Morning</TD>
<TD ROWSPAN="2">Cya</TD>
COLSPAN allows you to make 1 cell use up the space of 2 columns left and right. ROWSPAN lets you span 2 cells up and down.
Putting it all together
See if you can figure out the code to make a table look like this:
BORDER SIZE: 3 / BACKGROUND COLOR: RED
