Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

3.1 xhtml tables


Published on

  • Be the first to comment

  • Be the first to like this

3.1 xhtml tables

  1. 1. XHTML Tables
  2. 2. Tables: <ul><li>Allow us to display information on the page in a uniform fashion. </li></ul><ul><li>Work well for organizing groups of words, images, and links. </li></ul><ul><li>Are not to be used for layout of an entire web page, only some data within the page. </li></ul>
  3. 3. Tables Row
  4. 4. Tables Column
  5. 5. Tables <ul><li>3 Rows </li></ul><ul><li>2 Columns </li></ul>
  6. 6. Adding a Table: <ul><li><table width= &quot;200&quot; > </li></ul><ul><li></table> </li></ul>The value of the width attribute determines how wide the table will be in pixels. A percentage of the screen can be specified instead, but the resulting table would then look different to different viewers, depending on how wide their screens are.
  7. 7. Specifying the Border: <ul><li><table width=&quot;200&quot; border= &quot;1&quot; > </li></ul><ul><li></table> </li></ul>The value of the border attribute determines how thick the lines around the table cells will be, as measured in pixels. If this attribute is not specified, no lines will show in the table.
  8. 8. Adding Rows: <ul><li><table width=&quot;200&quot; border=&quot;1&quot;> </li></ul><ul><li><tr> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>The <tr> tag adds a table row. If nothing more is defined inside the <tr> tags, the row will take up the entire column.
  9. 9. Setting Cells and Columns: <ul><li><table width=&quot;200&quot; border=&quot;1&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><td> </td> </li></ul><ul><li><td> </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>The <td> (&quot;table data&quot;) tag identifies an individual cell of a table. The available space will be evenly divided between the number of cells specified. In this example, we have created two columns in the first row.
  10. 10. Completing the Table: <ul><li><table width=&quot;200&quot; border=&quot;1&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><td> </td> </li></ul><ul><li><td> </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> </td> </li></ul><ul><li><td> </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> </td> </li></ul><ul><li><td> </td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>Here we have specified the cells for the second and third row. We now have a uniform table consisting of two columns and three rows.
  11. 11. Adding Text to the Table: <ul><li><table width=&quot;200&quot; border=&quot;1&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><td>State </td> </li></ul><ul><li><td>Capital </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>Arizona </td> </li></ul><ul><li><td>Phoenix </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>Georgia </td> </li></ul><ul><li><td>Atlanta </td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>Atlanta Georgia Phoenix Arizona Capital State
  12. 12. Adding Table Headers: <ul><li><table width=&quot;200&quot; border=&quot;1&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><th> State </th> </li></ul><ul><li><th> Capital </th> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>Arizona </td> </li></ul><ul><li><td>Phoenix </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>Georgia </td> </li></ul><ul><li><td>Atlanta </td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>By using <th> (&quot;table header&quot;) tags in the first row instead of <td>, you are defining these cells as special headings in the table. The web browser will then know to treat them differently. Atlanta Georgia Phoenix Arizona Capital State
  13. 13. Table Syntax: <ul><li><table width=&quot;200&quot; border=&quot;1&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><th>State </th> </li></ul><ul><li><th>Capital </th> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>Arizona </td> </li></ul><ul><li><td>Phoenix </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>Georgia </td> </li></ul><ul><li><td>Atlanta </td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>Make sure there is a closing tag for each opening tag and be careful to nest the elements properly. Atlanta Georgia Phoenix Arizona Capital State