Week 9 Practical

Downloads

  • PSD Mockup
  • Start Folder

(files coming soon)

Download and unzip the Photoshop Mockup file and the Start Folder. Code the HTML and CSS to create the webpage designed in the Photoshop file.

The images folder within the Start Folder already has your web-ready background image in it.

Here are the background colors:

  • wrapper: white at 60% opacity
  • header: #ab688b
  • columns: #d7f7dd
  • footer: #c5d1b2

You may refer to prior lessons, your eBook, or online resources. You may ask for my help on one or two items, but I will not be guiding you through this review.

After you have had sufficient time to complete this on your own, I will demonstrate how I would do it.

Creating HTML 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 HTML 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

Tables Exercise

  1. Create a site folder named html-table for this exercise.
  2. Create an HTML5 page and save it as index.html.
  3. Recreate the table shown below using HTML.
    HTML table to code
  4. Create an external CSS file to style at least 3 table elements in your HTML page. Save it as styles.css and link to it from index.html.

Hints

  • Each cell in the first row is a table header.
  • The first cell in each row is a table header.
  • The Color Services row is all merged into a single cell.