Eps 24: Building A Table – Talking HTML

Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out

W3 Schools

The headers attribute specifies one or more header cells a table cell is related to and has no visual effect in ordinary web browsers, but can be used by screen readers.

Please go to iTunes and Stitcher and rate the show! Ratings get listeners!!

http://www.Webdevpod.com for all the content and links

@TNPWDesign

@tommnorman

DreamHost promo code – tnpw

HTML Code

<div id=”table”>
<table>
   <tr class=”odd”>
      <th id=”project”>Project Type</th>
      <th id=”price”>Price</th>
      <th id=”description”>General Requirements</th>
   </tr>
   <tr>
      <td headers=”project”>Websites</td>
      <td headers=”price”>$750+</td>
      <td headers=”description”>Personal, Business (non e-commerce) or Informational.</td>
   </tr>
   <tr class=”odd”>
      <td headers=”project”>E-Commerce</td>
      <td headers=”price”>$2,500+</td>
      <td headers=”description”>Websites in which selling merchandise is the main function.</td>
   </tr>
   <tr>
      <td headers=”project”>Hourly Rate</td>
      <td headers=”price”>$30/hour</td>
      <td headers=”description”>Reserved for projects under 10 hours of work and website maintenance.</td>
   </tr>
   <tr class=”odd”>
      <td headers=”project”>Charity and Non-profit</td>
      <td headers=”price”>Negotiable</td>
      <td headers=”description”>Reserved for organizations that deal with charities and non-profit organization.</td>
   </tr>
   <tr>
      <td headers=”project”>Podcast Setup</td>
      <td headers=”price”>$20/hour (minimum 1 hr)</td>
      <td headers=”description”>The setup and demonstration of the programs and options available in beginning and maintaining a FREE! audio and/or video podcast.</td>
   </tr>
</table>
</div>

CSS Code

div#table {
   width: 600px;
   font-size: 10px;
   margin: 5px auto 5px auto;
}
table {
   width: 400px;
   border: 3px solid #000;
   margin: auto;  
   padding: 10px;
   border-spacing: 0;
   text-align: center;
}
td, th {
   border: 1px solid #000;
   padding: 10px;
   text-align: center;
}
tr.odd {
   background: #333;
   color: #FFF;
}
table tr th {
   font-size: 1.6em;
   font-weight: bold;
   background: #999;
}
table tr td { font-size: 1.3em;
}

Podcast: Play in new window | Download (Duration: 14:08 — 12.9MB)

Subscribe: Apple Podcasts | Android | Email | RSS