Manuscript for HTML Tutorial #22

Listed below is the manuscript of all textual instructions used in HTML Tutorial #22 - Dividing Your Page into Two Columns Using a Table. Most of this text is displayed inside the yellow balloons used to guide viewers as they watch the lessons.

Students and instructors may find it helpful to have a hard copy of these balloon instructions. You may print this web page to use as an aide in following, referencing, or demonstrating the web design series.

Manuscript Table of Contents

Entire HTML Tutorial Series

Tutorial #22 - Dividing Your Page into Two Columns Using a Table

Lesson #22: Making Columns. In this lesson we will see how to divide our page into two separate columns, by using what’s called a table. Now, the subject of tables can be pretty complex. So, we will not try to teach you everything about tables in this one lesson. Instead, we will show you how to insert a very simple two-column table, which will divide your page into a left and right section. Click the play button to begin the tutorial.
Here are the minimum tags needed to make a two-column table.
Here is how they look in a web browser.
If we add a border to this table, we can see that there are two separate sections.
Let’s take a look at the structure of this table.
The opening and closing table tags create the table itself.
The opening and closing tr tags create one single table row.
The first set of td tags creates the first left-hand column (table cell).
The second set of td tags creates the second right-hand column (table cell).
So, in order to split our page, all we should have to do is put the part we want on the left inside the first table cell...
...and then put the rest of the page inside the second table cell.
If this all seems confusing, don’t worry. Just follow along, and we’ll show you how it’s done.
First we’ll put the opening <table> tag right after the opening <body> tag.
Next we’ll start a table row by entering the opening <tr> tag.
Now to begin our first table cell with an opening <td> tag.
OK, we need to go to the spot where our first cell will end, and the second cell will begin.
That spot is right here, between the buttons, and our headlines.
We’ll end the first cell with a closing </td> tag.
Then we’ll begin the second cell with an opening <td> tag.
Now let's go to the bottom of the page, and finish the table.
We will end our table right before the closing </body> tag.
The first thing we need to close is the second cell.
Then the only table row.
Followed by the whole table itself.
OK, let’s see how it looks.
Well, as you can see, our page does have left and right columns, but the placement of our buttons is undesirable.
So, let’s go back and make a few changes (tweaks), to get our page looking the way we want.
First off, let’s put each of our buttons into their own paragraphs so they’ll start on new lines.
Next, we’ll add some background color to our left column.
We’ll just assign a class to this <td> tag, and then set its properties in our style sheet.
That’s a little better. Now let’s see about centering our buttons.
This text doesn’t look good so close to our left column, let’s add a little padding to our table cells.
Starting to look good. There’s just one more thing though.
As more content is added to the right-hand column, the images on the left start to move down the page.
We’ll just set the vertical alignment for all table cells to the top of the page.
There we go, now our page looks complete.
When you’re ready to move on, you can begin Lesson #23.

<<<Tutorial #21

Tutorial #23>>>