HTML Tutorials IV :: Tables

In this lesson we will be covering HTML tables. Before going into the mark-up (i.e. the “code”¹), lets talk about the usefulness of tables and what they are. Tables used to be the preferred, premiere method of formatting web pages. They are extremely powerful and require less skill to create than the newer CSS (Cascading Style Sheets – more on these in the CSS tutorial). Although most professional designers use CSS, tables are a great way to dive into formatting.

So what is a table? Well, they are… wait, instead of telling you, I’ll show you.

<< This is a table row >>
/\
this is
a table
column
\/
This is a table cell This is a table cell
This is a table cell This is a table cell

As you can see, tables are composed of row and columns, which intersect to make cells. Lets go over syntax.

All tables begin with the <table> tag and ends with the </table> tag. This marks the “box” inside of which the table information is stored. This is similar to the lists we discussed last lesson, the <ol>, </ol> or <ul>, </ul> tags mark the beginning and the end of the list, just as the <table> & </table> tags mark the opening and closing of the table.

Once you have the shell, you can begin creating table rows. Tables are created with one or more rows. You create a row with the <tr> tag and end the row with the </tr> tag. Inside of table rows, you put table data. Table data is represented with the <td> tag and, as usual, ends with the </td> tag. The <td> tag represents a table cell. The <td> tag is the only place into which you can insert text.

Here’s a shell of a table table that contains two rows with two cells each (cell being created by the <td> tag):


<table align="center" border="1" cellpadding="1">


<tr>


<td>Cell (1,1)</td>


<td>Cell (1,2)</td>


</tr>


<tr>


<td>Cell (2,1)</td>


<td>Cell (2,2)</td>


</tr>


</table>

This table looks like this:

Cell (1,1) Cell (1,2)
Cell (2,1) Cell (2,2)

I hope you can see how this comes together. You will also notice 2 other properties in the table tag: the border and the align properties. The border property sets the border around the table cells. Add an additional border property with a color inside the quotes to change the border color. The align property simply tells the browser to put the table in the center of the page.

In order to get cells to span across multiple rows or columns, use the rowspan and colspan properties respectively. The first table in this tutorial demonstrates this concept.

You can experiment with tables if you want. Open up notepad (or equiv.) and save your file as table_demo.html. Enter in the standard html shell (refer to lesson 1) and put a table in the body section.

One more thing, the cellpadding property. This, uh, puts padding in the cell. What I mean to say is that it puts some space between the cell’s content (text, images, etc.) and the walls of the cell. Experiment with it on your own. Do you really need my help? Treat it as a homework assignment; without the grade.

Okay, so what’s the point? Well, there are many uses for tables, such as storing data in an organized way, listing ads on the side, or even entire web page layouts! For example, you could have the header in one cell (taking up an entire row across the top), the nav bar and the main content sharing the second row (in two cells) and footer taking up the entire bottom row.

Ok, take 5 to cool down. Done? I hope everyone now understands tables. If you don’t, comment your difficulty and I’ll do my best to clear up the confusion.

Next up, images!


¹ The term “code” is usually reserved for programming, which HTML is not. HTML is tagging, and uses “markup”. An example of programming would be C++ or Java.
Advertisements

2 Responses to HTML Tutorials IV :: Tables

  1. HTML is really confusing at first but I am getting the hang of it slowly but surely. Thanks for clearing up the tables. Makes a lot more sense.

    Jess

  2. Your tutorials saved my day!! I had to do a lot with HTML today (for our beef website to workout… I was having trouble with the tables..) and couldn’t have done it without what I learned here. Thanks Jeff + Tony!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: