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.

4.1 advanced tables


Published on

  • Be the first to comment

  • Be the first to like this

4.1 advanced tables

  1. 1. Advanced Tables
  2. 2. Spanning Columns and Rows: So far, our tables have been relatively simple, with a uniform grid of rows and columns: XHTML allows us to create more complex table elements by spanning specified rows or columns:
  3. 3. Spanning Columns: <ul><li><table width=&quot;300&quot; border=&quot;1&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><td colspan=&quot;3&quot; >Span 3 Columns</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>R2C1</td> </li></ul><ul><li><td>R2C2</td> </li></ul><ul><li><td>R2C3</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>R3C1</td> </li></ul><ul><li><td>R3C2</td> </li></ul><ul><li><td>R3C3</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>By adding the colspan=&quot;3&quot; to the <td> element, we are telling the browser that we want to stretch a single table cell across the space of three columns. R3C2 R2C2 R3C3 R3C1 R2C3 R2C1 Span 3 Columns
  4. 4. Spanning Rows: <ul><li><table width=&quot;300&quot; border=&quot;1&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><td rowspan=&quot;3&quot; >Span 3 Rows</td> </li></ul><ul><li><td>R1C2</td> </li></ul><ul><li><td>R1C3</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>R2C2</td> </li></ul><ul><li><td>R2C3</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>R3C2</td> </li></ul><ul><li><td>R3C3</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>The rowspan=&quot;3&quot; in the <td> element accomplishes the same thing, but stretches a cell across multiple rows instead. R1C3 R1C2 Span 3 Rows R3C2 R2C2 R3C3 R2C3