Saturday, 16 March 2013

html Table Examples


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
 
   
To the Table of Contents
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)