Tables

Today’s lesson is on tables. Tables are great for inserting data in a columnar format. Tables have been used in the past for formatting a page by using it to make things like sidebars, headers and footers; basically just to break up the page.

So, if you want to put data in a page or put stuff on in a columnar format, this is what you do:

<table>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>

That’s a basic table and will look like this:

Data 1	Data 2
Data 3	Data 4

Table Headings

Now you have the idea. I’ll explain the tags a little. Table is simple, it says you are making a table. The <tr> (table record) tag said you are making a row of data and each of the <td> (table data) entries nested in that <tr> tag falls in that row (you can see by how the 1 and 2 are on the same line). You can specify things like column or row headings with the <th> (table heading) tag like so:

<table border="1">
<th>Column 1</th>
<th>Column 2</th>
<tr>
<td>Data 1</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 2</td>
<td>Data 4</td>
</tr>
</table>

Here it is:

Column 1	Column 2
Data 1	Data 3
Data 2	Data 4

You can set it up for making the headings show up on the row instead of the top by inserting the headings just below the <tr> and above the first <td> tag for each row. Ok so ow not only do we have column headings, but I rearranged the data so that the 2 fell under the 1 and 4 under 3. If I want a border I’ll do like I did above and insert a border attribute and I set it to 1. You can put any number you want, as higher numbers will make the border thicker.

Now just a quick comment on the border attribute. This has been depreciated in XHTML. I only include it for lesson presentation purposes. Tables present information in a functional manner and as such belong in HTML. Borders are purely presentation (to dress the table up) and should really only be in CSS. So please do not use this in your pages if or when you decide to publish them. In fact, get in the habit of not doing it outside of this lesson. I’ll hit more on how to do this later in the CSS lessons.

Cell Merge

Ok, now what if I want to make a column or row that spanned the width of multiple columns or rows (a.k.a. cell merging)? It would look like this:

<table border="1">
<th colspan="2">Column 1/2</th>
<tr>
<td>Data 1</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 2</td>
<td>Data 4</td>
</tr>
</table>

Column 1/2
Data 1	Data 3
Data 2	Data 4

Or:

<table border="1">
<caption>My Table</caption>
<th>Column 1</th>
<th>Column 2</th>
<tr>
<td rowspan="2">Data 1/2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
</tr>
</table>

This is the result:

My Table

Column 1	Column 2
Data 1/2	Data 3
	Data 4

So the colspan (column span) attribute makes the data in that element span across columns and rowspan across rows. The number of course being the number of rows and columns you want it to span, so you have to plan your data accordingly. I suggest writing it out on paper first so you have an idea of how you want your table to look before coding. Also notice the <caption> tag, this gives a title to your table as you can see.

There’s so much more you can do with tables as far as formatting goes (cell padding, font, alignment, etc.), but that is best left to CSS. Again, do not use tables to format your page, that’s a big no-no in XHTML and eventually when HTML 5 comes out to replace HTML 4.1, XML 1.0 and XHTML 1.0 altogether, it will be stricter and harder to get away with bad code.

Ok, that’s enough for today. I hope you enjoyed the lesson and I look forward to your feedback. The next lesson should be on tables and then we’ll try to put it all together before introducing CSS.

<<–  Back …  Next  –>>