EASINGINTO WEBDEVELOPMENT3.3 TABLES
1   INTRODUCTION    2   HTML    3   TABLES    4   FORMS    5   HTTP    6   CSS    7   CSS FRAMEWORKS    8   DIGITAL MEDIA2...
What are tables?3       Tables can be used to:         display rows and columns of textual data.         create effects...
Basic Table Structure4     <table> starts a table.       <tr> table row, starts a new row.        <td> table data, starts ...
<table> Attributes5       border           lets you set a border around each cell       cellspacing           sets ext...
6
<tr> Attributes7       They are:          align             align   content of rows horizontally left, right, or center...
<td> Attributes8       Most f        M of a tables structure and appearance is                                controlled ...
Spanning Rows and Columns9       Cells in a table can occupy the space of more than        one row or column via the rows...
colspan example<p>     <table border="1" width="75%">       <tr>         <td colspan=2>one</td>         <td>two</td>      ...
Alignment11                                                This text needs to be at the top of the cell.                  ...
Alignment12                                                        <table border=2 width=300 cellspacing=5>               ...
Alignment13        While we can align elements via align and valign,         we should use CSS instead.
Tables for Layout14        While the table element was intended for         displaying tabular data, until the last few y...
15
16
Tables for Layout17        Currently, using t bl for layout i not         C     tl     i tables f l        t is t        ...
Accessibility Features18        A d t table can b h d to comprehend for           data t bl     be hard t      h df      ...
Grouping Table Rows19        If you use the thead, tfoot and tbody         elements, you must use every element.         ...
Grouping Table Rows20      <table border="1">           <caption>This is a caption</caption>           <thead>            ...
<th> element21        If you do not want the bother of row groups, you         can instead use the <th> element (instead ...
Header & Data relationship22        You can increase the accessibility of your tables by         establishing the relatio...
Header & Data relationship23     <table summary="This table charts all of the Flames Stanley Cup Appearances">      <capti...
Upcoming SlideShare
Loading in...5
×

Web I - 03 - Tables

630

Published on

Learning XHTML Tables for Web Development 1 Course suitable for degree following CIT/CIS/CS ACM model curriculum.

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
630
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web I - 03 - Tables

  1. 1. EASINGINTO WEBDEVELOPMENT3.3 TABLES
  2. 2. 1 INTRODUCTION 2 HTML 3 TABLES 4 FORMS 5 HTTP 6 CSS 7 CSS FRAMEWORKS 8 DIGITAL MEDIA2 9 USABILITY
  3. 3. What are tables?3  Tables can be used to:  display rows and columns of textual data.  create effects common to print, such as columns, paragraph spacing, hanging indents, extra white space.  create a complex page layout.  piece together a complex i i h l image.
  4. 4. Basic Table Structure4 <table> starts a table. <tr> table row, starts a new row. <td> table data, starts a column with a row. </td> ends table data. </tr> ends a table row. </table> ends a table table. <TABLE> <TR> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> </TR> </TABLE>
  5. 5. <table> Attributes5  border  lets you set a border around each cell  cellspacing  sets extra space between the cells. Default is 1  cellpadding  puts extra space inside the cells  frame f  Specifies how outer border should be displayed  rules  Specifies horizontal/vertical divider lines  summary  Specifies table summary for accessibility  width  sets the width of table in pixels or percent of window <table border 0 width=70% cellspacing 0 cellpadding 0 > border=0 idth 70% cellspacing=0 cellpadding=0
  6. 6. 6
  7. 7. <tr> Attributes7  They are:  align  align content of rows horizontally left, right, or center  valign g  align content of rows vertically top, bottom, or middle  Row attributes override table settings. <tr align=left valign=top>
  8. 8. <td> Attributes8  Most f M of a tables structure and appearance is controlled at the cell level.  align li  align content of rows horizontally left, right, or center  valign li  align content of rows vertically top, bottom, or middle  colspan  makes cell extend across the specified number of cells  rowspan  makes cell extend across the specified number of rows <td align=left valign=top width=50>
  9. 9. Spanning Rows and Columns9  Cells in a table can occupy the space of more than one row or column via the rowspan or colspan attributes of the td element. <table border=2 width=300 cellspacing=5> <tr> <td colspan=2>Philosophers</td> </tr> <tr> <td width=50%>Author</td><td width=50%>Title</td> </tr> </table> <table border=2 width=300 cellspacing=5> <tr> <td rowspan=2>Names</td><td width=50%>Hobbes</td> </tr> <tr> <td width=50%>Locke</td> </tr> </table>
  10. 10. colspan example<p> <table border="1" width="75%"> <tr> <td colspan=2>one</td> <td>two</td> </tr> <tr> <td>three</td> <td>four</td> <td>five</td> </tr> <tr> <td colspan=3>six</td> </tr> </table> rowspan example<p> <table border="1" width="75%"> <tr> <td rowspan=2>one</td> <td>two</td> <td rowspan=3>three</td> </tr> <tr> <td>four</td> </tr> / <tr> <td>five</td> <td>six</td> </tr> </table>10
  11. 11. Alignment11 This text needs to be at the top of the cell. How do you do it? <table border=2 width=300 cellspacing=5> <tr> <t > <td><img src="bread.jpg"></td> <td>title</td> </tr> </table> <table border=2 width=300 cellspacing=5> <tr> <td><img src="bread.jpg"></td> <td valign=top>title</td> g p / </tr> </table>
  12. 12. Alignment12 <table border=2 width=300 cellspacing=5> <tr> <td><img src="bread.jpg"></td><td>title</td> </tr> </table> This text needs to be in the middle of the cell. How do you do it? <table border=2 width=300 cellspacing=5> <tr> <td><img src="bread.jpg"></td><td align=center>title</td> </tr> </table>
  13. 13. Alignment13  While we can align elements via align and valign, we should use CSS instead.
  14. 14. Tables for Layout14  While the table element was intended for displaying tabular data, until the last few years, tables were generally used for layout.
  15. 15. 15
  16. 16. 16
  17. 17. Tables for Layout17  Currently, using t bl for layout i not C tl i tables f l t is t recommended, but is still quite common.  Table-based layouts cause p y of problems for y plenty p accessibility, unusual display devices (PDAs, phones, etc), and search engines.  As well, they can be very difficult to modify and maintain when complicated.  Recommended to use CSS instead for most layouts. U Using CSS this way is unfortunately somewhat d ff l h f l h difficult.  Ideally, tables should be used only for displaying tabular data.  Using a table to layout a form is also perhaps okay.
  18. 18. Accessibility Features18  A d t table can b h d to comprehend for data t bl be hard t h df  Those with sight disabilities  Search engines  To help with accessibility, you can  Add a <caption> element to a table  Provides descriptive info about table as a whole  Placed within table  Table rows can be grouped into <thead>, <tbody>, and <tfoot> sections.  This division enables browsers to support scrolling of table bodies independently of the table header and footer.  When long tables are printed, the table header and footer information may be repeated on each page that contains table data data.
  19. 19. Grouping Table Rows19  If you use the thead, tfoot and tbody elements, you must use every element.  They should appear in this order: thead, tfoot and tbody, so that browsers can render the foot before receiving all the data.  Each of these groups contains <tr> elements.
  20. 20. Grouping Table Rows20 <table border="1"> <caption>This is a caption</caption> <thead> <tr><th>Artist</th><th>Title</th></tr> </thead> <tfoot> <tr><th colspan="2">This is my CD collection</th></tr> </tfoot> <tbody> <tr> <td>Fred Smith</td> <td>Greatest Songs</td> </tr> <tr> <td>Randy C td R d Connolly</td> ll /td <td>Hot HTML Hits</td> </tr> </tbody> </table>
  21. 21. <th> element21  If you do not want the bother of row groups, you can instead use the <th> element (instead of <td> elements) to indicate that cells in the first row of a data table are heading cells. <table border = "1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Cell A</td> <td>Cell B</td> </tr> </t > </table>
  22. 22. Header & Data relationship22  You can increase the accessibility of your tables by establishing the relationship between the individual table cells and their headers.  You do this by adding a unique id to each <th> element.
  23. 23. Header & Data relationship23 <table summary="This table charts all of the Flames Stanley Cup Appearances"> <caption>Calgary Flames in the Stanley Cup Final</caption> <tr> <th id="year">Year</th> y <th id="opponent">Opponent</th> </tr> <tr> <td>1986</td> <td>Montreal</td> </tr> <tr> <td>1989</td> <td>Montreal</td> </tr> / <tr> <td>2004</td> <td>Tampa Bay</td> </tr> </table> Voice reader would speak the following for the last row "Year 2004 Opponent Tampa Bay"
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×