ѕтιℓℓ αℓσиє ιи мα gσσиєуωσℓя∂

O Allah, adorn me with the adornment of right

Home

(7).Tables

 

a simple table

 
row 1, colum 1 row 1, colum 2 row 1, colum 3
row 2, colum 1 row 2, colum 2 row 2, colum 3
row 3, colum 1 row 3, colum 2 row 3, colum 3
 
The code for the above table :-
 
<TABLE border=1>
<CAPTION></CAPTION>
<TBODY>
<TR align=middle>
<TD>row 1, colum 1</TD>
<TD>row 1, colum 2</TD>
<TD>row 1, colum 3</TD>
</TR>
<TBODY>
<TR align=middle>
<TD><FONT style="BACKGROUND-COLOR: #ff99cc">row 2, colum 1</FONT></TD>
<TD><FONT style="BACKGROUND-COLOR: #ff99cc">row 2, colum 2</FONT></TD>
<TD><FONT style="BACKGROUND-COLOR: #ff99cc">row 2, colum 3</FONT></TD></TR></TBODY>
<TBODY>
<TR align=middle>
<TD>row 3, colum 1</TD>
<TD>row 3, colum 2</TD>
<TD>row 3, colum 3</TD>
</TR>
</TBODY>
</TABLE>
 
 
Colum span
 
this will span the colums
colum 1 colum 2 colum 3
 
The code for the above table :-
 
<TABLE cellSpacing=3 cellPadding=3 bgColor=yellow border=3>
<CAPTION></CAPTION>
<TBODY>
<TR>
<TD align=middle width=300 colSpan=3>this will span the colums</TD>
</TR>
<TR>
<TD align=middle>colum 1</TD>
<TD align=middle>colum 2</TD>
<TD align=middle>colum 3</TD>
</TR>
</TBODY>
</TABLE>
 
Row span
 
span 3 rows row 1
row 2
row 3
 
The code for the above table :-
 
<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=3>
<CAPTION></CAPTION>
<TR>
<TD ROWSPAN="3" ALIGN=center WIDTH="200">span 3 rows</TD>
<TD ALIGN=center WIDTH="200">row 1</TD>
</TR>
<TR>
<TD ALIGN=center>row 2</TD>
</TR>
<TR>
<TD ALIGN=center>row 3</TD>
</TR>
</TABLE>
 
Tables in tables
row 1, colum 1, table 1
row 1, colum 1, table 2 row 1, colum 2, table 2
row 2, colum 1 table 2 row 2, colum 2,table 2
 row 1, colum 2, table 1
 
The code for the above table :-
 
<TABLE cellSpacing=10 cellPadding=10 border=3>
<CAPTION></CAPTION>
<TBODY>
<TR>
<TD>
<TABLE borderColor=red cellSpacing=3 cellPadding=3 border=3>
<CAPTION>row 1, colum 1, table 1</CAPTION>
<TBODY>
<TR>
<TD>row 1, colum 1, table 2</TD>
<TD>row 1, colum 2, table 2</TD>
<TR>
<TD>row 2, colum 1 table 2</TD>
<TD>row 2, colum 2,table 2</TD></TR></TBODY></TABLE></TD>
<TD>row 1, colum 2, table 1</TD></TR></TBODY></TABLE>
 
All together
 
row 1 will span 2 colums
row 2, colum 1 row 2, colum 2
colum 1 spans 3 rows row 3, colum 2
row 4, colum 2
row 5, colum 2
 
row 6, colum 1, table 1
row 1, colum 1, table 2 row 1, colum 2, table 2
row 2, colum 1 table 2 row 2, colum 2,table 2
 row 6, colum 2, table 1
 
 The code for the above table :-
 
<TABLE borderColor=yellow cellSpacing=3 cellPadding=3 border=3>&gt;
<CAPTION></CAPTION>
<TBODY>
<TR>
<TD align=middle colSpan=2>row 1 will span 2 colums</TD></TR>
<TR>
<TD align=middle>row 2, colum 1</TD>
<TD align=middle>row 2, colum 2</TD></TR>
<TR>
<TD align=middle rowSpan=3>colum 1 spans 3 rows</TD>
<TD align=middle width=200>row 3, colum 2</TD></TR>
<TR>
<TD align=middle>row 4, colum 2</TD></TR>
<TR>
<TD align=middle>row 5, colum 2</TD></TR>
<TR>
<TD>
<TABLE borderColor=red cellSpacing=3 cellPadding=3 border=3>&nbsp;
<CAPTION>row 6, colum 1, table 1</CAPTION>
<TBODY>
<TR>
<TD>row 1, colum 1, table 2</TD>
<TD>row 1, colum 2, table 2</TD>
<TR>
<TD>row 2, colum 1 table 2</TD>
<TD>row 2, colum 2,table 2</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD align=middle>row 6, colum 2, table 1</TD>
</TR>
</TBODY>
</TABLE>
 
Commands
 
<TABLE>=OPEN TABLE
</TABLE>=CLOSE TABLE
<CAPTION>=OPEN COMMENT DISPLAYED ABOVE TABLE
</CAPTION>=CLOSE COMMENT
<TR>=OPEN NEW ROW
</TR>=CLOSE ROW
<TD>=OPEN NEW COLUM
</TD>=CLOSE COLUM
CELLSPACING=GAP SPACE AROUND THE OUTSIDE OF THE CELL
CELLPADDING=GAP SPACE AROUND THE INSIDE OF THE CELL
BORDERCOLOR=COLOUR OF THE BORDER
BORDER=THICKNESS OF THE BORDER
ALIGN=LEFT, MIDDLE, RIGHT, CENTER
COLSPAN=NUMBER OF COLUMS TO SPAN
ROWSPAN=NUMBER OF ROWS TO SPAN
HEIGHT=HEIGHT OF TABLE, ROW OR CELL
WIDTH=WIDTH OF TABLE, COLUM OR CELL
 
A standard table for a blog entry
 
adjust top padding
adjust left padding

scrollable text 

 

 

 

 

 

 

YOUR TEXT GOES HERE

 

 

 

 

 

 

 

 

 adjust right padding
adjust bottom padding
 
The code for the above table :-
 
<TABLE height=300 width=300 align=center background=your image url goes here border=1>
<TBODY>
<TR>
<TD align=middle width=300 colSpan=3 height=50>adjust top padding</TD></TR>
<TR height=200>
<TD align=middle>adjust left padding</TD>
<TD align=middle width=200>
<DIV style="SCROLLBAR-FACE-COLOR: #336633; FONT-SIZE: 14pt; SCROLLBAR-HIGHLIGHT-COLOR: #99cc66; OVERFLOW: auto; WIDTH: 200px; SCROLLBAR-SHADOW-COLOR: #006600; COLOR: #ffff99; SCROLLBAR-3DLIGHT-COLOR: #009900; SCROLLBAR-ARROW-COLOR: #ffff99; FONT-FAMILY: arial; SCROLLBAR-DARKSHADOW-COLOR: #003300; HEIGHT: 200px">
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B>YOUR TEXT GOES HERE</B></P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B>&nbsp;</P></B></DIV></TD>
<TD align=middle>adjust right padding</TD></TR>
<TR>
<TD align=middle width=300 colSpan=3 height=50>adjust bottom padding</TD></TR></TBODY></TABLE>
 
modify the above code to create a display like the one below
 

with scrollable

text 

 

 

 

 

YOUR TEXT GOES HERE

 

 

 

 

 

 

 

 
 
The code for the above table :-
 
<TABLE height=293 width=330 align=center background=your image url goes here border=0>
<TBODY>
<TR>
<TD align=middle width=330 colSpan=3 height=43></TD></TR>
<TR height=182>
<TD align=middle width=115></TD>
<TD align=middle width=200>
<DIV style="SCROLLBAR-FACE-COLOR: #770000; FONT-SIZE: 14pt; SCROLLBAR-HIGHLIGHT-COLOR: #ff0000; OVERFLOW: auto; WIDTH: 196px; SCROLLBAR-SHADOW-COLOR: #330000; COLOR: #ffff99; SCROLLBAR-3DLIGHT-COLOR: #ff0000; SCROLLBAR-ARROW-COLOR: #ff0000; FONT-FAMILY: arial; SCROLLBAR-DARKSHADOW-COLOR: #330000; HEIGHT: 182px">
<P align=center><B></B><FONT color=#ff0000>with scrollable</FONT></P>
<P align=center><FONT color=#ff0000>text</FONT>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B><FONT color=#ff0000>YOUR TEXT GOES HERE</FONT></B></P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B></B>&nbsp;</P>
<P align=center><B>&nbsp;</P></B></DIV></TD>
<TD align=middle width=15></TD></TR>
<TR>
<TD align=middle width=330 colSpan=3 height=30></TD></TR></TBODY></TABLE>
 
this is a standard table for msn blog entries
just adjust the table size to suit your
background image and then adjust the size
of the padding cells to position your blog
entry cell then set the border to 0
 
please note the scroll bar colours can be
changed to suit your image, and all your
cell heights and widths must add up the
height and width of the table.

© «ѕтιℓℓαℓσиє~αℓℓ яιgнтѕ яєѕєяνє∂»

Create a free website at Webs.com