Introduction to Tables

Without tables you can use the <pre> tag to display information in columns.

<pre> 


 OLIN

 Monday - Friday                      8:00 am - 11:00 pm

 Saturday & Sunday                    12 noon - 6:00 pm

</pre>

Below is the same information displayed in a very basic table with a border.

Olin Library

Monday-Friday 8:00 am - 11:00 pm
Saturday & Sunday 12 noon - 6:00 pm

<table border="1">

<tr>

<td>Monday-Friday</td>

<td>8:00 am - 11:00 pm</td>

</tr>

<tr>

<td>Saturday &amp; Sunday</td>

<td>12 noon - 6:00 pm</td>

</tr>

</table>

Hands on: creating a basic table.

Below is the same information displayed in a table that has the width set to 100% but no border.

Olin Library

Monday-Friday 8:00 am - 11:00 pm
Saturday & Sunday 12 noon - 6:00 pm

<table width="100%">

<tr>

<td>Monday-Friday</td>

<td>8:00 am - 11:00 pm</td>

</tr>

<tr>

<td>Saturday &amp; Sunday</td>

<td>12 noon - 6:00 pm</td>

</tr>

</table>

Below is the same information displayed in a table that has the width set to 100% and includes a border.

Olin Library

Monday-Friday 8:00 am - 11:00 pm
Saturday & Sunday 12 noon - 6:00 pm

<table width="100%" border="1">

<tr>

<td>Monday-Friday</td>

<td>8:00 am - 11:00 pm</td>

</tr>

<tr>

<td>Saturday &amp; Sunday</td>

<td>12 noon - 6:00 pm</td>

</tr>

</table>

Below is the same information displayed in a table that has the width set to 100%, includes a border, and has cell padding set to 5.

Olin Library

Monday-Friday 8:00 am - 11:00 pm
Saturday & Sunday 12 noon - 6:00 pm

<table width="100%" border="1" cellpadding="5">

<tr>

<td>Monday-Friday</td>

<td>8:00 am - 11:00 pm</td>

</tr>

<tr>

<td>Saturday &amp; Sunday</td>

<td>12 noon - 6:00 pm</td>

</tr>

</table>

Below is the same information displayed in a table that has the width set to 100%, includes a border, cell padding set to five, and cell spacing set to five.

Olin Library

Monday-Friday 8:00 am - 11:00 pm
Saturday & Sunday 12 noon - 6:00 pm

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

<tr>

<td>Monday-Friday</td>

<td>8:00 am - 11:00 pm</td>

</tr>

<tr>

<td>Saturday &amp; Sunday</td>

<td>12 noon - 6:00 pm</td>

</tr>

</table>

Below is the same information displayed in a table that has the width set to 100%, includes a border with width set to five, cell padding set to five, and cell spacing set to five.

Olin Library

Monday-Friday 8:00 am - 11:00 pm
Saturday & Sunday 12 noon - 6:00 pm

<table width="100%" border="5" cellpadding="5" cellspacing="5">

<tr>

<td>Monday-Friday</td>

<td>8:00 am - 11:00 pm</td>

</tr>

<tr>

<td>Saturday &amp; Sunday</td>

<td>12 noon - 6:00 pm</td>

</tr>

</table>

Below is the same information displayed in a table that has the width set to 100%, includes a border with width set to five, cell padding set to five, cell spacing set to five and the text aligned center.

Olin Library

Monday-Friday 8:00 am - 11:00 pm
Saturday & Sunday 12 noon - 6:00 pm

<table width="100%" border="5" cellpadding="5" cellspacing="5">

<tr>

<td align="center">Monday - Friday</td>

<td align="center">8 am - 11 pm</td>

</tr>

<tr>

<td align="center">Saturday &amp; Sunday</td>

<td align="center">12 noon - 6 pm</td>

</tr>

</table>

Below is the same information displayed in a table that has the width set to 100%, includes a border with width set to five, cell padding set to five, cell spacing set to five, the text aligned center, and table headings added.

Olin Library

DAYSHOURS
Monday-Friday 8:00 am - 11:00 pm
Saturday & Sunday 12 noon - 6:00 pm

<table width="100%" border="5" cellpadding="5" cellspacing="5">

<tr><th>DAYS</th><th>HOURS</th></tr>

<tr>

<td align="center">Monday - Friday</td>

<td align="center">8 am - 11 pm</td>

</tr>

<tr>

<td align="center">Saturday &amp; Sunday</td>

<td align="center">12 noon - 6 pm</td>

</tr>

</table>

Hands on: adding border width, cellpadding, and cellspacing to a basic table.

Return to HTML III OUTLINE

Go to Advanced Tables

Tony Cosgrave (ajc5@cornell.edu)
Revised 05 December 2007 [MOE]
Olin & Uris Libraries
Cornell University Library
URL: http://www.library.cornell.edu/okuref/ws/html/tables.htm