Basics of HTML tables

***hot_ice*** · March 15th, 2002, 04:27 AM

Well, I posted the 'Basic HTML' thread and failed to mention tables, as Rioter pointed out. Well, I added the tags in for that post, but now I'll just go on to give a bit more detail to how tables work and some basic examples, as tables are very useful and you'll find them almost on all pages - AntiOnline has tables galore!!!!

Tags needed for basic table creation:
*****************************
opening tag...closing tag...some brief information

<TABLE>...</TABLE>...This defines the beginning and end of a table (you can have tables inside a table).
<TR>...</TR>...This defines the beginning and end of a Table Row.
<TD>...</TD>...This defines the beginning and end of the Table Data (basically like a cell in Excel).
<TH>...</TH>...Basically same as TD except it's emphasised (used for headings - but not important

As you can see, there aren't many different tags in tables, with simply the first three tags above (TABLE, TR and TD) you can create almost any type of template you can imagine in your head - the possibilities are endless.

Basic table example:
***************

Code:

<HTML>
<HEAD><TITLE>Basic Table Example</TITLE></HEAD>
<BODY>
<TABLE BORDER="1" CELLPADDING="5" CELLSPACING="0">
    <TR>
        <TD>First cell, row one</TD>
        <TD>Second cell, row one</TD>
        <TD>Third cell, row one</TD>
    </TR>
    <TR>
        <TD>First cell, row two</TD>
        <TD>Second cell, row two</TD>
        <TD>Third cell, row two</TD>
    </TR>
    <TR>
        <TD BGCOLOR="#d1d1d1">Cell with background color</TD>
        <TD COLSPAN="2"><CENTER>Spanning two columns</CENTER></TD>
    </TR>
    <TR>
        <TD ROWSPAN="2">Spanning two rows</TD>
        <TD>Second cell, fourth row</TD>
        <TD>Third cell, fourth row</TD>
    </TR>
    <TR>
        <TD>Second cell, fifth row</TD>
        <TD>Third cell, fifth row</TD>
    </TR>
</TABLE>
</BODY>
</HTML>

Explanation of example:
*******************
1. <TABLE BORDER="1" CELLPADDING="5" CELLSPACING="0">...this defines the beginning of a new table.
You can simply have it just as <TABLE>, but I included the BORDER, CELLPADDING and CELLSPACING properties, as they are used often.
- BORDER, as it implies, defines the size of the border, setting this to "0" removes the border.
- CELLPADDING and CELLSPACING are confusing, but you'll get use to them when you use them often (I tend to forget which one is which)
* CELLPADDING defines how much room is between the border and your text inside the cell (or picture or other data).
* CELLSPACING is the amount of space between each cell (so it's like thickening the border)
(To best understand these, play around with this example, changing the properities of both CELLPADDING and CELLSPACING.

2. <TR>...this defines the beginning of a new row.

3. <TD>First cell, row one</TD>...this defines the beginning and end of a cell in the row defined above. Inside the cell will be the words between the tags.

4. <TD>Second cell, row one</TD>...same as above, except will move one cell to the right of the one above.

5. <TD>Third cell, row one</TD>...you can guess what this one does.

6. </TR>...this closes the row that was defined in step 2 above.

7. <TR>...this defines the beginning or a new row.

8. <TD>First cell, row two</TD>
<TD>Second cell, row two</TD>
<TD>Third cell, row two</TD>
</TR>...same as steps 3, 4, 5, and 6.

9. <TR>...the start of yet another row - this is the third one.

10. <TD BGCOLOR="#d1d1d1">Cell with background color</TD>...ok, something different - here, the backgound color of this cell (and only this cell) will be changed.

11. <TD COLSPAN="2"><CENTER>Spanning two columns</CENTER></TD>...here, this cell will be spanning 2 columns.
Pretty straight forward - if you put COLSPAN="3", it would span 3 columns. The text is also centered.

12. </TR>
<TR>...you know what this does by now - ends the existing row and starts a new one.

13. <TD ROWSPAN="2">Spanning two rows</TD>...similar to step 11, except this cell will span 2 rows.

14. <TD>Second cell, fourth row</TD>
<TD>Third cell, fourth row</TD>...if you've been following above, you should understand this. (text inside tags pretty much explains it anyways)

15. </TR>
<TR>...again, ending one row, beginning another.

16. <TD>Second cell, fifth row</TD>...now, you thinking why isn't this cell the 'first cell of the fifth row'? Well, remember how we did a ROWSPAN in step 13.?
Well, that cell with the rowspan, will fill 'first cell of row four and five'. Look at example (attached) - you can see it clearly there.

17. <TD>Third cell, fifth row</TD>...and obviously it moves one position right of the previous cell.

18. </TR>...ending the row.

19. </TABLE>...yay, defining that the table is now finished!!

OK, well, there it is, a very basic explanation of tables and some useful properties. Check out the example and try fiddling around with it.
Add some rows, some cells and see the result. With just these tags and properties, you can create much more complex tables, such as the ones on the AO front page.
Tables are a very powerful part of HTML.

Hope this helps some of you,
Greg

**psychosquee** · March 15th, 2002, 04:37 AM

You forgot to add the fact that under most browsers, you can also add the attribute of adding color to the borders...

<table bordercolor="ff0000" border="1"><tr><td>Hello</td></tr></table>
This will add change the color of the border... to red.

***hot_ice*** · March 15th, 2002, 04:56 AM

Yeah, but didn't want to add too much detail.

There's like plenty of attributes, such as changing the color of the cell background when the mouse rolls over it (onMouseOver="this.style.backgroundColor='#ff0000';"), etc. But all that is too technical, I'd probably make mistakes and look like a fool!

Greg

**SOCKBANDIT** · March 15th, 2002, 06:31 AM

if anyone needs such a hold your hand example of how to use html, perhaps they should consider not persuing an education in information security

**Gepeto** · March 15th, 2002, 08:14 PM

Anyone who is learning from this might want to read what I'll say in this comment. Don't use borders. IE makes them simple, netscape tries to make them "3d" and such, and most of the time it ruins everything. If you want a border, juste use 1pixel wide or high cells with a bgcolor of your choice!

Thread: Basics of HTML tables

Thread Tools

Display

Basics of HTML tables

Posting Permissions