Construct ultiple cell tables and add attributes

Multiple Cell Tables and Attributes

I see you haven't tossed in the towel... Great... Hang in there it will become clear as mud right here on this page!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<table>
    <tr>
        <td>THIS IS MY FIRST TABLE</td>
    </tr>
</table>

</BODY>
</HTML>

Go to the default.html file you put in your MYSITE folder and open it with your text editor.

Copy or Type In the Blue Colored Tags between the start Body tag <BODY> and the end body tag </BODY>. (Exactly as you see them on the left..)

Save your default.html file and close it.

Now double click on it or open it with your browser. If you see

THIS IS MY FIRST TABLE then go to the next step below.

Attributes: Tables, rows and cells (and tons of other tags) can be assigned special attributes. How wide to make something, how high, what color and more. We will add a border attribute and a color attribute to our table (as well as spacing parameters) so we can view the outlines of everything we are doing.

Attribute values must be enclosed by quotes.

Note: Not all browsers will recognize some attributes like border colors.

<table BORDER="1" CELLSPACING="0" CELLPADDING="0" BORDERCOLOR="purple">
Open your default.html file with your text editor and change the entire start table tag to exactly match the one above.
(Although the tag wraps here, it is all one single tag between the < and >.

We have defined ATTRIBUTES to the table to make it easier for you to see what is happening as we add rows and cells.

When you open your default.html you should see

Or

depending on what browser you are using.

Single cell tables can be expanded into multi-celled and multi-table tables which can provide a designer with a lot of layout options.

Let's quickly take a look at a multi-cell table

First we will look at a table that contains 3 rows and 1 column. (Remember? Every table needs at least 1 row and every Row needs at least 1 column.)

Here is the code that builds a 3 row table. Notice that all we did was duplicate the rows we already had.

<table BORDER="1" CELLSPACING="0" CELLPADDING="0" BORDERCOLOR="purple">
    <tr>
        <td>THIS IS MY FIRST TABLE</td>
    </tr>
    <tr>
        <td>This is Row 2</td>
    </tr>
    <tr>
        <td>This is Row 3</td>
    </tr>
</table>

Here is an illustration how the tags work. Notice that EVERY ROW MUST INCLUDE A COLUMN. (Rows need columns and columns need rows, they cannot exist independent of one another)

Explanation:

Inside of the table start and end tags there are 3 rows and each of the 3 rows contain one cell.

This is what the 3 row table looks like for real in IE

Let's expand our table one more step. We could base our website design on three rows and a single table, but the most often used designs incorporate 2 or three columns, so let's add another column to our table.

Below is the code for the 3 row, 2 column table. All we did here was to add another <td></td to each row. For each <td></td> in a row, a new cell is added. (Note: You cannot have 1 column in one row and 2 columns in the next row. All of the rows in a table need the identical number of columns... But later I will show you how we get around this)

Again, here is the breakdown illustration. Are you getting a better grasp on this now? We've only covered some real basic stuff, but once you have a hold of this, the most difficult stuff is behind you... at least in html.

Here is the real display of the code on the left. Add this to your default.html file. It should look like the example below if you are using IE.

Return To Main Index

Questions about tables?

Get The Answers...


	Ronald B Stamets, Web Site Design and Development Services

Ronald B Stamets, Web Site Design and Development Services

Multiple Cell Tables and Attributes

Questions about tables?