table tags
DESCRIPTION
Table Tags. Formatting Your Pages. The Table Tags & Attributes. : Creates a table Attributes: id, width, height, border, cellspacing, cellpadding : Creates a table row width, height : Create a table cell width, height. The Table Element. - PowerPoint PPT PresentationTRANSCRIPT
Table Tags
Formatting Your Pages
North Lake College Page Design I - Fall 2006 Instructor: Sean Griffin
The Table Tags & Attributes
<table></table>: Creates a table• Attributes: id, width, height, border,
cellspacing, cellpadding
<tr></tr>: Creates a table row• width, height
<td></td>: Create a table cell• width, height
North Lake College Page Design I - Fall 2006 Instructor: Sean Griffin
The Table Element
The <table> element creates…you guessed it…a table!
<table></table>
But, your table needs rows and cells…
North Lake College Page Design I - Fall 2006 Instructor: Sean Griffin
Adding a Table Row
Use the <tr> tag to create a table row:
<table>
<tr>
</tr>
</table>
North Lake College Page Design I - Fall 2006 Instructor: Sean Griffin
Adding a Table Cell
Use the <td> tag (for table data) to create a table cell within a table row:
<table><tr>
<td></td>
</tr></table>
North Lake College Page Design I - Fall 2006 Instructor: Sean Griffin
Example 1
Creates a 200 pixel wide table with one cell. This table has no border:
<table width=“200”>
<tr>
<td>Hello</td>
</tr>
</table>
North Lake College Page Design I - Fall 2006 Instructor: Sean Griffin
Example 2
Creates a 200 pixel wide table with two columns and no borders:
<table width=“200”><tr>
<td>Hello</td><td>World!</td>
</tr></table>
North Lake College Page Design I - Fall 2006 Instructor: Sean Griffin
Example 3
Creates a 200 pixel wide table with a 1 pixel border and two columns:
<table width=“200” border=“1”><tr>
<td>Hello</td><td>World!</td>
</tr></table>
North Lake College Page Design I - Fall 2006 Instructor: Sean Griffin
Example 4
Creates a 200 pixel wide table with a 1 pixel border and two rows:
<table width=“200” border=“1”><tr>
<td>Hello</td></tr><tr>
<td>World!</td></tr>
</table>
North Lake College Page Design I - Fall 2006 Instructor: Sean Griffin
Example 5
Creates a 200 pixel wide table with a 1 pixel border, two rows and two columns:
<table width=“200” border=“1”><tr>
<td>R1C1</td><td>R1C2</td>
</tr><tr>
<td>R2C1</td><td>R2C2</td>
</tr></table>
North Lake College Page Design I - Fall 2006 Instructor: Sean Griffin
Cell Padding & Spacing
North Lake College Page Design I - Fall 2006 Instructor: Sean Griffin
Example 6: Cell Padding
Creates a 200 pixel wide table with a 1 pixel border, two columns and cellpadding of 10 pixels:
<table width=“200” border=“1” cellpadding=“10”>
<tr>
<td>R1C1</td>
<td>R1C2</td>
</tr>
</table>Notice the text has moved away from the border. The cellis padded.
North Lake College Page Design I - Fall 2006 Instructor: Sean Griffin
Example 7: Cell Spacing
Creates a 200 pixel wide table with a 1 pixel border, two columns and cellspacing of 10 pixels:
<table width=“200” border=“1” cellspacing=“10”>
<tr>
<td>R1C1</td>
<td>R1C2</td>
</tr>
</table>Notice the distance between cells has Increased.
North Lake College Page Design I - Fall 2006 Instructor: Sean Griffin
Example 8: Image in a Cell
Creates a 200 pixel wide table with a 1 pixel border, one row and one cell with an image in it:
<table width=“200” border=“1” cellspacing=“10”>
<tr>
<td>
<img src=“apple.jpg”>
</td>
</tr>
</table>
North Lake College Page Design I - Fall 2006 Instructor: Sean Griffin
Example 9
Creates a table with a 1 pixel border, 2 rows, 2 columns and an image in each cell:
<table border="1" cellspacing="0" cellpadding="0"> <tr> <td><img src="apple.jpg" alt="Apple" /></td> <td><img src="orange.jpg" alt="Orange" /></td> </tr> <tr> <td><img src="banana.jpg" alt="Banana" /></td> <td><img src="avacado.jpg" alt="Avacado" /></td> </tr></table>