HTML - Using Tables To Build Your Website Layout

I have 2 layout tables and in the right side i want to place text or image but it doesn't let me to make the text in right side and display the text down, here is the code:


<td colspan="3" height="200" valign="top"><table border="0" cellpadding="0" cellspacing="0" height="213" width="100%">
<!--DWLayoutTable-->
<tbody><tr>
<td height="183" width="862"><table class="TD100" border="0" cellpadding="0" cellspacing="0" height="0" width="100%">
<tbody><tr>
<td class="bakg-sida" background="images/left.jpg" height="0" valign="top" width="203">&nbsp;</td>
<td class="bakg-main" background="images/middle.jpg" valign="top" width="660">&nbsp;</td>
</tr>
</tbody></table></td>


and screenshot of a 1 table that does like that too:


thanks in advance!

While I was searching for an HTML forum to join, I came across a statement in another forum that said using tables to layout a web page is incorrect -- even stupid. Is this true? I have been reading a book entitled "HTML, XHTML, and CSS Bible" which devotes an entire chapter (chapter 11) to "Page Layout with Tables" and continually refers to page layout within Tables and Nested Tables. This is the method that I have been using to create my first web pages. Do I need to re-think this and change the way I layout my pages? Please enlighten me...

Thanks,
JFB

I am not sure whether or not this is the right category to put this in but hopefully you lot wont mind...
I just wanted to know that if i wanted to make a layout of any shape or design that I wanted, would I first have to make the layout on photoshop or fireworks and then import the picture onto dreamweaver, then use div tags to layer things and such?
just wanting to know becuase I'm starting to try and make more cutting edge websites even though I have made a few with flash and such
Thanks for your time
Sam

I am making a website and my layout changes from computer to computer. What i mean is, on my computer the layout looks fine, on another one the layout is distorted.

www.mlbmotors.com

Hi all, hopefully I'm posting this in the right spot.

I'm in the process of designing the layout for a new website, but I'd like some input as far as your recommended method for programming the skeleton of the attached image. I'd like to keep the look similar to this.

Your recommended coding samples would be GREATLY appreciated!

Hi all,
I just learn html+css and now I'm building my first website - http://www.bcichemical.com. My website look fine on IE but it doesnt look right on Mozilla, Can someone guide me on this matter. Thanks

Hello,
I learned HTML a few weeks ago, and I pretty much understood it all and scored a 100 on the final Test.

However, I still got problems with Tables.

My first website project (divinechaos.bplaced.net/beta) has an issue.

On the right, there is a empty box with a black frame, but thats not supposed to be there.

Also, on the left there is a...weirder box. I want to remove that one, too.

I tried to fix it, but after spending a week on trying to fix it, I decided to post on this forum a friend told me about.

So, here I am, asking for advice.

If you have any ideas on how to fix that problem, please answer me.

EDIT:
In case you are wondering, Bplaced is only a free domain I am using for now, Ill purchase a TLD once the website is finished and working.

I am making my band a website. I have all the graphics i need (as in the menu and background), but I don't know how to put it all together and make it good looking.
here is a picture of the general idea.

That would go all the way to the bottom of the page and all the rest of the space would just be black. Now of course, thats not how it would exactly look, that was just a map out that I made in two seconds. I need just the area where people read all the info and such to scroll alone, and to have nothing else to do so.

Just in case anyone doesn't know what i mean by "put it all together" I mean to get the top thing where it says band name on, and have the menu on the side, the place where everyone reads next to it, a bit of space below the area where people read, and the whole left be just black.

thanks in advance

EDIT- I realized i also should probably say this too. There is a graphic that runs through the entire page (band name area, menu, and place where people read). The band name area is a jpg, menu is a flash file, and then the place where people read is just regualr.

Hi,

I am trying to create a liquid website. I have drawn up a prototype on paint and the image is attached. Can anyone help me to turn the prototype into a website?

Thanks,

i used to use tables for the layout, now i'm trying divs..the thing is i'm not sure how should i think about the layout, i mean like tables i have rows, every row have cells, now with the divs i should think about it the same way? a container div to replace the main table, then another div to take place of a row, then divs as cells..an so on

does that make any sense? i don't know if that was clear, but the question is: how should i think about it? i know the question sounds stupid but it seems that i just got used to tables & can't accept divs yet

hello,

I want to figure out a way to make the layout of my website fixed, depending on the screen resolution and browser of the person that is viewing my site. I would like a layout with three rows (Header, content, Footer). the Content row should be 2 columns. i would specifically like the Header and Footer rows to be Fixed. and the right column in the content row to have a scroll bar, so that the content in it is the only thing I can scroll while my top banner and footer stay put.

Can anyone orient me towards tutorials or any sort of information that might help me solve this?

Thank you!

well im creating a new website layout but its being an ass...or its just me

well its like 5am here in the UK now which is probebly the reason for the problem but ah well i need it sorting asap and i cant work it out.

my website is http://www.rharris28.com so you can see for yourself.

basicly everything apart from the bar at the bottom should be on one line, but it just wont do it. i refuse to use tables as ive broken that habbit and want to stear clear of tables at all costs. so its all div's and css work.

my html is
HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>Mixing Pixels - Internet Services :: Homepage</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	<meta name="verify-v1" content="KY6WP1pcuAyddeAyjc4oFZVeQDE0qbbA1GGcJ2Zgu8Y=" /> 
	</head>
	<body>
		<div id="background" align="center">
		  <div id="container" align="left">
				<div id="tb">
                	<div id="tbbg"></div>
	            	<div id="topsep"></div>
                    <div id="tophome"></div>
                    <div id="topsep"></div>
                    <div id="topmap"></div>
                    <div id="topsep"></div>
                    <div id="topcontacts"></div>
                    <div id="topsep"></div>
					<div id="searchbg"><b>Search:</b></div>
				</div>
                <div id="topmenu">
					<div id="topmenubg">Home</div>
					<div id="topmenusep"></div>
					<div id="topmenubg">News</div>
					<div id="topmenusep"></div>
					<div id="topmenubg">Downloads</div>
					<div id="topmenusep"></div>
					<div id="topmenubg">Search</div>
					<div id="topmenusep"></div>
					<div id="topmenubgend">Services</div>
				</div>
			</div>
		</div>
	</body>
</html>

and my CSS is
Code:

* {
margin: 0;
padding: 0;
}
#background {
background-color:#01557C;
height: 100%;
width: 100%;
}
#container {
background-color:#FFFFFF;
width: 759px;
height:500px;
}
#tbbg {
background-image:url(/images/main01.jpg);
width:256px;
height:41px;
}
#tb {
float:left;
width:759px;
}
#tophome {
background-image:url(images/but_home.gif);
width:74px;
height:41px;
}
#topmap {
background-image:url(images/but_site_map.gif);
width:94px;
height:41px;
}
#topcontacts {
background-image:url(images/but_contacts.gif);
width:96px;
height:41px;
}
#topsep {
background-image:url(images/separator.gif);
width:2px;
height:41px;
}
#searchbg {
width: 231px;
height: 41px;
background-image:url(images/fon01.gif);
}
#topmenu {
width:759px;
}
#topmenubg {
background-image:url(images/fon_menu.gif);
width:132px;
height:42px;
float:left;
text-align:center;
}
#topmenubgend {
background-image:url(images/fon_menu.gif);
width:135px;
height:42px;
float:left;
}
#topmenusep {
background-image:url(images/e_menu.gif);
width:24px;
height:42px;
float:left;
}

please help...many thanks

Hey all,

I'm new here, and I love the layout of this website! I like the bright colors!

Anyway... I created a website layout/site in Photoshop CS 5. The website: www.thegarbagedump.net I saved it as a html & images.. The issue I am having is when you click one of the bottons I want it to open the html document and display it within that square area with the border around it. I know I probably need a frame to do this, however I dont know how to add a frame, and it appears photoshop saved it in tables.. Could you please review the html source, and tell me how/where to add a frame, and make the Home, About, Domains button appear within that square area with the border?

Thank You,
Justin

Hello there. Firstly, thank you for any and all help here.

I am no web developer, but I have done some for my degree and other various bits/bobs.

I produced a very simplistic website for a client, however the website is showing up different, on different PC's and I cannot get to the bottom of it. Now, I know this is down to my own inexperience in coding, but I followed various books, online suggestions for layout (relative, margin) positioning techniques, and the website looks fine on my PC, on my mrs work PC, even on the clients PC in his office (this is a mixture of IE8 - Win7, XP).

However, I get an email from the client, and his understudy, last night saying the website looks terrible. All the text the 3rd column looks out of line (maybe because I used line:height?).

As you can see, without having a clear understanding of the backbone of HTML coding, I am going to suffer.

The CSS validates, the HTML validates with W3c.

The website is:
http://www.fpcuk.co.uk

The issue is with IE7 and IE8. I coded the website in IE8, but it looks different on IE7.

Could you have a look at it for me, and let me know where I have gone wrong. or give me some tips on making it compatible with both IE7 / IE8. There is only about 20 lines of code. It is mainly the right-hand column.

Here 's a few images:
IE7
http://img.photobucket.com/albums/v2...sueWithIE7.png
IE8
http://img.photobucket.com/albums/v294/Jertsy/IE8.png

I have nothing but respect for Web Developers, having to build websites for different browsers versions, damn..

So, after looking at my code - can you see any glaring issues that will cause it to distort the layout in different versions.
Thank you very much.

Spencer K

EDIT:

FFS!!! I'm tearing my hair out with this. I just cannot get the website to look right in IE7 and IE8 - its driving me fking crazy..

Even adding;
Code:

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />

To the top of the page, hoping this will force IE8 to be compatible with IE7 does not work. How on earth am I supposed to figure this out. Everything I try looks different, everything. Not much help here either.

Hi guys
I want to build a simple HTML site on WordPress but I don't want to use the templates they offer there. I also want to add java script effects.
Or is there a way to modify the design of big areas in case I do use a custom template?
I want the site to look something like that with some codes for the images to move around like that: http://www.studiobreakfast.be/
Is there a free way to do that of I need to pay?
Thanks a lot for your help!
Natalie