table assignment explained

This week we learn about tables.

read textbook - chapter 9 (218-235)
table basics
caption and summary
style the table
border collapse
span rows and columns
table color

Here are 2 table examples - the first is fairly small and simple, it has all the requirements for the lesson.

The second example is a bit over the top - you don't need to make your table this complex, unless you have a great deal of information you want to place inside a table.

Simple Table Example

Complex Table Example

Table Basics

Here is the bare bones code for a table with 8 columns and 3 rows. We use the <table>, <tr>, <th>, and <td> elements.

<table>
<tr>
<th>name</th><th>height</th><th>spread</th><th>exposure</th><th>leaf</th><th>foliage </th> <th>flower</th><th>thumbnail</th>
</tr>
<tr>
<td>coral bells</td><td>12"</td><td>12"</td><td>sun/shade</td><td>medium </td> <td>maroon<br />green</td> <td>white</td><td> </td>
</tr>
<tr>
<td>hostas</td><td>2'</td><td>18"</td><td>shade</td> <td>large</td><td> green/white<br /> silver<br /> green/yellow<br /> green <br /> lime</td><td>white</td> <td> </td>
</tr>
</table>

Here is a sample of the page at this stage of the lesson :: Basic Table

Caption and Summary - making tables accessible

To create an accessible table you need to use these 3 elements:

<th> elements (shown in earlier video)
<summary>
<caption>

I have added this HTML to the page:

<table summary="This table holds information about the perennial flowers in my garden. I have included the height, spread, exposure, foliage texture, foliage color, and a thumbnail of the flower." border="1">

<caption>Favorite perennials from Linda's garden</caption>

Here is a sample of the page at this stage of the lesson :: Basic Table with caption and summary

Styling the Table

Now lets add some code to the CSS file which will define the border of the table:

table {border:thin solid #000000; caption-side:bottom; margin:10px;}

Now I REMOVE the border attribute from the table element

Next I Add a style which has a multiple selector for the th and td elements. It defines a border. I also add style for the caption tag.

td, th {border:thin dashed #000; padding:4px;}

caption {font-style:italic; padding-top:6px;}

Here is a sample of the page at this stage of the lesson :: Table with borders

Collapse Table Borders

I add this CSS to make the space between the borders collapse

table {border:thin solid #000000; caption-side:bottom; margin:10px; border-spacing:0px;
border-collapse:collapse;}

I also change the border from dashed to solid and increase the padding.

td, th {border:thin solid #000; padding:8px;}

Here is a sample of the page at this stage of the lesson :: Table with collapsed borders

Spanning Rows and Columns

When creating a table you sometimes want a cell to span across a row or column of content. Lets add HTML code to do both of these tricks.

To create a row that spans all 8 columns use this code. Please note, if you have a table with 3 column use colspan="3", if you table has 5 columns use colspan="5", etc...

<table summary="This table holds information about the perennial flowers in my garden. I have included the height, spread, exposure, foliage texture, foliage color, and a thumbnail of the flower.">

<caption>Favorite perennials from Linda's garden</caption>
<tr>
<th colspan="8">Perennial Flower Fact Sheet </th>
</tr>

To create code to span 2 rows I use this code.

<tr>
<td rowspan="2">coral bells</td>
<td rowspan="2">12"</td>
<td rowspan="2">12"</td>
<td rowspan="2">sun/shade</td>
<td rowspan="2">medium</td>
<td>maroon</td>
<td rowspan="2">white</td>
<td rowspan="2">
<img src="../thumbs/coral-feature.jpg" width="100" height="100" alt="coral bells" /></td>
</tr>

<tr>
<td>green</td>
</tr>

Here is a sample of the page at this stage of the lesson :: Table with colspan and rowspan

Adding color to the table rows, and table cells

I begin by adding a CSS style that changes the table color to white.

table {border:thin solid #000000; caption-side:bottom; margin:10px; border-spacing:0px; border-collapse:collapse; background-color:#ffffff;}

To add color to the rows and cells of a table I begin by adding these 2 new styles to the CSS file. This code will cause all the <th> elements to dislay in medium gold and all table rows with a class of "darkrow" in light gold.

th {background-color:#C2BA63;}
.darkrow {background-color:#e5de92;}

Now I add some HTML code. I assign the class of "darkrow" to every other <tr> element in the table code.

<tr class="darkrow">
<td>hostas</td>
<td>2'</td>
<td>18"</td>
<td>shade</td>.........

and

<tr class="darkrow">
<td>purple coneflower </td>
<td>2'6" </td>
<td>12"</td>
<td>sun</td> ..........

and

<tr class="darkrow">
<td>yarrow</td>
<td>2'</td>
<td>2'</td>
<td>sun</td>.............

I also added classes of green, maroon, white, etc... These classes are assigned to individual table data cells.

CSS code

.maroon {background-color:#49292D; color:#49292D;}
.green {background-color:#2B5929; color:#2B5929;}

HTML Code added to the table.

<td class="maroon">maroon</td>
<td rowspan="2" class="white">white</td>
<td rowspan="2"><img src="../thumbs/coral-feature.jpg" width="100" height="100" /></td>
</tr>
<tr>
<td class="green">green</td>
</tr>

Here is a sample of the page at this stage of the lesson :: Table with color added to table rows, and cells.

In the demo I added quite a few classes for color and also had a very complex table with 8 columns and 6 rows. You can chose to create a much simpler table. I have 2 examples below, use the one that best fits your needs.

Simple Table Example

Complex Table Example

Homework

Develop an HTML page which has 1 table with the following elements:
1. (10 pts) Include a table of at least four columns and four rows, using the table, tr, th, td, and caption elements. Also include a summary attribute.
2. (10 pts) Use CSS properties of background-color, color, and padding or margin to style your table. Use any other properties that appeal to you.
3. (10 pts) Use the colspan and rowspan attributes at least once each within your table code.
4. (10 pts) Include an image or a background image in your table.
Take Quiz
Upload your webpage and css file to the server.
Update your homework page so it now links to your table page.

CS 50.11B

table assignment explained