![<table> options
border = [0/1]
cellpadding = [0..]
cellspacing = [0..]
width = [0..100%] / x (x is a pixel value)](https://image.slidesharecdn.com/tables-240729054716-246cd7b5/85/Tables-of-html-sebagai-bahan-untuk-membuat-tabel-ppt-4-320.jpg)
![<tr> options (table row)
align = [left|center|right]
valign = [top|middle|bottom]](https://image.slidesharecdn.com/tables-240729054716-246cd7b5/85/Tables-of-html-sebagai-bahan-untuk-membuat-tabel-ppt-8-320.jpg)
![<th> options (table
header)
rowspan = [0..]
colspan = [0..]
bgcolor = [rgb colour code|colour]](https://image.slidesharecdn.com/tables-240729054716-246cd7b5/85/Tables-of-html-sebagai-bahan-untuk-membuat-tabel-ppt-10-320.jpg)
![<td> options (table data)
width = [0..100%]
bgcolor = [rgb colour code|colour]
align = [left|center|right]
valign = [top|middle|bottom]](https://image.slidesharecdn.com/tables-240729054716-246cd7b5/85/Tables-of-html-sebagai-bahan-untuk-membuat-tabel-ppt-13-320.jpg)
Tables of html sebagai bahan untuk membuat tabel.ppt
- 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>