Site hosted by Angelfire.com: Build your free website today!

TABLE TAG : Part 1

Dearest, this week, we'll start one of the most useful and important tag in html, that is the "table" tag. With this tag, you can do many things, such as to align some paragraphs, to organize images in a page, to create labels, or just simply, to create a table. This tag may look confusing to beginners, coz it's very complicated for big tables and requires a lot of related tags. So I'll try to teach u in the simplest way as possible, just like the way I learned it.
Forget what the computer books may teach you, coz more than often they end up confusing u more. Or forget the computer programs like FrontPage or other table-makers, coz they will create tables for you without u learning much. ;) So from this page, we'll learn the "table" tags the Jordy way, hehe, that is the HARD way. ;p But, it is also the way that u can actually understand the tag and learn sth. ;) OK, lets start~!

Firstly, let's remember three important points that you must have in every table tag:
(1) Every table will start from the "table" tag and end with "/table" tag. It's very common mistake that ppl will forget to end it. So, in all cases, after typing the starting tag, also type the ending in advance.
(2) Inside every "table" tag, the next tag is the "tr" tag, and it will end with "/tr"(one pair). Ppl tend to miss this also. "tr" means table row. It is used to create rows. It's related to table tag, and can be used for tables only.
(3) Inside every "tr" tag, the next tag is the "td" tag, and it will end with "/td". Ppl tend to miss this also. "td" refers to the table data. It is used to create columns. You can also use "th" to replace "td", but I suggest u stick to using "td" more. "th" is table header, used in the same manner as any header. Both are related to table tag, and can be used for tables only.

OK, now for some examples:

NOTE: You really have to view the coding together with this page to understand how the tables are done. I know that it wil take a long time to view both, so you better save this page as (.html) like I taught in email, then print the codings out to study both at home. Saves internet money. ;)

This table below is the most basic of all tables. It contains only one row and column. Take note that there's only one pair of "tr" and "td". Also, I put in the table tag the attribute "border=1". It's the minimum for a border and can increase. If you put "border=0", then no border will come out.
Hello


This table below contains one row and two columns. There's 1 pair of "tr" but 2 pairs of "td".
Column 1Column 2


This table below contains two rows and four columns. There're 2 pairs of "tr" and 4 pairs of "td".
Row 1, Column 1Row 1, Column 2
Row 2, Column 1Row 2, Column 2


This table below contains two rows and four columns. There're 2 pairs of "tr" and 4 pairs of "td". You can increase the rows and columns by adding the "tr" and "td" tags.
Row 1, Column 1Row 1, Column 2
Row 2, Column 1Row 2, Column 2


This table below contains two rows. First row has 2 columns and second row has 1 column(second row has only one "td" pair). Take note that I added the word "colspan" in the second row's "td" tag. "colspan" means that the number of columns in another row that one column(or "td") can hold. If "colspan=5", that means the column(that has the "colspan" word) can hold 5 other columns in another row.
Row 1, Column 1Row 1, Column 2
Row 2, 1 Column holding the above 2 columns

Another example:
Row 1, Column 1Row 1, Column 2Row 1, Column 3
Row 2, Column 1 holding the above 2 columnsRow 2, Column 2 holding the above column


This table below has 2 rows. First row first column holds "first row second column that has 2 rows" and the second row first column holds "second row second column". Take note that I added the word "rowspan" in the first row's "td" tag. "rowspan" means that the number of rows in another column of the table that one column can hold. If "rowspan=3", that means the row(that has the "rowspan" word) can hold 3 other rows in another column of the table. Take note of the "tr" tags, where and how they are placed.
This column hold 2 other columns beside.Column 1
Column 2
Column 1, second rowColumn 2, second row

Another example:
This column holds 3 other rows beside.Column 1
Column 2
Column 3
This column holds 2 other rows beside.Column 1
Column 2


This table below uses both the "rowspan" and "colspan" attributes in the "td" tags. Take note where they are placed. Take some time to study it before u proceed to the other tables. ;)
This column holds 3 other rows beside.Row 1, holding 2 columns below
Row 2, Column 2aRow 2, Column 2b
Row 3, holding the above 2 columns
This column holds 2 other rows beside.Row 1, Column 1
Row 2, Column 2aRow 2, Column 2b


OK, you've just learned the basic things in a "table" tag. Is it ok so far Cloudy? Hik, take it slowly, u'll see how easy it'll be later~! ;p Now let's proceed to Tutorial 4b, more on the "table" tag. ;)
Anh Yêu Em