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.

Html Tables


Published on

Published in: News & Politics, Technology
  • Be the first to comment

  • Be the first to like this

Html Tables

  1. 1. Information Technology II HTML Tables
  2. 2. Creating Table
  3. 3. Table Elements <ul><ul><li><table> --- </table> </li></ul></ul><ul><ul><ul><ul><li>defines a table in HTML document </li></ul></ul></ul></ul><ul><ul><li><tr> --- </tr> </li></ul></ul><ul><ul><ul><ul><li>defines a table row </li></ul></ul></ul></ul><ul><ul><li><th> --- </th> </li></ul></ul><ul><ul><ul><ul><li>defines a table header </li></ul></ul></ul></ul><ul><ul><li><td> --- </td> </li></ul></ul><ul><ul><ul><ul><li>defines a table’s data cell </li></ul></ul></ul></ul>
  4. 4. <ul><ul><li><table> start of table </li></ul></ul><ul><ul><li><tr> start of row 1 </li></ul></ul><ul><ul><li><th> --- </th> cell in row 1 column 1 – 1 st heading </li></ul></ul><ul><ul><li><th> --- </th> cell in row 1 column 2 – 2 nd heading </li></ul></ul><ul><ul><li></tr> end of row 1 </li></ul></ul><ul><ul><li><tr> start of row 2 </li></ul></ul><ul><ul><li><td> --- </td> cell in row 2 column 1 – data 1 </li></ul></ul><ul><ul><li><td> --- </td> cell in row 2 column 2 – data 2 </li></ul></ul><ul><ul><li></tr> end of row 2 </li></ul></ul><ul><ul><li><tr> start of row 3 </li></ul></ul><ul><ul><li><td> --- </td> cell in row 3 column 1 – data 3 </li></ul></ul><ul><ul><li><td> --- </td> cell in row 3 column 2 – data 4 </li></ul></ul><ul><ul><li></tr> end of row 3 </li></ul></ul><ul><ul><li><caption> --- </caption> table caption </li></ul></ul><ul><ul><li></table> end of table </li></ul></ul>Table Structure
  5. 5. Setting the table <ul><li>Border </li></ul><ul><ul><li><table border=“yes/no”> ---- </table> (if yes, =“n”) </li></ul></ul><ul><li>Color </li></ul><ul><ul><li><table bordercolor=“hexadecimal/basic”> ---- </table> </li></ul></ul><ul><li>Background </li></ul><ul><ul><li>Image </li></ul></ul><ul><ul><ul><li><table background=“pic.jpg”> ---- </table> </li></ul></ul></ul><ul><ul><li>Color </li></ul></ul><ul><ul><ul><li><table bgcolor=“hexadecimal/basic”> ---- </table> </li></ul></ul></ul><ul><li>Alignment </li></ul><ul><ul><li><table align=“center/left/right”> ---- </table> </li></ul></ul><ul><ul><li>* the same with <th> and <td> </li></ul></ul>
  6. 6. Setting the cell <ul><ul><li>Cell Padding </li></ul></ul><ul><ul><ul><ul><li>the space between the cell border and cell contents </li></ul></ul></ul></ul><ul><ul><ul><ul><li><table cellpadding=“n”> ---- </table> </li></ul></ul></ul></ul><ul><ul><li>Cell Spacing </li></ul></ul><ul><ul><ul><ul><li>the space between cells </li></ul></ul></ul></ul><ul><ul><ul><ul><li><table cellspacing=“n”> ---- </table> </li></ul></ul></ul></ul><ul><ul><li>Cell Background </li></ul></ul><ul><ul><ul><li>Color </li></ul></ul></ul><ul><ul><ul><ul><li><th bgcolor=“#FFFFFF/white”> ---- </th> </li></ul></ul></ul></ul><ul><ul><ul><li>Image </li></ul></ul></ul><ul><ul><ul><ul><li><td background=“pic.jpg> ---- </td> </li></ul></ul></ul></ul><ul><ul><li>Width and Height </li></ul></ul><ul><ul><li> <th width=“n”> ---- </th> </li></ul></ul><ul><ul><li> <td height=“n”> ---- </td> </li></ul></ul><ul><ul><li> * same with <table> </li></ul></ul>
  7. 7. Spanning a Cell <ul><ul><li>Row Span </li></ul></ul><ul><ul><ul><ul><li>merge cells in row </li></ul></ul></ul></ul><ul><ul><ul><ul><li><th rowspan=“n”> ---- </th> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><td rowspan=“n”> ---- </td> </li></ul></ul></ul></ul><ul><ul><li>where n is the number of rows to be merged </li></ul></ul><ul><ul><li>Column Span </li></ul></ul><ul><ul><ul><ul><li>merge cells in column </li></ul></ul></ul></ul><ul><ul><ul><ul><li><th colspan=“n”> ---- </th> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><td colspan=“n”> ---- </td> </li></ul></ul></ul></ul><ul><ul><li>where n is the number of columns to be merged </li></ul></ul>
  8. 8. Assignment <ul><li>Do Exercises 67, 68, 69, 70 and paste the links of these exercises to your page for checking. Pass this on or before Thursday. </li></ul>