• Like
  • Save
Tables overview 2010
Upcoming SlideShare
Loading in...5
×
 

Tables overview 2010

on

  • 482 views

Basic information on the creation of tables using HTML

Basic information on the creation of tables using HTML

Statistics

Views

Total Views
482
Views on SlideShare
482
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Tables overview 2010 Tables overview 2010 Presentation Transcript

    • Tables Using HTML
    • Today
      • Introduction to Tables
      • Instructor lead introduction to tables
      • Practice table exercises
    • Minimal Table Structure <table> </table> Start a Table End a Table
    • Minimal Table Structure <table> </table> <tr> </tr> Table Row Begin Table Row End
    • Minimal Table Structure <table> </table> <tr> <tr> <tr> <tr> </tr> </tr> </tr> </tr> <th> </th> Table Head
    • Minimal Table Structure <table> </table> <tr> </tr> <th> </th> Cell Begins <td> Cell Ends </td>
    • 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>
    • Table - Cell Padding
      • <table cellpadding=”2&quot; >
      • <table cellpadding=&quot;#&quot; > Adds space between the contents of a cell and it's border.
      • <table cellpadding=”10&quot; >
    • Table - Cell Spacing
      • <table cellspacing=”2&quot; >
      • <table cellspacing=&quot;#&quot; > Adds space between the cells of a table.
      • <table cellspacing=”10&quot; >
    • Table - Caption and Summary
      • Caption Element used for a title or brief description <table> <caption>Nutritional Information</caption>
      • Summary Attribute used to provide a more lengthy description <table summary =&quot;A listing of the calories and fat content&quot; >
    • Table - abbr attribute
      • The abbr attribute specifies a shorter version of the content in a cell
      • 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.
      • <tr>
      • <th abbr=&quot;Name&quot; >Course Name</th>
      • <th abbr=&quot;Tutor&quot; >Course Tutor</th>
      • <th>Summary</th> <th>Code</th> <th>Fee</th>
      • </tr>
    • Table - scope attribute
      • The scope attribute defines a way to associate header cells and data cells in a table.
      <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.
    • Table -
      • 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.
      • <thead> & <tbody>
      <table> </table> <tr> <tr> <tr> <tr> </tr> </tr> </tr> </tr> <th> </th> <thead> </thead> <tbody> </tbody>
    • Table – colspan and rowspan attributes
      • <tr> <th COLSPAN=&quot;2&quot; >Production </th> </tr>
      • Use to span table cells across more than one row or column.
      • <tr> <th ROWSPAN=&quot;3&quot; >Production </th> <td>Raha Mutisya</td> <td>1493</td> </tr>