1 / 14

HTML Tables

HTML Tables. Introduction to Tables Table Format Table Captions Table Example Excercise. Introduction to Tables . Why Tables? Organized layout of information Allows good organization of webpage Can be used to replace static frames. Table Format. <TABLE options> <TR options >

brigney
Download Presentation

HTML Tables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Tables Introduction to Tables Table Format Table Captions Table Example Excercise

  2. Introduction to Tables Why Tables? • Organized layout of information • Allows good organization of webpage • Can be used to replace static frames

  3. Table Format <TABLE options> <TR options> <TH options> … </TH> <TD options> …</TD> </TR> </TABLE>

  4. <table> options border = [0/1] cellpadding = [0..] cellspacing = [0..] width = [0..100%] / x (x is a pixel value)

  5. Examples <table border="1"> <tr><th>Year</th><th>Sales</th></tr> <tr><td>2000</td><td>$18M</td></tr> <tr><td>2001</td><td>$25M</td></tr> <tr><td>2002</td><td>$36M</td></tr> </table> If you add the following : <table border="1" cellpadding="10">

  6. Examples By contrast the cellspacing attribute sets the space between the cells. Setting the cell spacing to 10: <table border="1" cellpadding="10" cellspacing="10"> has the effect:

  7. Examples Table Width You can set the width of the table using the width attribute. The value is either the width in pixels or a percentage value representing the percentage of the space available between the left and right margins. For instance to set the width to 80% of the margins: <table border="1" cellpadding="10" width="80%">

  8. <tr> options (table row) align = [left|center|right] valign = [top|middle|bottom]

  9. Examples You can change alignment using the align attribute, which can be added to each cell or to the row (tr element). It is used with the values "left", "center" or "right": <table border="1" cellpadding="10" width="80%"> <tr align="center"> <th>Year</th><th>Sales</th></tr> <tr align="center"><td>2000</td><td>$18M</td></tr> <tr align="center"><td>2001</td><td>$25M</td></tr> <tr align="center"><td>2002</td><td>$36M</td></tr> </table>

  10. <th> options (table header) rowspan = [0..] colspan = [0..] bgcolor = [rgb colour code|colour]

  11. Examples <table border="1" cellpadding="10" width="80%"> <tr align="center"> <th rowspan="2">Year</th><th colspan="3">Sales</th></tr> <tr align="center"><th>North</th><th>South</th><th>Total</th></tr> <tr align="center"> <td>2000</td><td>$10M</td><td>$8M</td><td>$18M</td> </tr> <tr align="center"><td>2001</td><td>$14M</td><td>$11M</td><td>$25M</td> </tr> </table>

  12. Example

  13. <td> options (table data) width = [0..100%] bgcolor = [rgb colour code|colour] align = [left|center|right] valign = [top|middle|bottom]

  14. Example <table border=“1" cellspacing=“10" cellpadding="10"> <tr> <th bgcolor="#CCCC99">Year</th> <th bgcolor="#CCCC99">Sales</th> </tr> <tr> <td bgcolor="#FFFF66">2000</td> <td bgcolor="#FFFF66">$18M</td> </tr> <tr> <td bgcolor="#FFFF66">2001</td> <td bgcolor="#FFFF66">$25M</td> </tr> <tr> <td bgcolor="#FFFF66">2002</td> <td bgcolor="#FFFF66">$36M</td> </tr> </table>

More Related