Advanced table layout

 

Hi! Besides the basic double, triple, etc. background layout using tables, we can use our imagination (yes, friend, that one!) to make more complicated designs, using the "align" property. What I mean is: we use until now the "center" align to put the different tiles... Let's try now to combinate "left" and "right", and nested tables to show another kind of layout... Come on!!! I'll show you now three examples; the challenge is to modificate them! :O)

Note: the spaces added are to make easy the view of the tables.


DOUBLE TABLE

Demo

This is the code:

<html>
<head>
<title></title>
</head>
<body>
<TABLE WIDTH="30%" ALIGN="left" CELLSPACING="1" CELLPADDING="4" BORDER="1">
<TR>
<TD>
<br>
<TABLE WIDTH="95%" ALIGN="center" CELLSPACING="1" CELLPADDING="4" BORDER="1">
<TR>
<TD>
<TABLE WIDTH="98%" ALIGN="center" CELLSPACING="1" CELLPADDING="4" BORDER="1">
<TR>
<TD>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<br>
<div align="center">
</div>
</TD>
</TR>
</TABLE>
<TABLE WIDTH="55%" ALIGN="center" CELLSPACING="1" CELLPADDING="4" BORDER="1">
<TR>
<TD>
<br>
<TABLE WIDTH="95%" ALIGN="center" CELLSPACING="1" CELLPADDING="4" BORDER="1">
<TR>
<TD>
<TABLE WIDTH="98%" ALIGN="center" CELLSPACING="1" CELLPADDING="4" BORDER="1">
<TR>
<TD>
<br>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</TD></TR></TABLE>
</TD></TR></TABLE><br>
</TD></TR></TABLE>
</body>
</html>

 

ANOTHER ONE:

Demo

This is the code:

<head>
<title></title>
</head>
<body>
<br>
<p><center><table width="90%" cellpadding=40 cellspacing=0 border=1>
<tr>
<td width="100%">
<p><center><table width="100%" border=1>
<tr>
<td width="100%" height="45">
<p>&nbsp;</p>
<p>&nbsp;</p></td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
</body>
</html>

 

YES... ONE MORE!:

Demo

This is the code:

<html>
<head>
<title></title>
</head>
<body>
<div align="center">
<center>
<table border="1" width="90%" cellspacing="5" bordercolorlight="#666699" bordercolordark="#28283C">
<tr>
<td width="100%" valign="top" align="center"></center>
<center>
<p>&nbsp;</p>
<div align="center">
<table border="1" width="90%" cellspacing="5" bordercolorlight="#666699" bordercolordark="#28283C">
<tr>
<td width="100%" valign="top" align="center" colspan="2">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td width="31%" valign="top" align="center">
<div align="center">
<p>&nbsp;</p>
<table border="1" width="65%" cellspacing="5" bordercolorlight="#28283C" bordercolordark="#666699">
<tr>
<td width="100%" valign="top" align="center">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td></tr>
<tr>
<td width="100%" valign="top" align="center">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td></tr>
<tr>
<td width="100%" valign="top" align="center">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td></tr>
<tr>
<td width="100%" valign="top" align="center>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td></tr>
</table>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
<td width="69%" valign="top" align="center">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</p>
<div align="center">
<table border="1" width="75%" bordercolorlight="#666699" bordercolordark="#28283C">
<tr>
<td width="100%" valign="top" align="center">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<p>&nbsp;</p></center></td>
</tr>
</table>
</div>
</body>
</html>

 

Back

A big hug!