ADVANCED TABLES

After practicing for a while with the basic tables web design course, youre ready to learn some more advanced table techniques. Right now, you can build tables, but you still might have trouble building intricate tables like the ones seen on the web.

Well, well take care of that!

Cell Padding

If youre thrown in a padded cell, you cant bounce against the hard walls, right? Well, cells in HTML have padding that keeps words from crashing into a cells wall. The modifier for Cell Padding is:

CELLPADDING="#"

here is some text

yet more text...

In the above table, the CELLPADDING is set at 10 pixels.

The whole table has to have the same padding setting. Notice CELLPADDING is a modifier of the <TABLE> tag.

<table width="75%" border="1" cellpadding="10">

<tr>

<td width="50%">here is some text</td>

<td>yet more text...</td>

</tr>

</table>

Cell Spacing

Cell spacing is the individual space between cells, measured in pixels. Cell spacing is another table-wide attribute, and so must be added to the <table> tag. The Cell Spacing modifier looks like:

CELLSPACING="#"

The below table is the same as the above example for CELLPADDING, except for the addition of the CELLSPACING modifier, set to "0".

here is some text

yet more text...

<table width="75%" border="1" cellpadding="10" cellspacing="0">

Notice that the above table only has one set of borders, where as tables that have CELLSPACING set above zero have a separate border around every cell.

Background Color

The BGCOLOR modifier can be applied to <table>, <td>, or <tr>. For example, a yellow cells code would look like:

<td bgcolor="yellow">

Cells and rows are often colored for design impact.

Border Color

Both the table and cell has a color-changeable border. The modifier for border color is simply:

BORDERCOLOR="whatever_color"

In the below table:

BORDERCOLOR is often used to make one border disappear by matching it to the pages background color.

Alignment Within Cells

By default, HTML aligns text to the vertical center of each cell. If you have one cell with more information in it then an adjacent cell, youll get a table that looks like:

Here's a cell with
more
than one
line of text.

This line will center vertically.

Of course, you may want your text to align vertically to the top of your <TD>s. You can do this by using a Vertical Alignment modifier in a <td>:

<td valign="top">

You can choose between TOP, MIDDLE, and BOTTOM

The following table is utilizing <td valign="top">

Here's more
than one
line of text.

This td uses valign="top".

Merging Cells Together

What if you want a table that looks like this?:

Youll notice that the top row is only one cell and the bottom row has two individual cells.

It seems that this table is breaking the rule about all cells in a column being the same width. In fact, the top row still has two columns, but one cell has been told to span both columns. Essentially the dividing line between the two top cells has been removed.

To force one cell to span two columns, the Column Span modifier is used in a <td>.

<td colspan="number of rows to span across">

Notice That "colspan" is only one word because it is only one command. The COLSPAN modifier changes the behavior of the <td>, and so it is a modifier of the <td>.

The HTML for the below table would look like:

<table border="1" cellspacing="0" width="75%">

<tr>

<td colspan=2> </td>

</tr>

<tr>

<td width="50%"> </td>

</tr>

</table>

Ive used organized indenting to make the code easier to read. Again, this is completely optional.

Notice in the above code that the first row only has one cell in it. The top left cell spans two columns (colspan=2).

When using COLSPAN, the cell always stretches from left to right, just like you read.

Row Span

You can also have cells span rows, or stretch up and down.

The code for the below table would look like:

<table border="1" cellspacing="0" width="75%">

<tr>

<td rowspan=2> </td>

<td> </td>

<td rowspan=2> </td>

</tr>

<tr>

<td> </td>

</tr>

</table>

The top row has three <TD>s, two of which span across more than one row. The bottom row only has one independent cell, and so it only contains one <TD>

When using ROWSPAN, the cell always stretches from top to bottom, just like you read.

Try to build the following table (the code is below if you get stuck):

This	Is
Super Cool.

<table border="1" width="75%" cellspacing="0">

<tr>

<td width="50%"> this </td>

<td> is </td>

</tr>

<tr>

<td colspan=2> <center> super cool. </center> </td>

</tr>

</table>

Practice building tables using COLSPAN and ROWSPAN. Dont get super complicated, though. Very complex tables use a different technique that we will learn next.

Nested Tables

What if I asked you to build a table that looked like:

Youd probably kill me, right?

The above table could be built using ROWSPAN and COLSPAN, but it would be a very complicated undertaking. Wouldnt it be easier to just build a basic framework, and then build separate individual tables inside the table? The following example illustrates what I mean. Each table has a different border color.

The final version of your website would probably have the borders turned off, but in the example above, the blue and red tables are said to be "nested" in the gray table. When HTML code is built inside code of the same type, the code is "nested". Professional websites often have a number of nested tables. Nested tables allow for more complicated, yet headache-free, designing.

Go look at www.yahoo.com. Youll be able to see how they use nested tables.

Make the following table with nested tables. The code is below if you get stuck.

I love tables!

This table is nested

See how it's designed?

<table width="100%" border="1" cellspacing="0" cellpadding="1">

<tr>

<td width="50%">i love tables!</td>

<td>

<table width="100%" border="1" cellspacing="0" cellpadding="1">

<tr>

<td width="50%">this table is nested</td>

<td>see how it's designed?</td>

</tr>

</table>

</td>

</tr>

</table>

The Highlighted portion above is the nested table. Notice how the whole table is kept inside of one <td>?

This is what the table would look like with the borders turned to BORDER="0":

I love tables!

This table is nested

See how it's designed?

Nested tables are fundamental to web design. Play with them for a little while.

Nested tables seem to use a lot of code. Are they going to slow down my load time?

Nope. Heres how it works. Every letter or character you type is turned into eight zeros and ones (binary code) by the computer. So, "DAVE" would be represented by 24 zeros and ones (4 letters x 8 binary digits = 24 zeros and ones).

56Kbps means that the modem can download 56 thousand bits (zeros and ones) per second. When a relatively slow modem can down load fifty-six thousand zeros and ones every second, you dont have to worry too much about a few extra lines of code you might get from nested tables.

It is very important that you practice with tables and nested tables before you move on. Tables are the building blocks for almost every website. You want to understand them inside out.

| Back to Courseware