This is Interesting: Free Magazines for Graphics designers and webmasters  


Home > Archive > Dreamweaver > February 2006 > Table Layout





You are viewing an archived Text-only version of the thread. To view this thread in it's original format and/or if you want to reply to this thread please [click here]

Author Table Layout
Copesq

2006-02-12, 6:35 pm

Like many on this forum, I am fairly new to all of this. I am currently going
through the recommended CSS tutorials, but in the interim I am continuing to
build in layout mode using tables. Now my problem is can I have tables adjacent
to each other? Each time I try to add a table it will only let me add it below
another table, even if the previous table does not take up the entire page
width. Code of an example where I am at is attached. I would like to have
tables next to the table on the left side of the page and below the top table.
I know I could draw one big table spanning the whole page in place of the left
table and use cells to divide things, but that is not my prefered choice if I
can avoid it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>FFMSPTA Home</title>
</head>

<body>
<table width="977" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="187" rowspan="4" valign="top"><a
href="http://www.ccsd.edu/ffms/index.htm"><img src="ffms2.jpg" width="186"
height="140" border="0"></img></a></td>
<td width="301" height="31"></td>
<td width="135"></td>
<td width="166"></td>
<td width="88" valign="top"><img src="../Images/get_adobe_reader.gif"
width="88" height="31" border="0"></img></a></td>
<td width="100"></td>
</tr>
<tr>
<td height="3"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="72">&nbsp;</td>
<td valign="top"><img src="PTAlogo.jpg" width="132" height="72"></img></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="80">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<table width="183" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="183" height="540">&nbsp;</td>
</tr>
</table>

</body>
</html>

Katsuey

2006-02-12, 6:35 pm

> Like many on this forum, I am fairly new to all of this. I am currently
> going
> through the recommended CSS tutorials, but in the interim I am continuing
> to
> build in layout mode using tables. Now my problem is can I have tables
> adjacent
> to each other?

Use one big table and then insert two tables inside (nested tables) or
create on table with two columns.


.: Nadia :. *TMM*

2006-02-12, 6:35 pm


"Copesq" <webforumsuser@macromedia.com> wrote in message
news:dse0ma$lb6$1@forums.macromedia.com...
> Like many on this forum, I am fairly new to all of this. I am currently
> going
> through the recommended CSS tutorials, but in the interim I am continuing
> to
> build in layout mode using tables.


Get out of layout mode ! Learn how to construct a table correctly... read
this tutorial before going any further:
http://www.dwfaq.com/Tutorials/Tabl...ible_tables.asp

--
Nadia
Team MM Volunteer for Dreamweaver
--------------------------------------------
http://www.csstemplates.com.au
Templates|CSS Templates|
Dropdown Menu Designs | SEO Articles |Tutorials
http://www.DreamweaverResources.com
---------------------------------------------
Search this forum: http://tinyurl.com/2rfa2
---------------------------------------------


Copesq

2006-02-12, 6:38 pm

Any suggestions on good tutorials for learning CSS? I went to the PVII
tutorial, which was a nice start, but seems quite old (geared alot to Netscape
4) and would like a few more samples to see what values would work best in my
project.

Al Sparber- PVII

2006-02-12, 6:38 pm

"Copesq" <webforumsuser@macromedia.com> wrote in message
news:dsgdcj$4sf$1@forums.macromedia.com...
> Any suggestions on good tutorials for learning CSS? I went to the PVII
> tutorial, which was a nice start, but seems quite old (geared alot to
> Netscape
> 4) and would like a few more samples to see what values would work
> best in my
> project.

If you're laying out pages with tables, older browsers are a given. To
learn more modern techniques, read some of the more advanced tutorials
and pull out parts to stick in your table layouts. I'm not sure if
writing CSS table layout tutorials is a going concern these days :-)


--
Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a crumbling
mountain road at 90 miles per hour secure in the knowledge that repairs
are scheduled for next Tuesday".





Copesq

2006-02-12, 6:39 pm

Geez - now I'm really confused. I know I'm a novice, but seems like all the
advice from the "pros" is conflicting. Use tables, don't use tables, use CSS,
don't use CSS. Use this software, use that software - none of which seems to do
what it was designed for, so get this plug-in, use this add-on. And, oh, by the
way, no browser will display the way another will, so maybe your work will show
up as designed and maybe it won't.

Sad to say but sometimes us "newbies" get involved because we either want to,
or because we are doing this for small or volunteer organizations and can't
afford to go high end with tons of additional software or expensive programing.
Helpful replies and constructive crticism go a long way - some of the replies
seem aimed at scaring us off. We all have to start somewhere!

Now back to my problem, which is making this relatively simple page work. So
I'm playing around with CSS, and also have a version with just tables and no
CSS. My latest problem is adjusting cell height - something in my code is not
allowing the height to shrink - I want each cell or row to be just slightly
larger than the image contained within the cell. Any help would be appreciated.
And yes, I know there are other errors in the code- I'm still playing around
with that. Perhaps one of these errors may be the source of my problem?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>FFMSPTA Home</title>
<link href="pta.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #ffffcc;
}
-->
</style></head>

<body>
<table width="939" border="0" align="center" cellpadding="20" cellspacing="0"
id="maintable">
<table width="200" border="0" align="left" cellpadding="10"
cellspacing="0">
<tr>
<td id="home"><a href="http://www.ccsd.edu/ffms/index.htm"><img
src="../Images/ffms2.jpg" width="186" height="140" border="0"></img></a></td>
</tr>
</table>
<table width="739" id="innertable">
<tr>
<td width="600">&nbsp;</td><td width="120" valign="top"><img
src="../Images/get_adobe_reader.gif" width="88" height="21"
border="0"></img></a></td>
</tr>
<tr>
<td colspan="2" align="center"><img src="../Images/PTAlogo.jpg"
width="132" height="72"></img></td>
</tr>
<tr>
<td colspan="2" valign="top"><img src="../Images/Banner.jpg" width="784"
height="51" /></td>
</tr>
<tr>
<td colspan="2" align="center" id="navbar"><object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
rsion=7,0,19,0" width="751" height="25">
<param name="movie" value="../Images/Pencil.swf" />
<param name="quality" value="high" />
<embed src="../Images/Pencil.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="751" height="25"></embed>
</object></td>
</tr>
</table>
</body>
</html>
pta {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
background-color: ffffcc;
padding: 0px;
margin-top: 0%;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10%;
}
#innertable {
background-color: ffffcc;
border: 0px 0 #000000;

}
#innertable td {
padding: 20px;/*Pads each table cell in modern browsers*/
}
#maincontent {
border-left: 2px dotted #333;
font-size: 14px;
vertical-align: top;
/*/*/font-size: 100%; /* */
}
#home {
width: 190px;
font-size: 14px;
vertical-align: top;
/*/*/font-size: 100%; /* */
}
#sidebar {
width: 190px;
font-size: 14px;
vertical-align: top;
/*/*/font-size: 90%; /* */
}
#navbar {
width: 190px;
height: auto
font-size: 14px;
vertical-align: top;
/*/*/font-size: 100%; /* */
}

Bonnie

2006-02-12, 6:43 pm

Copesq wrote:
> Geez - now I'm really confused. I know I'm a novice, but seems like all the
> advice from the "pros" is conflicting. Use tables, don't use tables, use CSS,
> don't use CSS. Use this software, use that software - none of which seems to do
> what it was designed for, so get this plug-in, use this add-on. And, oh, by the
> way, no browser will display the way another will, so maybe your work will show
> up as designed and maybe it won't.

Whether to use tables or divs to lay out your content depends on your
site's design. Purists say tables should only be used to display
"tabular data," which IMO can include photographs and captions, and they
would insist you use divs for the different parts of your site, e.g.,
header, navigation, content footer.

The Project Seven site is hardly old-fashioned. A good tutorial on
using a CSS-styled table to lay out a site is here:
http://www.projectseven.com/tutorials/css/css_td/

and a good one for table-less positioning with CSS is here:
http://www.projectseven.com/tutoria...acfly/index.htm


>
> Sad to say but sometimes us "newbies" get involved because we either want to,
> or because we are doing this for small or volunteer organizations and can't
> afford to go high end with tons of additional software or expensive programing.
> Helpful replies and constructive crticism go a long way - some of the replies
> seem aimed at scaring us off. We all have to start somewhere!
>
> Now back to my problem, which is making this relatively simple page work. So
> I'm playing around with CSS, and also have a version with just tables and no
> CSS. My latest problem is adjusting cell height - something in my code is not
> allowing the height to shrink - I want each cell or row to be just slightly
> larger than the image contained within the cell. Any help would be appreciated.
> And yes, I know there are other errors in the code- I'm still playing around
> with that. Perhaps one of these errors may be the source of my problem?
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
> <title>FFMSPTA Home</title>
> <link href="pta.css" rel="stylesheet" type="text/css" />
> <style type="text/css">
> <!--
> body {
> background-color: #ffffcc;
> }
> -->
> </style></head>
>
> <body>
> <table width="939" border="0" align="center" cellpadding="20" cellspacing="0"
> id="maintable">
> <table width="200" border="0" align="left" cellpadding="10"
> cellspacing="0">
> <tr>
> <td id="home"><a href="http://www.ccsd.edu/ffms/index.htm"><img
> src="../Images/ffms2.jpg" width="186" height="140" border="0"></img></a></td>
> </tr>
> </table>
> <table width="739" id="innertable">
> <tr>
> <td width="600">&nbsp;</td><td width="120" valign="top"><img
> src="../Images/get_adobe_reader.gif" width="88" height="21"
> border="0"></img></a></td>
> </tr>
> <tr>
> <td colspan="2" align="center"><img src="../Images/PTAlogo.jpg"
> width="132" height="72"></img></td>
> </tr>
> <tr>
> <td colspan="2" valign="top"><img src="../Images/Banner.jpg" width="784"
> height="51" /></td>
> </tr>
> <tr>
> <td colspan="2" align="center" id="navbar"><object
> classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
> codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
> rsion=7,0,19,0" width="751" height="25">
> <param name="movie" value="../Images/Pencil.swf" />
> <param name="quality" value="high" />
> <embed src="../Images/Pencil.swf" quality="high"
> pluginspage="http://www.macromedia.com/go/getflashplayer"
> type="application/x-shockwave-flash" width="751" height="25"></embed>
> </object></td>
> </tr>
> </table>
> </body>
> </html>
> pta {
> font-family: Georgia, "Times New Roman", Times, serif;
> font-size: 14px;
> background-color: ffffcc;
> padding: 0px;
> margin-top: 0%;
> margin-right: 10px;
> margin-bottom: 0px;
> margin-left: 10%;
> }
> #innertable {
> background-color: ffffcc;
> border: 0px 0 #000000;
>
> }
> #innertable td {
> padding: 20px;/*Pads each table cell in modern browsers*/
> }
> #maincontent {
> border-left: 2px dotted #333;
> font-size: 14px;
> vertical-align: top;
> /*/*/font-size: 100%; /* */
> }
> #home {
> width: 190px;
> font-size: 14px;
> vertical-align: top;
> /*/*/font-size: 100%; /* */
> }
> #sidebar {
> width: 190px;
> font-size: 14px;
> vertical-align: top;
> /*/*/font-size: 90%; /* */
> }
> #navbar {
> width: 190px;
> height: auto
> font-size: 14px;
> vertical-align: top;
> /*/*/font-size: 100%; /* */
> }
>


--
Bonnie in California
kroko at
sbcglobal dot net
http://www.theanimalrescuesite.com/...ts/CTDSites.woa
Sponsored Links


Copyright 2003 - 2008 forum4designers.com  Software forum  Computer Hardware reviews