Tables overview 2010

578 views
532 views

Published on

Basic information on the creation of tables using HTML

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
578
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tables overview 2010

  1. 1. Tables Using HTML
  2. 2. Today <ul><li>Introduction to Tables </li></ul><ul><li>Instructor lead introduction to tables </li></ul><ul><li>Practice table exercises </li></ul>
  3. 3. Minimal Table Structure <table> </table> Start a Table End a Table
  4. 4. Minimal Table Structure <table> </table> <tr> </tr> Table Row Begin Table Row End
  5. 5. Minimal Table Structure <table> </table> <tr> <tr> <tr> <tr> </tr> </tr> </tr> </tr> <th> </th> Table Head
  6. 6. Minimal Table Structure <table> </table> <tr> </tr> <th> </th> Cell Begins <td> Cell Ends </td>
  7. 7. Minimal Table Structure <table> <tr><th>Name</th><th><Item #</th><th>Type </th><th><Finish</th><th>Price</th></tr> <tr><td>Bacchus</td><td>48059</td><td>Wall Mount </td><td>Interior Plaster</td><td>$95</td></tr> … </table>
  8. 8. Table - Cell Padding <ul><li><table cellpadding=”2&quot; > </li></ul><ul><li><table cellpadding=&quot;#&quot; > Adds space between the contents of a cell and it's border. </li></ul><ul><li><table cellpadding=”10&quot; > </li></ul>
  9. 9. Table - Cell Spacing <ul><li><table cellspacing=”2&quot; > </li></ul><ul><li><table cellspacing=&quot;#&quot; > Adds space between the cells of a table. </li></ul><ul><li><table cellspacing=”10&quot; > </li></ul>
  10. 10. Table - Caption and Summary <ul><li>Caption Element used for a title or brief description <table> <caption>Nutritional Information</caption> </li></ul><ul><li>Summary Attribute used to provide a more lengthy description <table summary =&quot;A listing of the calories and fat content&quot; > </li></ul>
  11. 11. Table - abbr attribute <ul><li>The abbr attribute specifies a shorter version of the content in a cell </li></ul><ul><li>Abbreviated names should be short since user agents may render them repeatedly. For instance, speech synthesizers may render the abbreviated headers relating to a particular cell before rendering that cell's content. </li></ul><ul><li><tr> </li></ul><ul><li><th abbr=&quot;Name&quot; >Course Name</th> </li></ul><ul><li><th abbr=&quot;Tutor&quot; >Course Tutor</th> </li></ul><ul><li><th>Summary</th> <th>Code</th> <th>Fee</th> </li></ul><ul><li></tr> </li></ul>
  12. 12. Table - scope attribute <ul><li>The scope attribute defines a way to associate header cells and data cells in a table. </li></ul><tr> <th scope=&quot;col&quot; >Name</th> <th>Item #</th> <th>Type</th> <th>Finish</th> <th>Price</th> </tr> scope=&quot;col&quot; and scope=&quot;row&quot; are the most common values.
  13. 13. Table - <ul><li>These elements will not affect the layout of the table by default. However, you can use CSS to let these elements affect the table's layout. </li></ul><ul><li><thead> & <tbody> </li></ul><table> </table> <tr> <tr> <tr> <tr> </tr> </tr> </tr> </tr> <th> </th> <thead> </thead> <tbody> </tbody>
  14. 14. Table – colspan and rowspan attributes <ul><li><tr> <th COLSPAN=&quot;2&quot; >Production </th> </tr> </li></ul><ul><li>Use to span table cells across more than one row or column. </li></ul><ul><li><tr> <th ROWSPAN=&quot;3&quot; >Production </th> <td>Raha Mutisya</td> <td>1493</td> </tr> </li></ul>

×