HTML Part 7 – Tables

In the previous guide, we talked about lists. While lists are great for organizing data, they sometimes pail in comparison to tables which are capable of storing a lot more data in a nice and compact form. In terms of coding, these can be fairly involved, but we’ll walk you through this.

Tables, generally have rows and columns. When I first learned tables, I, for whatever reason, constantly confused rows and columns. What really helped me keep the two different elements defined was that rows are like bookshelves – they are horizontal. Columns, however, are vertical like those big white columns you see in ancient Greek architecture. If anything else, the visual of a Greek pillar as a column helped me remember every time that columns are vertical and rows are horizontal.

Coding a Basic Table

conveniently enough, the tag for creating a table is, well, <table>

So, first, lets prepare out basic HTML page:

HTML7_1

Now, let’s add in our table code (opening and closing tags):

HTML7_2

While this is a fair way to start, this code, by no means, does anything visual. However, we are telling browsers that, “Hey, we have a table here!”

The next thing we need to do is add content to our table. So, for that, we need to tell browsers that we are inserting a row. That is our Table Row tag or <tr> tag. So, let’s say, for the sake of argument, we want two rows in our table. Simple: we add two sets of Table Row tags like so:

HTML7_3

So, in this case, our code is telling browsers that there is two rows in this table. Anything between either of those Table Row tags is something we are going to put in those respective rows. So, what next? We need to add items in those rows!

For this table, I want the top row to be like a title for each column. So, I’m going to need what is known as a Table Heading. In HTML, that is <th>. Now, I’m going to put in a whopping four items per row, so I’m going to code my table like so:

HTML7_4

This tells browsers that in the first row, there are four items that are table headings. I’m going to type in a title in between each of the Table Heading tags something for each, like so:

HTML7_5

The effect the Table Heading has on text generally is to make it bold and center it – making it distinct from other plain text.

OK, so there is two rows with four columns. Now, naturally, not every row is going to be titles. So, for the next row, we are going to insert some Table Descriptions or <td>. So, because I don’t want my table to look funny, I’m going to put in the exact same amount of items in the second row as the first row like so:

HTML7_6

Now, I’m going to add some perfectly innocent little bits of content for each item in this row:

HTML7_7

OK, so, now that I have the information in my table set up, there’s only one thing left to do: create lines for everything so that it actually looks like a table. Otherwise, it’ll just be a jumbled mess sitting in space. So, I need to add a little something to the table tag. This would be a “border”. This border needs to have some width, so we’ll give it a value of “1” like so:

HTML7_8

So, in our table, we told browsers, “Hey, there’s a table here!”. Next, we told the browser that there is going to be two rows. In the top row, there are four heading items. The bottom row has four regular items. The table also has a border of 1 (Note: Values mentioned in this particular guide section are measured in pixels). So, let’s see how our table turned out:

HTML7_9

Not bad! It’s a little hard to see the alignment of the text, but it is, indeed, there.

So, each item, or really, each box, is considered a cell. This is exactly like a spreadsheet in which there are rows, columns, and cells.

Modifying Cell Properties

We already did a little bit of customization of our tables by asking that our table border have a width of one. Still, there are plenty of other things that we can do to our table in HTML.

One thing we can do is modify the space around each cell. This would be cell padding. Think of cell padding as invisible fluff that you are stuffing around the edges of the inside of each cell to add space. Fortunately, this is not as labor intensive. All we have to do is add “cellpadding” next to where we put our border width like so:

HTML7_10

The results of adding that little bit of code are as follows:

HTML7_11

Now, the other thing one can modify is the spacing between cells. For that, we insert “cellspacing” like so:

HTML7_12

The results are this for me:

HTML7_13

As you can see, I’ve reduced the space between cells. Adding values greater than 1 will increase the cell spacing. A value of “7” yielded these results instead:

HTML7_14

Go nuts and play around with it!

Table Captions

A caption is simply some words that go along the top of a table. To add a caption, you simply add a “caption” tag inside your table tags like so:

HTML7_15

The end result I got was this:

HTML7_16

That’s it! That’s how you caption a table!

Cells That Span More Than One Row Or Column

Sometimes, one side of a table or another requires the space of more than just one cell (multiple rows and/or columns). This can be implemented, but for this table, I’ve opted to create a new table to better demonstrate this. What I started with is this for code:

HTML7_17

The resulting output is this:

HTML7_18

Now, obviously, there’s two cells that say “Part A”. Wouldn’t it be nice if we could consolidate those two cells into a single cell? Well, you actually can with Column Span or “colspan”. Now, while we can use that, we also need to know how many columns that span actually goes across. In this case, the number of columns we want it to cover is 2. So, in our code, we insert “colspan=”2″” like so:

HTML7_19

Note that I deleted the last Table Header in the process. Since we are using a cell for more than one cellspace, we need to remove the last cell to make space.

The end result of this code is this:

HTML7_20

Pretty Nifty!

Now, let’s say the problem was reversed and the left hand column was actually redundant… something like this:

HTML7_21

For reference, this is the code being used to create that table:

HTML7_22

So, wouldn’t it be nice if we could consolidate the rows on the left hand side and remove the redundant “Section A”? We can do that with Row span or “rowspan”. Again, value used identifies the number of rows it will span. So, in this case, the solution is this:

HTML7_23

Note the removal of the redundant “Section A” at the beginning of the third Table Row and additional code in the first “Section A” Table Head code. That’s all I’ve changed in the table. The results of that is this:

HTML7_24

Cool! That was a nice sleek change to the table. Just be aware that when you are adding “span” related code to your tables to at least be aware of what cells that span will cover up. As long as you can visualize what the table will end up looking like as you are making it, all the better. The easiest way to visualize the table is to simple create the table with redundant cells and then add the spans and delete cells accordingly.

Now you have a really good idea of how to create tables!

Next, we’ll be discussing headings and escape tags!

Part 6 – Lists | HTML Guide List | Part 8 – Headings and Escape Tags


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.