Saturday 16 March 2013

HTML Table


HTML Table Tutorial

Definition and Usage

The best way to split a page into different sections is to use HTML <table> Tag.
HTML Table section is top of (start with) <table> tag, and closed it right down at the </table> tag. Everything in between those two tags is inside the table, as you can see in following screenshot.
» Look at the following figure. <table> tag inside you need two more tag first is <tr> tag, which stands for table row. It is closed with the </tr> tag. And another one is <td> tag, which stands for table data.
» Every time you add a <tr> tag, when table will gain an extra row. In the table you just made, these is only one row section, so these is only one row.
» HTML <td> tag stands for table data (also say table column), and it places one cell in your table row.
» HTML table you also merge two or more column or two or more row merge using respectivelycolspan or rowspan attributes.


Understanding <table> Tags

 

<table> Attributes

Attributes
Value
Description
align
Left,Right,Center
Declared your alignment side.
width
"Size_px"
Specify the Width Size of the Table.
height
"Size_px"
Specify the Height Size of the Table.
bgcolor
"purple"
Specify the Background Color.
background
"Specified_URL"
Specify the Background Image open for URL file.
border
"Size_px"
Specify the size of border thickness.
bordercolor
"Yellow"
Specify the color of border.
cellspacing
"Size_px"
Specify the space between two Cell.
cellpadding
"Size_px"
Specify the space between cell boundary and text.


<th> Attributes

Attributes
Value
Description
bgcolor
"purple"
Specify the Background Color.
colspan
"Column_N"
Specify the span of there column.
rowspan
"Row_N"
Specify the span of there Row.


<tr> Attributes

Attributes
Value
Description
bgcolor
"purple"
Specify the Background Color.

HTML Table Examples

HTML Table Tags Examples II: Advanced

CELLPADDING
  • CELLPADDING="10"
<TABLE BORDER="7" CELLPADDING="10">
<TR>
<TD>This is a TD cell</TD>
<TD><PRE> </PRE></TD>
<TH>This is a TH cell</TH>
</TR>
<TR>
<TH VALIGN="TOP">Text aligned top</TH>
<TH>Image in TH cell with default alignments ---></TH>
<TH><IMG SRC="blylplne.gif" ALT="airplane"></TH>
</TR>
<TR>
<TH VALIGN="BOTTOM">Text aligned bottom</TH>
<TD><Image in TD cell with default alignments ---></TD>
<TD><IMG SRC="blylplne.gif" ALT="airplane"></TD>
</TR>
</TABLE>
This is a TD cell
 
 
This a TH cell
Text aligned top
Image in TH cell with default alignments --->
Text aligned bottom
Image in TD cell with default alignments --->
To the Table of Contents
CELLSPACING
  • CELLSPACING="10"
<TABLE BORDER="7" CELLSPACING="10">
<TR>
<TD>This is a TD cell</TD>
<TD><PRE> </PRE></TD>
<TH>This is a TH cell</TH>
</TR>
<TR>
<TH VALIGN="TOP">Text aligned top</TH>
<TH>Image in TH cell with default alignments ---></TH>
<TH><IMG SRC="blylplne.gif" ALT="airplane"></TH>
</TR>
<TR>
<TH VALIGN="BOTTOM">Text aligned bottom</TH>
<TD><Image in TD cell with default alignments ---></TD>
<TD><IMG SRC="blylplne.gif" ALT="airplane"></TD>
</TR>
</TABLE>
This a TD cell
 
 
This is a TH cell
Text aligned top
Image in TH cell with default alignments --->
Text aligned bottom
Image in TD cell with default alignments --->
To the Table of Contents
CELL WIDTH
  • TWO COLUMNS: FIRST CELL WIDTH="50%"
<TABLE BORDER="7">
<TR>
<TH WIDTH="50%">This cell will expand to 50%
if the contents of the other cell will allow.</TH>
<TH>The first cell will expand to 50%
if the contents of this cell will allow.</TH>
</TR>
</TABLE>
This cell will expand to 50% if the contents of the other cell will allow.
The first cell will expand to 50% if the contents of this cell will allow.
  • THREE COLUMNS: FIRST CELL WIDTH="50%"
<TABLE BORDER="7">
<TR>
<TH WIDTH="50%">This cell will expand to 50%
if the contents of the other cells will allow.</TH>
<TH>The first cell will expand to 50%
if the contents of the other cells will allow.</TH>
<TH>The first cell will expand to 50%
if the contents of the other cells will allow.</TH>
</TR>
</TABLE>
The first cell will expand to 50% if the contents of the other cells will allow.
The first cell will expand to 50% if the contents of the other cells will allow.
The first cell will expand to 50% if the contents of the other cells will allow.
To the Table of Contents
COLSPAN
  • COLSPAN="2"
<TABLE BORDER="7">
<TR>
<TD>This is a TD cell</TD>
<TH COLSPAN="2">This TH cell spans two columns</TH>
</TR>
<TR>
<TD><PRE> </PRE></TD>
<TD><PRE> </PRE></TD>
<TH ALIGN="LEFT">Text aligned left</TH>
</TR>
<TR>
<TD><PRE> </PRE></TD>
<TH><IMG SRC="redball.gif" ALT="*"></TH>
<TH ALIGN="RIGHT">Text aligned right</TH>
</TR>
</TABLE>
This a TD cell
This TH cell spans two columns
 
   
  
Text aligned left
 
  
Text aligned right
To the Table of Contents
NULCELL
<TABLE BORDER="7">
<TD><PRE> </PRE></TD>
<TH>Below is a null cell.</TH>
<TD><PRE> </PRE></TD>
</TR>
<TR>
<TD><PRE> </PRE></TD>
<TD></TD>
<TD><PRE> </PRE></TD>
</TR>
<TR>
<TD><PRE> </PRE></TD>
<TH>Above is a null cell.</TH>
<TD><PRE> </PRE></TD>
</TR>
</TABLE>
 
  
Below is a null cell.
 
   
   
   
  
Above is a null cell
 
  
To the Table of Contents
ROWSPAN
  • ROWSPAN="3"
<TABLE BORDER="7">
<TR>
<TD>This is a TD cell</TD>
<TH ROWSPAN="2"><This TH cell spans three rows</TH>
<TH>This is a TH cell</TH>
</TR>
<TR>
<TD><PRE> </PRE></TD>
<TD><PRE> </PRE></TD>
</TR>
<TR>
<TH ALIGN="LEFT">Text aligned left</TH>
<TH ALIGN="RIGHT">Text aligned right</TH>
</TR>
</TABLE>
This is a TD cell
This TH cell spans three rows
This is a TH cell
 
   
  
Text aligned left
Text aligned right
To the Table of Contents
1x1 TABLE WITHIN A 3x3 TABLE
<TABLE BORDER="7" CELLSPACING="10">
<TR>
<TH><IMG SRC="redball.gif" ALT="*"></TH>
<TD><PRE> </PRE></TD>
<TH><IMG SRC="redball.gif" ALT="*"></TH>
</TR>
<TR>
<TD><PRE> </PRE></TD>
<TD>
     <TABLE BORDER="7" CELLSPACING="5">
     <CAPTION ALIGN="BOTTOM">
     The USS Enterprise arrives home
     </CAPTION>
     <TR>
     <TD><IMG SRC="ee.jpg" ALT="Star Trek pic"></TD>
     </TR>
     </TABLE>
</TD>
<TD><PRE> </PRE></TD>
</TR>
<TR>
<TD ALIGN=:LEFT"><B>Bold Text in a TD cell</B></TD>
<TD><BR></TD>
<TD><I>Italic Text in a TD cell</I></TD>
</TR>
</TABLE>
 
   
  
The USS Enterprise arrives home
 
  
Bold Text in a TD cell
Italic Text in a TD cell
To the Table of Contents
COLOR IN TABLES
Example code
Results of example code
<TABLE BORDER="7" CELLPADDING="7" CELLSPACING="10">
<TR BGCOLOR="#00FF00">
<TD><IMG SRC="rrose.gif" ALT="rose"></TD>
<TD>Image is a transparent .gif.</TD>
</TR>
</TABLE>
Image is a transparent .gif.
Example code
Results of example code
<TABLE BORDER="7" CELLPADDING="7" CELLSPACING="10">
<TR BGCOLOR="#00FF00">
<TD>A green row.</TD>
<TD BGCOLOR="#FFFF00">This cell should be yellow, overriding the row color.</TD> <TD>Back to the row color.</TD>
<TR BGCOLOR="#0000FF">
<TD>A blue row.</TD>
<TD><PRE> </PRE></TD>
<TD ROWSPAN="2">This cell takes the color of the topmost row that it spans</TD>
</TR>
<TR BGCOLOR="#FF0000">
<TD>A red row.</TD>
</TR>
</TABLE>
A green row.
This cell should be yellow, overriding the row color.
Back to the row color.
A blue row.
 
  
This cell takes the color of the topmost row that it spans.
A red row.
Example code
Results of example code
<TABLE BGCOLOR="#FF0000" BORDER="7" CELLPADDING="7" CELLSPACING="10">
<TR>
<TD>The table has a red background</TD>
<TD><PRE> </PRE></TD>
</TR>
<TR>
<TD BGCOLOR="#0000FF">BGCOLOR in TD/H or TR overrides BGCOLOR in the TABLE tag.</TD>
<TD><PRE> </PRE></TD>
</TR>
</TABLE>
The table has a red background
 
  
BGCOLOR in TD/H or TR overrides BGCOLOR in the TABLE tag.
 
  
Example Code
 
  
Code Result
<TABLE BORDER="7" CELLPADDING="10" CELLSPACING="10" BGCOLOR="#0000FF">
<CAPTION ALIGN="BOTTOM">Butterfly</CAPTION> <TR>
<TD>
<TABLE BORDER="7" CELLPADDING="10" CELLSPACING="10" BGCOLOR=#FF0000>
<TR>
<TD><IMG SRC="bfly.gif" ALT="butterfly"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
Butterfly
Example Code
 
  
Code Result
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" BGCOLOR="#0000FF">
<TR>
<TD>
<TABLE BORDER="5" CELLPADDING="10" CELLSPACING="10">
<TR>
<TD BGCOLOR="#FFFFFE"> blah blah blah blah</TD><TD BGCOLOR="#FFFFFE"> more blah blah blah blah</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
blah blah blah blah
more blah blah blah blah
    •  
    • Example B: with no outer border
Example Code
 
  
Code Result
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" BGCOLOR="#0000FF">
<TR>
<TD>
<TABLE BORDER="0" CELLPADDING="10" CELLSPACING="10">
<TR>
<TD BGCOLOR="#FFFFFE"> blah blah blah blah</TD><TD BGCOLOR="#FFFFFE"> more blah blah blah blah</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
blah blah blah blah
more blah blah blah blah
Example code
Results of example code
<TABLE BGCOLOR="#FF0000" BORDER="0" CELLPADDING="7" CELLSPACING="0">
<TR>
<TH BGCOLOR="#FF8000"><FONT COLOR=#804000" SIZE="6">
H<BR>T<BR>M<BR>L<BR></FONT></TH>
<TH BGCOLOR="#804000">
<FONT COLOR=#FF8000" SIZE="5" FACE="ARIAL">
Mountain Dragon<BR>Web Designs</FONT></TH>
<TH BGCOLOR="#FF8000"><PRE> </PRE></TH>
</TR>
</TABLE>
H
T
M
L
Mountain Dragon
Web Designs
 
   
BAR GRAPH EXAMPLE
Example code
Results of example code
<table width=95% border=0 cellspacing=0 cellpadding=0>
<tr><td colspan=3><hr noshade></td></tr>
<tr><td> </td><th colspan=2>Web Page Hits 1996</th></tr>
<tr><td colspan=3><hr noshade></td></tr>
<tr><td nowrap>WWW Recipies</td><td> </td>
<td align=left nowrap><img border=2 src="reddot.gif" height=25 width=73>+73%</td>
</tr><tr>
<td>Jane's Page</td><td> </td>
<td align=left><img border=2 src="reddot.gif" height=30 width=25>+25%</td>
</tr><tr>
<td>Joe's Page</td>
<td align=right>-10%<img border=2 src="reddot.gif" height=30 width=10></td>
<td> </td></tr><tr><td>PC Page</td>
<td align=right>-92%<img border=2 src="reddot.gif" height=30 width=92>
</td><td></td></tr>
<tr><td colspan=3><hr noshade></td></tr>
</table>
Web Page Hits 1996
WWW Recipies
+73%
Jane's Page
+25%
Joe's Page
-10%
PC Page
-92%

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)