Eps 24: Building A Table – Talking HTML

Spela upp

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;
}