Don't know about you guys but I'm wrecked. It's much harder explaining this stuff than I thought. Hope I'm doing ok. Ok now onto the last html tags we'll look at before we move on to Scripting. Lists, Divisions and Tables. Lists are easy-peasy. We'll look at them in a moment so I'll deal with a tickler of a problem now. You see technically Tables are only to be used for displaying tabulated data (that is data in a table such as you would see in a spreadsheet). They aren't to be used for layout but some people have developed sites which use tables as a fix, a quick and easy way of positioning text and pictures. If I was being good I should tell you to ignore them completely and just teach you the <div> tag but I love tables. They make life so easy, especially later on when we look at scripting. So here goes nothing.
The <table> tag is really a bit more complicated than the other ones we've looked at. Firstly it's actually three tags, not just one. There's the <table> tag which says this is a table. It has certain attributes which we'll look at in a minute. (Technically seeing as I was crowing about CSS just two lessons ago we should ignore attributes and just use style sheet specifications but it makes life easier as you'll see in a minute). Then the <tr> tag which says this is a row of the table and finally the <td> tag which says this is a data item of a row of the table. <td> can only exist inside <tr> tags and <tr> tags can only exist inside <table> tags. Like I said it's complicated. Maybe an example would help.
We'll design a simple timetable. We have a student who has two classes, CS4201 and CS4202. He goes to college Monday to Friday and has two lectures in each subject, two tutorials and 1 lab in CS4201. No what we need here is a 3x6 table (3 rows and 6 columns). The first row will hold the days of the week, the next row the assignments for CS4201 and the last row the assignments for CS4202. Try this on your own. the table should look like this:
| Day | Mon | Tue | Wed | Thu | Fri |
| CS4201 | Lecture: 0900-10:00 | Lecture:09:00-11:00 | Lab:13:00-15:00 | Tutorial:16:00-17:00 | Tutorial:16:00-17:00 |
| CS4202 | Tutorial:14:00-16:00 | Tutorial:15:00-16:00 | Lecture:10:00-12:00 | Lecture: 12:00-13:00 |
Bit boring looking isn't it? Let's make it easier on the eye anyways. In the <table> tag the attribute 'border=' set the thickness of the lines around the boxes. If it isn't mentioned the 'border=0' is assumed. Let's set it to one.
| Day | Mon | Tue | Wed | Thu | Fri |
| CS4201 | Lecture: 0900-10:00 | Lecture:09:00-11:00 | Lab:13:00-15:00 | Tutorial:16:00-17:00 | Tutorial:16:00-17:00 |
| CS4202 | Tutorial:14:00-16:00 | Tutorial:15:00-16:00 | Lecture:10:00-12:00 | Lecture: 12:00-13:00 |
Still not much is it? Let's center the table and then the text. To center the table we use the 'align=' attribute of the <table> tag. To center the text we use the 'align=' attribute of the <td> tag. Text/Tables can be aligned left, right or center by setting 'align=' to center/left/right.
| Day | Mon | Tue | Wed | Thu | Fri |
| CS4201 | Lecture: 0900-10:00 | Lecture:09:00-11:00 | Lab:13:00-15:00 | Tutorial:16:00-17:00 | Tutorial:16:00-17:00 |
| CS4202 | Tutorial:14:00-16:00 | Tutorial:15:00-16:00 | Lecture:10:00-12:00 | Lecture: 12:00-13:00 |
"More" I hear you say. Ok let's make lecture boxes yellow, tutorials lightgreen and labs lightblue and the headings grey (#F5F5F5). "How?" you ask. Just set the 'bgcolor=' attribute of the <td> tag to the appropriate color. Your table should look like this:
| Day | Mon | Tue | Wed | Thu | Fri |
| CS4201 | Lecture: 0900-10:00 | Lecture:09:00-11:00 | Lab:13:00-15:00 | Tutorial:16:00-17:00 | Tutorial:16:00-17:00 |
| CS4202 | Tutorial:14:00-16:00 | Tutorial:15:00-16:00 | Lecture:10:00-12:00 | Lecture: 12:00-13:00 |
Much better. Now at a glance they can see if it's a lecture, lab or tutorial. Mess around with this and see if you can come up with a more useful format. Maybe days along the side, hours on top and class-id in the box. For those of you who weren't able to work out the code for the table here it is:
- <table border="1" align="center">
- <tr>
- <td align="center" bgcolor="#F5F5F5">Day</td><td align="center" bgcolor="#F5F5F5">Mon</td><td align="center" bgcolor="#F5F5F5">Tue</td><td align="center" bgcolor="#F5F5F5">Wed</td><td align="center" bgcolor="#F5F5F5">Thu</td><td align="center" bgcolor="#F5F5F5">Fri</td>
- </tr>
- <tr>
- <td align="center" bgcolor="#F5F5F5">CS4201</td><td align="center" bgcolor="yellow">Lecture: 0900-10:00</td><td align="center" bgcolor="yellow">Lecture:09:00-11:00</td><td align="center" bgcolor="lightblue">Lab:13:00-15:00</td><td align="center" bgcolor="lightgreen">Tutorial:16:00-17:00</td><td align="center" bgcolor="lightgreen">Tutorial:16:00-17:00</td>
- </tr>
- <tr>
- <td align="center" bgcolor="#F5F5F5">CS4202</td><td align="center"> </td><td align="center" bgcolor="lightgreen">Tutorial:14:00-16:00</td><td align="center" bgcolor="lightgreen">Tutorial:15:00-16:00</td><td align="center" bgcolor="yellow">Lecture:10:00-12:00</td><td align="center" bgcolor="yellow">Lecture: 12:00-13:00</td>
- </tr>
- </table>
Note: The <table> tag also has a 'bgcolor=' attribute which sets the default background color of the table. Setting the <td> 'bgcolor=' attribute overrides the default color for that cell.
Something you may have noticed is that each row must have the same number of cells. If you leave some out i.e. have different number of cells in each row, the browser will take the largest number and fill out the others. This can look extremley bad so be careful when designing your table. To make a cell span 2 or more cells use the 'colspan=' attribute to make it span a column, i.e. across, and 'rowspan=' attribute to make it span rows, i.e. down. Just set the attribute to the number of cells you wish to span. If you use rowspan or colspan remember that you need to define less cells. Here's an example:
| Spanning down | Spanning across | Not spanning | |
| Not spanning | Not spanning | Not spanning | |
Last few things with tables. They have other attributes that come in handy later on.
- width [sets the width of the table, set as a percentage of the windows width]
- height [sets the height of the table, set as a percentage of the windows height]
- background [sets the background image of the table, set as a location like the 'src=' attribute of the <IMG> tag]
- cellspacing [sets the space between cells and rows, set as a number 0-7, default is 1]
- cellpadding [sets the space between cell data and the edge of the cell, set as a number 0-7, default is 1]
Note: the <td> tag shares some of these attributes. Experiment and see what you come up with. Now I've actually waffled on about tables so much we'll have to start a new lesson to deal with lists and division. See you there.