[Prev Lesson (no frames)] [Prev Lesson] [Next Lesson] [Next Lesson (no frames)] [Course Outline]
[Tables] [Code] [Line-by-line] [Table] [Display] [bgcolor] [align] [caption] [span] [Review] [Top] [image]

Lesson 3
HTML Tables - part 1

HTML tables

Now on to tables. Although tables are useful and perhaps intended for displaying information in row and column form, the table is used for page layout purposes just as often. The first use of a table here is more page layout oriented. We are going to put a new "title" at the top of the page using a table.

First, using your text editor, open up the HTML document from lesson 1.

Type in the following, beginning after the <body> tag, essentially replacing your old header, of course use the text of your choice just be sure all of the HTML tags are in the correct place.. The indenting is optional but it will help you see what is going on.

The Code 

----------

<center>
<table border=5>
  <tr>
    <td>
    <h1>Hello</h1>
    </td>
    <td>
    <center>
    <h2>The World Wide Web <br>Was Willy Wild</h2>
    </center>
    </td>
    <td>
    <h1>World</h1>
    </td>
  </tr>
</table>
</center>

---------

After you have this typed (or copy/paste) into your existing document from lesson 1, SAVE.

Line-by-Line

The <table> tag declares the beginning of a table. The <tr> tag means "Table Row" and the <td> tags means "Table Data". In the above example there is one row and three different data fields in that row. Notice the opening and closing table row tags (<tr> and </tr>) and the three table data tags (<td> and </td>). If you are not nesting one table inside of another, no closing tag is needed for table data. If you are doing complex tables it is essential to put in the closing table data tag (</td>).

Another new tag in this lesson is the line break tag, <br>.

As expected it will cause a line break (like pressing return) wherever the <br> tag is used. In the table example above, the header "The World Wide Web Was Willy Wild" is on two different lines as a result of the <br> tag.

Look at the entire HTML document. Do you know what all of the tags mean and how they affect the look of the document in the browser? Let's go through the HTML table line by line.

First a center tag (<center>), so that the whole table will be centered. This tag has nothing to do with tables, it's used here just because I wanted to position the table in the center of the page.

Next the opening table tag (<table>) with a border attribute set to 5. This will put a border 5 pixels wide around the entire table.

Next is a table row tag (<tr>). The table row tag defines the beginning of a row in the table. It should be followed by one or more table data tags. (<td>).

In this example there are three pairs of table data tags (<td>...</td>). The first pair of table data tags contain the header "Hello", the second pair of table data tags contain the header "The World Wide Web Was Willy Wild", the last pair of table data tags contain the header "World".

Finally the closing table tag (</table>) and the closing center tag (</center>).

The indentation is purely for convenience, it is not necessary. The table could have been written as follows but it is difficult to decipher in this form:

<center><table border=5><tr><td><h1>Hello</h1></td><td><center><h2>The World Wide Web <br>Was Willy Wild</h2></center></td><td><h1>World</h1></td></tr></table></center>

The table rendered

Regardless as to whether you used the indented version or the compressed version it should be rendered the same in the browser.

Hello

The World Wide Web
Was Willy Wild

World

Displaying Data

Next week we will cover more ways of using the HTML table for page layout purposes. The rest of this lesson covers the use of tables for displaying data. The table is an obvious choice to display certain types of data. Here are a couple of examples:

Item Price
Peanuts $1.25
Pop Corn $1.00
CrackerJacks $1.50

The above price list was created by the following HTML code: 

<table>
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Peanuts</td>
    <td>$1.25</td>
  </tr>
  <tr>
    <<d>Pop Corn</td>
    <td>$1.00</td>
  </tr>
  <tr>
    <td>CrackerJacks</td>
    <td>$1.50</td>
  </tr>
</table>

Notice the first line uses the table header tag (<th>). The browser renders the tag with a bold font style. It works just like the table data tag with regard to the attribute options discussed later.

The next example is much longer, a calendar month.

Sun Mon Tues Wed Thur Fri Sat
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

Here is the code to create the above calendar table layout. The formatting is optional but it makes it easier to read the HTML code. 

<table border=2>
  <tr align="center">
    <th>Sun</th>
    <th>Mon</th>
    <th>Tues</th>
    <th>Wed</th>
    <th>Thur</th>
    <th>Fri</th>
    <th>Sat</th>
  </tr>
  <tr align="center">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr align="center">
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
  </tr>
  <tr align="center">
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
  </tr>
  <tr align="center">
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
  </tr>
  <tr align="center">
    <td>29</td>
    <td>30</td>
    <td>31</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Background Color

Each cell of table data can have it's own background color. Check out this table, notice that the font color is changed to be a contrasting shade with the background color so that it doesn't "disappear". If the font color is the same as the background color the text becomes invisible. It's a useful trick to use for indentations and positioning.

Hello World

Here is the code that creates the above table: 

<table width=200 height=50>
  <tr>
    <td bgcolor="#000000"><font color=#FFFFFF">Hello</font></td>
    <td bgcolor="#FFFFFF"><font color=#000000">World</font></td>
  </tr>
</table>

Here's a sample of some of the background colors you might want to use. You can use the name instead of the code number for these colors. If you want to get some of the shades in between these colors, you need to type in a code number.

background colors

BLACK - #000000 SILVER - #808080 GRAY - #C0C0C0 WHITE - #FFFFFF
MAROON - #800000 RED - #FF0000 PURPLE - #800080 FUCSHIA - #FF00FF
GREEN - #008000 LIME - #00FF00 OLIVE - #808000 YELLOW - #FFFF00
NAVY - #000080 BLUE - #0000FF TEAL - #008080 AQUA - #00FFFF

Alignment

The table row and table data tags both have alignment attributes. Here's is similar table as before with the table row aligned to the center.

Hello World

Here is the code that creates the above table: 

<table width=200 height=50>
  <tr align="center">
    <td bgcolor="#000000"><font color=#FFFFFF">Hello</font></td>
    <td bgcolor="#808080"><font color=#000000">World</font></td>
  </tr>
</table>

This time the table row is aligned to the right.

Hello World

Here is the code that creates the above table: 

<table width=200 height=50>
  <tr align="right">
    <td bgcolor="#000000"><font color=#FFFFFF">Hello</font></td>
    <td bgcolor="#808080"><font color=#000000">World</font></td>
  </tr>
</table>

This time each table data tag is aligned differently, The "Hello" cell is aligned right and the "World" cell is aligned left.

Hello World

Here is the code that creates the above table: 

<table width=200 height=50>
  <tr align="center">
    <td  align="right" bgcolor="#000000"><font color=#FFFFFF">Hello</font></td>
    <td  align="left" bgcolor="#808080"><font color=#000000">World</font></td>
  </tr>
</table>

Caption

The caption tag can be used to put a title on top of the table. It is placed after the table tag but before the table row tag. Here is the basic format: 

<table border=2>
 <caption>Table Title</caption>
 <tr>
 <td>Table Data</td>
 </tr>
</table>

Here's how it looks:

Table Title
Table Data

The caption can be place above or below the table using the align attribute. Here is the same table with the caption attribute set to "bottom". 

<table border=2>
 <caption align="bottom">Table Title</caption>
 <tr>
 <td>Table Data</td>
 </tr>
</table>

Here's how it looks:

Table Title
Table Data

Colspan/Rowspan

Sometimes you will want a table data cell to span more than one row or column. The HTML tags colspan and rowspan can be use to accomplish the task. Check out the following table:

Music Equipment
Instrument Cartage Home
Concert Studio
Guitars Acoustic Ramierez Martin Gibson
Electric Gibson 335 Stratacaster Telecaster
Guitar Amplifiers Marshall Boogie Twin Reverb

Here is the code to create the above table: 

<TABLE BORDER=2>
<CAPTION>Music Equipment</CAPTION>
<TR>
  <TH ROWSPAN=2 COLSPAN=2></TH>
  <TH COLSPAN=2>Instrument Cartage</TH>
  <TH ROWSPAN=2>Home</TH>
</TR>
<TR>
  <TH>Concert</TH>
  <TH>Studio</TH>
</TR>
<TR>
  <TH ROWSPAN=2>Guitars</TH>
  <TH>Acoustic</TH>
  <TD>Ramierez</TD>
  <TD>Martin</TD>
  <TD>Gibson</TD>
</TR>
<TR>
  <TH>Electric</TH>
  <TD>Gibson 335</TD>
  <TD>Stratacaster</TD>
  <TD>Telecaster</TD>
</TR>
<TR>
  <TH COLSPAN=2>Guitar Amplifiers</TH>
  <TD>Marshall</TD>
  <TD>Boogie</TD>
  <TD>Twin Reverb</TD>
</TR>
</TABLE>

Next week we will cover the few remain attributes for tables.

Review

Section10Text