Download - Tables overview 2010
![Page 1: Tables overview 2010](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b87f994a7959ce2d8b4637/html5/thumbnails/1.jpg)
++
TablesUsing HTML
![Page 2: Tables overview 2010](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b87f994a7959ce2d8b4637/html5/thumbnails/2.jpg)
++Today
Introduction to Tables
Instructor lead introduction to tables
Practice table exercises
![Page 3: Tables overview 2010](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b87f994a7959ce2d8b4637/html5/thumbnails/3.jpg)
Minimal Table Structure
<table><table>
</table></table>
Start a Start a TableTable
End a End a TableTable
![Page 4: Tables overview 2010](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b87f994a7959ce2d8b4637/html5/thumbnails/4.jpg)
Minimal Table Structure
<table>
</table>
<tr> </tr>
Table RowTable RowBeginBegin
Table RowTable RowEndEnd
![Page 5: Tables overview 2010](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b87f994a7959ce2d8b4637/html5/thumbnails/5.jpg)
Minimal Table Structure
<table>
</table>
<tr>
<tr><tr>
<tr>
</tr>
</tr></tr>
</tr>
<th><th></th></th>Table HeadTable Head
![Page 6: Tables overview 2010](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b87f994a7959ce2d8b4637/html5/thumbnails/6.jpg)
Minimal Table Structure
<table>
</table>
<tr> </tr>
<th> </th>
Cell Cell BegiBeginsns<td><td>
Cell Cell EndEnd
ss</td></td>
![Page 7: Tables overview 2010](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b87f994a7959ce2d8b4637/html5/thumbnails/7.jpg)
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>
![Page 8: Tables overview 2010](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b87f994a7959ce2d8b4637/html5/thumbnails/8.jpg)
++Table - Cell Padding
<table cellpadding=”2"cellpadding=”2"> <table cellpadding="#"cellpadding="#"> Adds space between the contents of a cell and it's border.
<table cellpadding=”10"cellpadding=”10">
![Page 9: Tables overview 2010](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b87f994a7959ce2d8b4637/html5/thumbnails/9.jpg)
++Table - Cell Spacing
<table cellspacing=”2"cellspacing=”2"> <table cellspacing="#"cellspacing="#"> Adds space between the cells of a table.
<table cellspacing=”10"cellspacing=”10">
![Page 10: Tables overview 2010](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b87f994a7959ce2d8b4637/html5/thumbnails/10.jpg)
++Table -Caption and Summary
Caption Element used for a title or brief description
<table><table><caption>Nutritional Information</caption><caption>Nutritional Information</caption>
Summary Attribute used to provide a more lengthy description
<table <table summary ="A listing of the calories summary ="A listing of the calories and fat content" >and fat content" >
![Page 11: Tables overview 2010](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b87f994a7959ce2d8b4637/html5/thumbnails/11.jpg)
++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="Name">Course Name</th>
<th abbr="Tutor">Course Tutor</th>
<th>Summary</th> <th>Code</th> <th>Fee</th>
</tr>
![Page 12: Tables overview 2010](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b87f994a7959ce2d8b4637/html5/thumbnails/12.jpg)
++Table -scope attribute
The scope attribute defines a way to associate header cells and data cells in a table.
<tr> <th scope="col">Name</th> <th>Item #</th> <th>Type</th> <th>Finish</th> <th>Price</th> </tr>
scope="col" scope="col" and scope="row" are the most common values.
![Page 13: Tables overview 2010](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b87f994a7959ce2d8b4637/html5/thumbnails/13.jpg)
++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> </thead></thead><tbody<tbody>>
</</tbody>tbody>
![Page 14: Tables overview 2010](https://reader036.vdocuments.net/reader036/viewer/2022062511/54b87f994a7959ce2d8b4637/html5/thumbnails/14.jpg)
++Table –colspan and rowspan attributes
<tr> <tr> <th <th COLSPAN="2"COLSPAN="2">Production>Production</th> </th> </tr></tr>
Use to span table cells across more than one row or column.
<tr> <th ROWSPAN="3">Production</th> <td>Raha Mutisya</td> <td>1493</td></tr>