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
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> </p>
<p> </p>
<p> </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> </p>
<p> </p>
<p> </p>
</TD></TR></TABLE>
</TD></TR></TABLE><br>
</TD></TR></TABLE>
</body>
</html>
|
ANOTHER ONE:
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> </p>
<p> </p></td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
</body>
</html> |
YES... ONE MORE!:
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> </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> </p>
<p> </p>
<p> </p>
</td>
</tr>
<tr>
<td width="31%" valign="top"
align="center">
<div align="center">
<p> </p>
<table border="1" width="65%"
cellspacing="5" bordercolorlight="#28283C"
bordercolordark="#666699">
<tr>
<td width="100%" valign="top"
align="center">
<p> </p>
<p> </p>
<p> </p>
</td></tr>
<tr>
<td width="100%" valign="top"
align="center">
<p> </p>
<p> </p>
<p> </p>
</td></tr>
<tr>
<td width="100%" valign="top"
align="center">
<p> </p>
<p> </p>
<p> </p>
</td></tr>
<tr>
<td width="100%" valign="top"
align="center>
<p> </p>
<p> </p>
<p> </p>
</td></tr>
</table>
</div>
<p> </p>
<p> </p>
<p> </p>
</td>
<td width="69%" valign="top"
align="center">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</p>
<div align="center">
<table border="1" width="75%"
bordercolorlight="#666699" bordercolordark="#28283C">
<tr>
<td width="100%" valign="top"
align="center">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<p> </p></center></td>
</tr>
</table>
</div>
</body>
</html>
|
Back
A big hug!