Working with HTML Tables<br /><table>, <th>, <tr> and <td> tags<br />
Template<br /><table border=1><br />	<caption> Table Caption</caption><br />	<tr><br />	<th> Heading 1</th><br />	<th> Hea...
Table Element Attribute<br />Align:<br />-gives the horizontal alignment of the table as a whole<br />-Legal Values are: L...
The Default is zero, which also results in the visible 3D divider between cells being turned off</li></li></ul><li>Cellspa...
Default is usually about 3</li></ul>Cellpadding:<br />-determines the empty space, in pixels, between the cell’s border an...
Width:<br /><ul><li>Specifies the width of the table either in pixels: <table width=250> or as a percentage:<table width=7...
All four are drawn if this attribute is omitted
Legal Values are Border or Box(all), VOID(none), Above(top),</li></ul>bellow(bottom), Hsides(top and bottom), Vsides(left ...
<TR> Table Row<br /><ul><li>Is used to define each row in the table.
Each row will contain TH and/or TD entried</li></li></ul><li><TR> attributes<br />Align:<br /><ul><li>Is used to set the h...
Table Cells: <TH> and <TD><br />Colspan:<br /><ul><li>Defines a  heading or a cell data entry that spans multiple columns....
Upcoming SlideShare
Loading in …5
×

Working with tables

674 views

Published on

HTML

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
674
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Working with tables

  1. 1. Working with HTML Tables<br /><table>, <th>, <tr> and <td> tags<br />
  2. 2. Template<br /><table border=1><br /> <caption> Table Caption</caption><br /> <tr><br /> <th> Heading 1</th><br /> <th> Heading 2</th><br /></tr><br /><tr><br /> <td>Row1 Col1 Data</td><br /> <td>Row1 Col2 Data</td><br /></tr><br /> <tr><br /> <td>Row1 Col1 Data</td><br /> <td>Row1 Col2 Data</td><br /> </tr><br /> <tr><br /> <td>Row1 Col1 Data</td><br /> <td>Row1 Col2 Data</td><br /> </tr><br />
  3. 3.
  4. 4. Table Element Attribute<br />Align:<br />-gives the horizontal alignment of the table as a whole<br />-Legal Values are: Left, right and center, with left being its default<br />Border:<br /><ul><li>This specifies the width in pixels of the border around the table
  5. 5. The Default is zero, which also results in the visible 3D divider between cells being turned off</li></li></ul><li>Cellspacing:<br /><ul><li>Gives the space in pixels between adjacent cells. Drawn as a 3D line if BORDER is nonzero.
  6. 6. Default is usually about 3</li></ul>Cellpadding:<br />-determines the empty space, in pixels, between the cell’s border and the table element.<br />- Default is usually by 1<br />
  7. 7. Width:<br /><ul><li>Specifies the width of the table either in pixels: <table width=250> or as a percentage:<table width=75%></li></ul>BGColor:<br /><ul><li>Specifies the backgroudcolor of the table</li></ul>Background:<br />-nonstandard attribute supported by IE gives an image file that will be tiled as the background of the table.<br />Frame:<br /><ul><li>Specifies which outer borders are drawn
  8. 8. All four are drawn if this attribute is omitted
  9. 9. Legal Values are Border or Box(all), VOID(none), Above(top),</li></ul>bellow(bottom), Hsides(top and bottom), Vsides(left and right),<br />LHS(left) and RHS(right)<br />
  10. 10. <TR> Table Row<br /><ul><li>Is used to define each row in the table.
  11. 11. Each row will contain TH and/or TD entried</li></li></ul><li><TR> attributes<br />Align:<br /><ul><li>Is used to set the horizontal alignment for table cells. Legal values are: Left, Right or center.</li></ul>Valign:<br /><ul><li>Is used to set the vertical alignment for table cells. Legal values are: Top, middle and bottom</li></ul>BGColor:<br /><ul><li>Sets the color for the table row, overriding and values set for the table as a whole.</li></ul>Bordercolorlight:<br />- Supported only by IE, these specify the colors to use for the row borders.<br />
  12. 12. Table Cells: <TH> and <TD><br />Colspan:<br /><ul><li>Defines a heading or a cell data entry that spans multiple columns.</li></ul><Table Border=1><br /><tr><br /> <thColspan=2> Col 1 & 2 Heading</th><br /> <th> Col3 Heading</th><br /></tr><br /><tr><br /> <td> Col1 data</td><br /> <td> Col2 data</td><br /> <td> Col3 data</td><br /></tr><br /></table><br />
  13. 13.
  14. 14. Rowspan:<br /><ul><li>Defines a heading or cell data entry that spans multiple rows.</li></ul>Align:<br /><ul><li>Legal values are:Left, right, center and justify</li></ul>Valign:<br /><ul><li>Legal Values are: Top, bottom and middle</li></ul>Width, Height<br /><ul><li>Values in pixel only</li></ul>Bgcolor and Background<br />- Same as for TABLE and TR<br />
  15. 15. Sample 1<br /><TABLE BORDER="1"> <br /> <TR><br /> <TD WIDTH="25">A</TD> <br /> <TD WIDTH="25" align=center>B</TD> <br /> <TD WIDTH="25" align=right>C</TD><br /> </TR><br /> <TR> <br /> <TD WIDTH="25">D</TD> <br /> <TD WIDTH="25" align=center>E</TD> <br /> <TD WIDTH="25" align=right>F</TD> <br /> </TR> <br /></TABLE><br />

×