Lesson 4
Tables - part 2

<table border=3>
  <caption>border=3</caption>
  <tr>
    <td>Table Data</td>
  </tr>
</table>

<table border=15>
  <caption>border=15</caption>
  <tr>
    <td>Table Data</td>
  </tr>
</table>

Here's how the two tables look, the only difference between the two is the border size.

border=3

Table Data

border=15

Table Data

I like the way it looks. Sometimes I put images instead of text inside the table using a nice looking border. I also like to use a table with border to house a set of links (like the navigation bars in this course).

I'm easily amused.

Here is the code for two examples, you can use percentages or numbers (or pixels):

<table border=5>
  <tr>
    <td width="33%">Table Data width="33%"</td>
    <td width="67%">Table Data width="67%"</td>
  </tr>
</table>


<table border=5>
  <tr>
    <td width=200>Table Data width=200</td>
    <td width=100>Table Data width=100</td>
  </tr>
</table>

Here's how it looks:

Table Data width=33%

Table Data width=67%

Table Data width=200

Table Data width=100

using nowrap

Data cell 1.

Data cell 2.

Data cell 3.

Data cell 4.

without nowrap

Data cell 1.

Data cell 2.

Data cell 3.

Data cell 4.

Here is the code for the above tables:

<table border=3 width=100>
  <caption>using nowrap</caption>
  <tr>
    <td nowrap>Data cell 1.</td>
    <td nowrap>Data cell 2.</td>
    <td nowrap>Data cell 3.</td>
    <td nowrap>Data cell 4.</td>
  </tr>
</table>    


<table border=3 width=100>
  <caption>without nowrap</caption>
  <tr>
    <td>Data cell 1.</td>
    <td>Data cell 2.</td>
    <td>Data cell 3.</td>
    <td>Data cell 4.</td>
  </tr>
</table>    

Using cell spacing you can add space between the cells. The room inside of the table remains the same but all of the cells are pushed apart. The following table will demonstrate cell spacing:

<table cellspacing="10" border><tr>
<td bgcolor="white">table data 1</td>
<td bgcolor="white">table data 2</td>
<td bgcolor="white">table data 3</td>
</tr></table>

first the table without the cellspacing attribute.

table data 1

table data 2

table data 3

Below is what it looks like with the cellspacing attribute. The background color helps demonstrate the difference between this cell spacing and cell padding (next section).

table data 1

table data 2

table data 3

Using cellpadding you can add extra space inside the cell. The following example uses a similar table to demonstrate cell padding:

<table cellpadding="10" border><tr>
<td bgcolor="olive">table data 1</td>
<td bgcolor="olive">table data 2</td>
<td bgcolor="olive">table data 3</td>
</tr></table>

First, here is the table without the cellpadding attribute.

table data 1

table data 2

table data 3

Below is what it looks like with cellpadding. The background color helps demonstrate the difference between cell spacing (previous section) and this cell padding.

table data 1

table data 2

table data 3

If one cell takes up vertical space the other cells can make use of the valign attribute

valign=top

valign=middle

valign=bottom

Here's the code for the above table:

<table border><tr>
<td bgcolor="white">If one cell takes<br>up vertical space<br>
the other cells<br>can make use of<<br>the valign attribute</td>
<td bgcolor="white" valign="top">valign=top</td>
<td bgcolor="white" valign="middle">valign=middle</td>
<td bgcolor="white" valign="bottom">valign=bottom</td>
</tr></table>

You can use tables to create multi-column text fairly easily. The following is a table with no border and a single table row consisting of three table data cells each containing text.

Using the table tag (with no border) you can see how the text will look when layed out in different columns.

Managing the columns is up to the programmer, the trick is getting about the same number of words in each column.

You have to juggle things to get it to work out all right, just when you think you have it, someone resizes the window.

This type of layout could be useful as a starting page for three different articles, each could then link to a full width document to complete the article. Sort of like a newpaper's front page.