 |
|
Fancy writing your own webpage? Look no further than here. If you want lessons 1 to 8, the've been archived. Click "Lessons 1 to 4" or "Lessons 5 to 8" to see them.
YOU WILL NEED
The thing in brackets is the thing I use.
An ordinary text editor (Notepad)
An internet browser (Internet Explorer 5)
An ISP (Freeserve)
An FTP program (WS FTP - free to students, website here)
As chapters become available, the link colour will change from blue to that sort of dark indigoey color:
- Intra-page links
- Lesson 13: The Graphics Grind Part 3
- Lesson 14: Triffic Tables Part 1
- Lesson 15: Triffic Tables Part 2
- Lesson 16: Musical Mayhem
- Lesson 17: Amazing Marquees
- Lesson 18: Jumpin' Javascript
- Lesson 19: Get a Little Extra Help
- Lesson 20: Scringing for Search Engines
- Lesson 21: Take a long hard look...
- Inter-page links
Lesson 13 is coming later
LESSON 14: TRIFFIC TABLES PART 1
Tags you will learn in this lesson:<TABLE> and </TABLE>
<TR> and </TR>
<TD> and </TD>
<TH> and </TH>
The BORDER parameter
The BGCOLOR parameter
The COLSPAN parameter
The ROWSPAN parameter
Tables are one of the most powerful features of HTML. As well as creating... well, tables, you can organise your text into columns like a newspaper, box little titbits of information off to one side, structure your page headings (take a look at the one at the top on this page, for example), and all sorts of cool stuff. This spans two parts. In the first part, I show you the basics of table-making. In the second part, I show you the coolest use of tables - nested tables.
Okay, what to start with? Well first, a table needs to begin with the <TABLE> tag and end with the </TABLE> tag. Table information is added to your document row by row. Each row is begun with a <TR> tag and ends with a </TR> tag.
Every cell within a row is either a header cell (bold and centred text, tags <TH> and </TH>) or an ordinary data cell (<TD> and </TD>). For example, here is the code for a (very) simple table:
<TABLE BORDER>
<TR><TH>Name</TH><TH>Phone Number</TH></TR>
<TR><TD>J. Bloggs</TD><TD> 0123 456789</TD></TR>
<TR><TD>T. Atkins</TD><TD> 0123 987654</TD></TR>
<TR><TD>B. Birmingham</TD><TD> 0123 345345</TD></TR>
</TABLE>
And here's what that table looks like in a browser:
| Name | Phone Number |
|---|---|
| J. Bloggs | 0123 456789 |
| T. Atkins | 0123 987654 |
| B. Birmingham | 0123 345345 |
You may have noticed I also included the BORDER parameter in the <TABLE> tag. Without it, our table would have looked like this:
| Name | Phone Number |
|---|---|
| J. Bloggs | 0123 456789 |
| T. Atkins | 0123 987654 |
| B. Birmingham | 0123 345345 |
Some people like borders, some don't, but it depends of the situation. My guideline is: use borders when you want people to know it's a table, don't use them when you don't.
There are a couple of other parameters to cover: BGCOLOR is the background color of the cell, row or table (depending on which tag you place the parameter in. COLSPAN = x is when you want a cell to cover x columns (for example to divide two sections of a table), ROWSPAN = x to cover x number of rows.
That's the basics. But tables are a big topic. You ain't seen nothing yet!