Click here to learn the biblical way to get to heaven! (The most important page on this site)

Creating your own hard-coded web page

(Using a standard text editor)

Part 2 -- Tables

Author: Ricky Bryce

Disclaimer: Although I believe the information in this document to be accurate, it is your responsibility to verify the accuracy of the information contained in this document before implementing it in any way. By continuing to read this document you agree to hold no one liable who has written or distributed this document... Even for negligence.

Using Tables in HTML (By Ricky Bryce)

Tables are a way to organize objects on your web page such as text, or images. Each table is going to consist of rows and columns. Tables can also be nested within other tables. In this example, we will start with a basic table, then change the width of each cell.

1. Understand the table structure – From the Bottom to the Top

   1. Table Data -- Each cell contains data, and this data is defined between the “<td>” and “</td>” tags.

   2. Tables Rows – Multiple data items are contained within a row, therefore, you will see multiple table data definitions between the “<tr>” and “</tr>” tags. Here is an example:

<tr><td>First Cell</td><td>Second Cell</td><td>Third Cell</td></tr>

In the above example, we started the row with the <tr> tag. Then we defined data for three different cells. At the end of the line, we closed the row with the </tr> tag.

3. Table Structures – A table is made up of one or more rows (<tr>), and each row is made up of multiple definitions (<td>). Here is an example of code that might make up a table:

<table>

<tr><td>First Cell</td><td>Second Cell</td><td>Third Cell</td></tr>

<tr><td>Fourth Cell</td><td>Fifth Cell</td><td>Sixth Cell</td></tr>

<tr><td>Seventh Cell</td><td>Eighth Cell</td><td>Ninth Cell</td></tr>

<table>

In the above example, we have a table that has three rows, with three definitions (columns) in each row. It's a good idea to try to keep the number of definitions for each row consistent across all rows, unless some special parameters are used which we will discuss later. To accomplish this you may end up with some <td></td> pairs with no data between the TD tags.

Let's save the work, and open the page in a browser to see what the output is for the above code when this entire table is placed in the body:

Note, sometimes entire web pages are made up of a table consisting of one row with two cells. The row on the left contains navigation buttons, and the row on the right contains the data for the page. Each column can be passed a special parameter to custom size data in a particular row. We will get into this later.

2. Format the Table – What we have here is not bad, but difficult to read.

   1. Lets add a border to the <table> tag as shown: I'm also going to put each definition on it's own line and use indentations to make the source code easy to read.

2. Save your work, and refresh the web browser. Here's the output:

3. Now, let's add some padding within each cell with the cellpadding parameter, and some spacing between the cells with the cellspacing parameter:

4. Save your work, refresh the browser.... Your output should look similar to this:

3. Spanning Columns – Occasionally, it may be necessary to span one definition across two or more columns. For this example, consider our first row. There are three definitions in the first row, indicating three columns.

   1. We are going to eliminate the third cell altogether. (by deleting the last set of <td></td> tags in the first row.

   2. Then we are going to take the second definition (Second Cell) and span it across two rows as shown.

   3. Then center the text in the second cell...

4. Here are the code changes to our table (top part of code): I've also added a comment to the code. “<!--” starts a comment that is meant just for the programmer to read, and “-->” ends the comment. Note there are two dashes in each of the comment tags. We end up with code that looks like this:

5. Now, save your work, and refresh the browser, and you will see what is rendered.

6. Notice the second definition now spans across two rows.

4. Spanning Rows – We learned about spanning columns. Sometimes spanning a row is required as well. Let's take the Fourth Cell, and span it to the Seventh Cell.

   1. We are going to delete the definition for the Seventh Cell all together.

   2. Then we are going to take the first definition in the second row, and add the rowspan=”2” parameter to the <td> tag.

3. Here are the code changes.... Remember, we are looking at the second row! This is a snapshot of the SECOND and THIRD SET of <tr></tr> tags!!

4. And here is the output:

5. Nesting Tables – Let's make the entire web page a table (call this the main table)... And lets use the table we created as a definition of this main table. This Main table will consist of just one row with two cells (two definitions). The left row will contain links to other pages on our site, and the right row will contain information about the site. This information might be in the form of another table. Here is the code for the entire page: (Note: This would be an example assuming you have created other pages on your site for pictures, contact information, and friends links:

<html>

<head>

<title>Writing HTML</title>

</head>

<body>

<table border=”1”><!-- Main Table -->

<tr><!--Start the ONLY Row of the Main Table-->

<td width=”15%” valign=”top”><!--First definition of Main Table-->

<a href="pictures.html">My Picture Page</a><br>

<a href="contactme.html">Contact Me</a><br>

<a href="friendslinks.html">My Friends</a><br>

</td>

<td width=”85%” valign=”top”><!--Second Definition of main table-->

<table border="5" cellpadding="5" cellspacing="5"><!--Sub Table-->

<tr>

<td>First Cell</td>

<td colspan="2"><center>Second Cell</center></td>

<!--Comment: I added the colspan parameter to the <td> tag,

and the center tags which are around "Second Cell".

I also deleted the last set of <td></td> tags. -->

</tr>

<tr>

<td rowspan="2">Fourth Cell</td>

<!--In the above definition, I added the rowspan parameter -->

<td>Fifth Cell</td>

<td>Sixth Cell</td></tr>

<tr>

<!--I have deleted this first definition -->

<td>Eighth Cell</td>

<td>Ninth Cell</td>

</tr>

</table>

</td><!--End Second definition of Main Table-->

</tr><!--End the only row in the Main Table-->

</table><!--End Main Table>

</body>

</html>

6. You will notice a few things in the above code.

   1. I used the width parameter within the two <td> tag's of the main table

   2. I used the valign=”top” command to ensure all data is aligned at the top of the definition.

   3. I also set a border on the Main Table. If you don't like this, change the border parameter to border=”0”, or eliminate the border parameter from the table command.

7. Here is the output: