How to Code - A Beginner's Guide

Chapter 4 - An Introduction to Tables

Lesson #2 - Table Attributes

Alright, now that you've gotten a feel for using a table, and what it can do to help format your page, its time we start discussing the attributes of a table.

Like with many tags, the 'Width' attribute is also possessed by this tag. However, it also has a number of unique attributes as well.

Cellspacing, Cellpadding, and Border being among them.

Several of my own web-pages back in my college days were formatted using nested tables, with the outer table being used to set up the Header, Body, and Footer of the page.

The outer table's code would look something like this, and while I was using additional attributes here for my cells, we'll be going over them in the next lesson. For this lesson, all you need to worry about is the first line of the table.

-----------------------------------------------------

<table>

<tr>

<td> <!--Page Banner Goes Here-->

<img>

</td>

<tr>

<td> <!--Nested Table Begins Here: Main Page Content-->

....

</td>

<tr> <!--Page Footer-->

<td>

Free Web Host Credits were here</td>

<td>

Page Copyright information was here</td>

</tr>

</table>

-------------------------------------------------------

The table alignment is NOT for the content of the table, this is the table's alignment on the page. Having it centered is generally a good idea, unless you're using a nested table, which we will go over during the next chapter.

Width, while it can be measured in pixels, setting the table width by percentage tells it what percentage of the page the table should use. This is particularly important when you want it to appear the same on different monitors and viewing media, since a PC has a very different screen resolution from a smartphone. Like this, the page will appear the same [albeit smaller] on both devices.

The Cellspacing and Cellpadding attributes are to put a fair degree of space between each cell's content. [10 pixels] So even after filling one cell, there will still be a nice amount of space between its content and that of the neighboring cells.

Self-Learning Exercise #2

Play around with the various table attributes, and check to see how your page changes. If you have multiple web browsers installed on your computer [like I do] check to see how it appears from one browser to the next.

If you feel confident, feel free to start playing around with some of the cell attributes that I've used in the example as well.

Lesson #3 - Cell Attributes

This lesson utilizes the example code from Lesson #2. For some of you, I'm sure you've already been playing with the attributes that I used, for others, you decided to wait until I explained them to you.

There is nothing wrong with either choice, HTML can't crash your computer, so I encourage you to play with the code. You'll learn pretty fast that coding is about 90% troubleshooting mistakes that were made.

Attributes:

colspan - This attribute is unique to table cells,and tells the cell how many columns to occupy. The Colspan is determined by the row with the largest number of cells, and it counts from left to right starting with the cell that has this attribute.

align - This sets the alignment of the content within the cell. Left, Right, Center, Justify

valign - This attribute is unique to table cells and sets the vertical alignment of the content of that cell. Top, Middle, Bottom

width - Like with anything else that uses this attribute. Sometimes it is best to set the attribute as a percentage for tables. Keep in mind that the entire row must have a total of 100% even if the table has a smaller one, since the cell is setting its percentage based on the table's size.

background - You can set the background of each individual cell if you so choose. The possibilities are virtually limitless to how this attribute can be utilized.

The above list is far from a complete list of all a cell's attributes, but these are just a small sample of what you can do with them.

Self-Learning Exercise #3

Add the above elements to your web page's table, and continue practicing with them until you feel you have a firm understanding of these elements. I personally make frequent use of tables in my page designs, and have even used them to create web-based character sheets for various table-top games. Each of them is designed with a number of nested tables as well.

This concludes Chapter 4 of this guide. We're almost finished. Just a few more chapters and you'll have enough of a foundation to continue on to more advanced stuff like Javascript, Java, PHP, ASP and a number of other programming languages.