Advanced Search

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

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

Expand | Embed | Plain Text

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.