Tables: setting padding, column width and column text-align via CSS


/ Published in: CSS
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!-- The CSS part -->
  2. table.week tbody tr td {padding:10px;text-align:center;background:url(../images/dots439bbe.png) repeat-x 0 100%;}
  3. table.week tbody tr td[headers=title] {width:191px;text-align:left;}
  4. table.week tbody tr td[headers=date] {width:100px;}
  5. table.week tbody tr td[headers=host] {width:52px;}
  6. table.week tbody tr td[headers=cost] {width:40px;}
  7. table.week tbody tr td[headers=notes] {text-align:left;}
  8.  
  9. <!-- The HTML part -->
  10. <table cellspacing="0" class="week" id="week1">
  11. <thead>
  12. <tr>
  13. <th id="title">Week One: Focus on Film</th>
  14. <th id="date">Date</th>
  15. <th id="host">Host</th>
  16. <th id="cost">Cost</th>
  17. <th id="notes">Notes</th>
  18. </tr>
  19. </thead>
  20. <tbody valign="top">
  21. <tr>
  22. <td headers="title"><a href="http://ucsd.tv/search-details.aspx?showID=17407" target="_blank">Jazz Camp Faculty on UCSD-TV</a></td>
  23. <td headers="date">3/1/10&nbsp;-&nbsp;3/31/10</td>
  24. <td headers="host">UCSD-TV</td>
  25. <td headers="cost">Free</td>
  26. <td headers="notes">Available on UCSD-TV</td>
  27. </tr>
  28. <tr>
  29. <td headers="title"><a href="http://ucsd.tv/search-details.aspx?showID=17223" target="_blank">Revelle Forum: Frank Bruni on UCSD-TV</a></td>
  30. <td headers="date">3/1/10&nbsp;-&nbsp;3/31/10</td>
  31. <td headers="host">UCSD-TV</td>
  32. <td headers="cost">Free</td>
  33. <td headers="notes">Available on UCSD-TV</td>
  34. </tr>
  35. <tr>
  36. <td headers="title"><a href="http://extension.ucsd.edu/studyarea/index.cfm?vAction=singleCourse&vCourse=GINT-81555" target="_blank">Advanced Screenwriting Workshop: Read and Critique</a></td>
  37. <td headers="date">3/4/10 &amp; 3/18/10</td>
  38. <td headers="host"></td>
  39. <td headers="cost">$</td>
  40. <td headers="notes"></td>
  41. </tr>
  42. <tr>
  43. <td headers="title"><a href="http://extension.ucsd.edu/studyarea/index.cfm?vAction=singleCourse&vCourse=LING-40095" target="_blank">Bookmaking for the ELI Classroom</a></td>
  44. <td headers="date">3/5/10&nbsp;-&nbsp;3/10/10</td>
  45. <td headers="host"></td>
  46. <td headers="cost">$</td>
  47. <td headers="notes"></td>
  48. </tr>
  49. <tr>
  50. <td headers="title"><a href="http://extension.ucsd.edu/studyarea/index.cfm?vAction=singleCourse&vCourse=GINT-81554" target="_blank">First Steps to Publishing</a></td>
  51. <td headers="date">3/6/10</td>
  52. <td headers="host"></td>
  53. <td headers="cost">$</td>
  54. <td headers="notes"></td>
  55. </tr>
  56. </tbody>
  57. </table>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.