DF2254 Fundamentals of Web Design :: Art Institute

Week 10: Tables

Creating Tables

Tables should only be used for data.

In the past, way back when CSS did not work correctly on every browser (and before even CSS), designers had to use tables to create the layout of a page. This is no longer needed or desirable.

But HTML tables are still very suitable for data in rows and columns.

Basic Table Markup

<table>
<tr>
<th>Name</th>
<th>City</th>
<th>Profession</th>
</tr>
<tr>
<td>Bugs Bunny</td>
<td>Newark</td>
<td>Smart Aleck</td>
</tr>
<tr>
<td>Daffy Duck</td>
<td>Walla Walla</td>
<td>Lunatic</td>
</tr>
<tr>
<td>Elmer Fudd</td>
<td>Albuquerque</td>
<td>Hunter</td>
</tr>
</table>

It looks like this in a browser:

table simple

Table Elements

Element Name HTML Code Type of Element Usage
Table <table> block contains the entire table
Table Row <tr> block contains a single row of data
Table Header <th> inline contains a single column or row heading
Table Data <td> inline contains a single box of data, otherwise known as a table cell

 

Table Guidelines

  • <td> and <th> elements always goes inside of <tr> elements.
    • There can be more than one <td> or <th> element inside a single <tr> element.
    • There should be an equal number of <td> or <th> elements inside each <tr> element within a given table. The exception would be if you are merging two or more table cells together. More on this later.
  • <tr> elements always go inside of <table> elements.
    • There can be more than one <tr> element inside a single <table> element.
  • The <table> element has a number of attributes which are not allowed in HTML 5 but were usable in HTML 4.01:
    • border is used for the border width. I usually create the <td> & <th> borders in CSS instead.
    • cellspacing is used to push table cells apart from each other visually. I usually create the <td> & <th> margins in CSS instead.
    • cellpadding is used to give some spacing between the border and the cell contents. I usually create the <td> & <th> paddings in CSS instead.

Merging Cells

You can merge table cells together using the colspan or rowspan attribute for a <td> or <tr>. If you merge two cells together, you need to remove the extra, unused cell. Here's an example:

<table>
<tr>
<th>Name</th>
<th>City</th>
<th>Profession</th>
</tr>
<tr>
<td>Bugs Bunny</td>
<td rowspan="2">Newark</td>
<td>Smart Aleck</td>
</tr>
<tr>
<td>Daffy Duck</td>
<td>Lunatic</td>
</tr>
<tr>
<td>Elmer Fudd</td>
<td>Albuquerque</td>
<td>Hunter</td>
</tr>
</table>

It looks like this in a browser:

table merged cells

Caption

One more table add-on: a caption helps users understand what all that data is about.

<table>
<caption>Character Addresses</caption>
<tr>
<th>Name</th>
<th>City</th>
<th>Profession</th>
</tr>
<tr>
<td>Bugs Bunny</td>
<td>Newark</td>
<td>Smart Aleck</td>
</tr>
<tr>
<td>Daffy Duck</td>
<td>Walla Walla</td>
<td>Lunatic</td>
</tr>
<tr>
<td>Elmer Fudd</td>
<td>Albuquerque</td>
<td>Hunter</td>
</tr>
</table>

Here is the result:

table caption

Styling Tables in CSS

You can style any of the table elements in CSS. Here is an example.

The HTML

<table summary="Addresses of the three characters in the Loony Tunes cartoon 'Rabbit Seasoning'">
<caption>Character Addresses</caption>
<tr>
<th>Name</th>
<th>City</th>
<th>Profession</th>
</tr>
<tr>
<td>Bugs Bunny</td>
<td>Newark</td>
<td>Smart Aleck</td>
</tr>
<tr>
<td>Daffy Duck</td>
<td>Walla Walla</td>
<td>Lunatic</td>
</tr>
<tr>
<td>Elmer Fudd</td>
<td>Albuquerque</td>
<td>Hunter</td>
</tr>
</table>

The CSS

table {
border-collapse: collapse;
// collapses the td and th borders into a single border between them
}
th {
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
background-color: #333;
padding: 2px;
}
td {
padding: 5px;
border: thin solid #CCC;
}
caption {
font-size: .9em;
font-style: italic;
}

Result

Sample Table Styling

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
10 Tables Practice tables.zip

Assignment Details

Tables Practice

  1. Create a site folder named tables for this exercise.
  2. Create two HTML pages, each with a table having three columns and four rows each (the top rown being table headers). Include a summary and a caption for both.
    • table1.html: Create one hand-coded table in Notepad (Mac: TextEdit).
    • table2.html: Create a second table using Dreamweaver.
  3. Create an external CSS file to control the table elements in both HTML pages.
    • styles.css: Create CSS rules for at least 3 table elements.