STYLING TABLES

Styling a table can be a challenge. However, once you create it, you can save it as a style sheet and use it wherever you need to. The table we will be creating has a nice style applied to it as well as a nice hover effect when the user mouse over a table row. When the user click on a listing, it will take them to the corresponding web site page.

  1. Create a table using the following code by copying and pasting it into your page in the Code View:
    TIP: You can shorten the table or add you own data.


<table cellspacing="0" summary="Top Job Sites.">
<caption>
<strong>LOOKING FOR A JOB? </strong><br />
<strong>CHECK OUT SOME OF THESE WEBSITES!</strong><br />
</caption>

<colgroup>
<col id="PlaylistCol" />
<col id="trackCol" />
<col id="artistCol" />
<col id="albumCol" />
</colgroup>

<thead>
<tr>
<th width="215" scope="col">Job Sites</th>
<th width="579" scope="col">Comments</th>
</tr>
</thead>

<tbody>
<tr class="odd">
<td><a href="http://www.craiglist.org" target="_new">CraigList</a></td>
<td>Craigslist: classifieds for jobs,&nbsp;etc.</td>
</tr>

<tr>
<td><a href="http://www.austin360.com" target="_new">Austin 360</a></td>
<td>Austin TX entertainment, events, food, movies, music | Austin360.com</td>
</tr>

<tr class="odd">
<td><a href="http://www.indeed.com/" target="_new">Indeed</a></td>
<td>Job Search | one search. all jobs. Indeed.com</td>
</tr>

<tr>
<td><a href="http://www.monster.com/" target="_new">Monster</a></td>
<td>Find Jobs. Build a Better Career. Find Your Calling. | Monster.com</td>
</tr>

<tr class="odd">
<td><a href="http://www.careerbuilder.com/" target="_new">Careerbuilder</a></td>
<td>Jobs - The Largest Job Search, Employment &amp; Careers Site </td>
</tr>

<tr>
<td><a href="http://www.dice.com/" target="_new">Dice</a></td>
<td>Dice.com - Job Search for Technology Professionals</td>
</tr>

<tr class="odd">
<td><a href="http://www.workintexas.com/" target="_new">Workintexas</a></td>
<td>WorkInTexas.com Home: Helping Texans Work Better.</td>
</tr>

<tr>
<td><a href="http://www.ineedajob.com/" target="_new">I need a job</a></td>
<td>Jobs and Careers in All Cities - ineedajob.com</td>
</tr>

<tr class="odd">
<td><a href="http://www.austinjobs.com/" target="_new">Austin jobs</a></td>
<td>Austin Jobs Online - Your Online Employment Service</td>
</tr>

<tr>
<td><a href="http://www.getajob.com/" target="_new">Get A Job</a></td>
<td>Get a Job: Job Search</td>
</tr>

<tr class="odd">
<td><a href="http://wwww.simplyhired.com" target="_new">Simply Hired</a></td>
<td>Job Search Made Simple | Simply Hired</td>
</tr>

<tr>
<td><a href="http://www.jobing.com/" target="_new">Jobing.com</a></td>
<td>Search our job listings to find great local jobs in your area</td>
</tr>

<tr class="odd">
<td><a href="http://www.bizjournals.com/" target="_new">Bizjournals</a></td>
<td>Business News | The Business Journals</td>
</tr>

<tr>
<td><a href="http://www.workaustin.com/" target="_new">Workaustin</a></td>
<td>Austin Jobs. Search Jobs in Austin, Texas | Jobing.com</td>
</tr>

<tr class="odd">
<td><a href="http://www.ci.austin.tx.us/hr/" target="_new">E-careers</a></td>
<td>City of Austin - City of Austin - Human Resources</td>
</tr>
<tr>
<td><a href="http://www.thingamajob.com/" target="_new">Thingamajob</a></td>
<td>Find a Job from thousands of listings with Thingamajob.com</td>
</tr>
<tr class="odd">
<td><a href="http://www.statesman.com/jobs" target="_new">Statesman Jobs</a></td>
<td>Austin Jobs, Career Advice, Job Fairs, Events &amp; Employment Information</td>
</tr>
<tr>
<td><a href="http://www.employmentguide.com/" target="_new">EmploymentGuide</a></td>
<td>Job Search for Full and Part Time Jobs</td>
</tr>
<tr class="odd">
<td><a href="http://www.jobpostings.net/" target="_new">Job Postings</a></td>
<td>Jobpostings.ca | Canada's Student Job Site. | Entry Level jobs</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="odd">
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

  1. Download table.css and unzip it in your project or page.
  2. Attach the table to the table.css by clicking on the Attach Style Sheet icon at the bottom of the CSS panel. Preview the following table in Live View or in a browser.
    TIP: Examine the table.css file to see how the rules are being applied to the table and then change the rules (i.e., colors) to match the look and feel of your page or web site.
LOOKING FOR A JOB?
CHECK OUT SOME OF THESE WEBSITES!
Job Sites Comments
CraigList Craigslist: classifieds for jobs, etc.
Austin 360 Austin TX entertainment, events, food, movies, music | Austin360.com
Indeed Job Search | one search. all jobs. Indeed.com
Monster Find Jobs. Build a Better Career. Find Your Calling. | Monster.com
Careerbuilder Jobs - The Largest Job Search, Employment & Careers Site
Dice Dice.com - Job Search for Technology Professionals
Workintexas WorkInTexas.com Home: Helping Texans Work Better.
I need a job Jobs and Careers in All Cities - ineedajob.com
Austin jobs Austin Jobs Online - Your Online Employment Service
Get A Job Get a Job: Job Search
Simply Hired Job Search Made Simple | Simply Hired
Jobing.com Search our job listings to find great local jobs in your area
Bizjournals Business News | The Business Journals
Workaustin Austin Jobs. Search Jobs in Austin, Texas | Jobing.com
E-careers City of Austin - City of Austin - Human Resources
Thingamajob Find a Job from thousands of listings with Thingamajob.com
Statesman Jobs Austin Jobs, Career Advice, Job Fairs, Events & Employment Information
EmploymentGuide Job Search for Full and Part Time Jobs
Job Postings Jobpostings.ca | Canada's Student Job Site. | Entry Level jobs