HTML - Help With Layouts Using Tables

Hello guys and girls!

I'm currently working on a Web Design assignment for College, and I'm having a hard time trying to find the second way of building a lay out using HTML. We have done the table way of doing it, and I have got that way down, but i can't find out the other way.

Could you guys maybe give me a little help, or at least a push in the right direction?

Thank you!

Hi

I hope someone can help me here, please view my site at www.sydneycivilcelebrant.com/divsite/index.html - when I zoom in or out using ie, the layout becomes all out of order, yet when I do it in firefox its fine.

viewing the site with chrome or safari doesnt work yet as im still trying to figure out the css for both sets of browsers, but any help you could afford would be greatly apreciated!

thanks

Recently one heck of a lot of stuff about why you should use tabless layouts, but I have yet to find any reason to use tabless layouts, apart from their fashionable and W3C say so.

However I have found several not to use them. Let me start with a plain simple myth about:

Tabless layouts are more browser compatibly.

Right? I frequently seen Mozilla Firefox, and IE process tabless layouts in quite different ways. Yet every time I have seen a table based layout, virtual browser has processed it exactly the same. The only exception I have seen is a percentage height on a table.

Conitinuing on:

Positioning

Also has anyone here found with nested div's, a reliable way of positioning a nested div and still keeping firmly fixed to the parent? Ok, you can use the absolute position and make sure the div is within the area of the parent, what happens if you move or resize the parent div? I have yet to find of way of making sure the child stay in a position relative to is parent, apart from not using positioing at all. If their is a way of reliably positioning a div relative to its parent, then I would be very glad to know.
Fixing a 'div' to another div.

Secondly, if you got a multiple column layout, without using JS, I yet to see a way of fixing two or more divs to together to make sure that they are always the same height.

With a table layout, you just had three columns in the table, and they will be fixed together, no faffing about

Overflowing Content.

Anyone here ever had a content div nested in a parent div, What happens when the content divs hot taller than the parent. In a very large number of setups, the contents of the content will flow straight out the parent. To sort the problem out you resize the parent.

With a table, whats in the table stays in the table. I have yet to see it happen any other way.


This is how things are my experience, I have yet to see any article that tells any way of doing that completely avoids all of these problems. If you know a way of avoiding these problems please, if not, and I ask the question, what is the practical point of tableless layouts?

i recently learned html, still a n00b though, lol

i made a layout, which im proud of

but i wanna know how to make a layout changer, which i can pput as a topic and have links, when ppl click them, the layout changes, and u can always chnge it bak to the original or something else


mind helping me out?

Ok so here I am yet again with another mess on my hands. I know tables are tales of yore so I have recently dived into the world of divs. Well now I find myself with a coding issue that I could easily achieve with a table no problem.

If I was using a table I could set a BG image and then I could put text over the image or another transparent image over that. I am wanting to achieve the same effect but with divs. If I am not mistaken all I have to do is create a div and float another div on top of that div however this I am finding is not as easy for the CSS beginner. Mind you I am not new to programming. So how is it done?

here is a link to the site I am working on DeeJayOctane I am wanting to put text on top of the image in the nav div. But yet again this alludes me for some odd reason.

Any help would be appreciated! Thanks

Hi

Normally, when you have more than one table in your code, the tables will be placed one under each other.

Example:
<table>
...
</table>
<table>
...
</table>

When you want the tables to be placed next to each other, you need to set the align attribute.

Example:
<table align="left">
...
</table>
<table align="left">
...
</table>

BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables".

Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag?

Thanks for your help
praiser

Hey everyone, I'm new to these boards. Somewhat a newbie at web design, but I know basics. I'm looking to put 2 tables adjacent to each other inside another table. My problem is I can't get the tables to line up the way I want them to. I'll post a picture of how I want it to look, how it looks now and my code.

How I want it to look:


How it looks now:


I want the tables to line up at the top and re-size according to each other so they're always aligned at the top.

Code: coming in next 2 posts

When i make a table, it will goto the next line, for example if i want an image on the left of my table, the image will go first, and thenthe table will automatically be displayed on the next line.

Is there any way i can fix this is CSS, HTML, Javascript, anything?

If you need more info on my problem i could take a print screenn...

Cheers!

Here's an example - I want the images to be at either side of the table, so theres no space...

Code:

     <table width="400" border="2" class="pay" id="pay">
      <col class="itemsDesc" />
	   <colgroup span="2" class="firstCol" /> 
       <colgroup span="1" class="feeCol" /> 
      <thead>
		<tr>
		<th>Lessons</th>
		<th>Per Term</th>
		<th>Per Year</th>
		</tr>
        </thead>
        <tbody>
          <td>30 minutes</td>
          <td>$600</td>
          <td>$1100</td>
        </tr>
        <tr>
          <td>45 minutes</td>
          <td>$850</td>
          <td>$1600</td>
        </tr>
        <tr>
          <td>60 minutes</td>
          <td>$1100</td>
          <td>$2100</td>
        </tr>
        </tbody>
      </table>

and my css:

Code:

*                        {margin: 0px; padding: 0px}
body                     {font-size: 14px; 
                          font-family: 'Lucida Grande', Verdana, sans-serif}
table.pay				 {table-width: 400px; border: 10 px outset rgb(68, 76, 169)}
table.pay thead			 {background-color: ivory; border: 1px}
table.pay col.firstCol   {background-color: rgb(255, 255, 192)}
table.pay col.feeCol     {background-color: rgb(232,232,255)}
table.itemsDims		 {width:12%;}

im supposed to create a heading row group, a body row group, and column groups containing one column element belonging to the firstCol class, and another column element belonging to the feeColumns class which should span two columns in the web table.
was just wondering where im going wrong here since when i do my css.. the background colors or no changes seem to be applied to the columns or the headers (thead)

Hey guys, Im trying to to add images to the left and right of an area on my site at:

www.darkregions.com

I attached a picture to this post with red circles of where I want the images to be. The problem is, I havn't done any HTML in a long time and I tried fooling around with the code to try to get the images in those locations but couldn't do it.

Could someone please view the source of the main page and tell me what I need to add/change to get images in those two locations? Thanks a bunch to anyone who helps!

I have my table all finished and everything.. it looks nice, except the fact that my words.. some of them are cut off. anyone know how to fix this? I have tried making my table smaller in width than my "div", but that still doesn't work.

If you could please help me I would greatly appreciate it, and I would like to thank you in advance.

Any idea on how I can get a table with rounded edges?

i have tables.. http://teamsquirrels.net
when one expands it goes under or over the other i want it to push the other one across how can i do this???

i dont know if this belongs in here,
but i was wondering if you could please tell me the code for the rounded square outlines around the text like this http://profile.myspace.com/index.cfm...endid=35605078
any help will be appreciated

hi all, i'm having problems with tables

i want it to look like this:

http://www.exsilentio.org/apa/test/want.jpg


here's the site, i don't know why they're not next to eachother, and at one point they were, but when i made the window smaller they weren't next to eachother...i also tried making a big table to put those tables in and it didn't work...thanks

Code:

<html>
<head>
<title>top</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
#table1, #table2 {
float: left;
margin-left: 0.5em;
margin-right: 0.5em;
}
html, body {scrolling: auto;}
</style>
</head><center>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="992" height="151" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="7">
			<img src="images/top_01.gif" width="992" height="109" alt=""></td>

	</tr>
	<tr>
		<td>
			<img src="images/top_02.gif" width="143" height="18" alt=""></td>
		<td>
			<img src="images/top_03.gif" width="145" height="18" alt=""></td>
		<td>
			<img src="images/top_04.gif" width="144" height="18" alt=""></td>
		<td>

			<img src="images/top_05.gif" width="144" height="18" alt=""></td>
		<td>
			<img src="images/top_06.gif" width="144" height="18" alt=""></td>
		<td>
			<img src="images/top_07.gif" width="19" height="18" alt=""></td>
		<td>
			<img src="images/top_08.gif" width="253" height="18" alt=""></td>
	</tr>
	<tr>

		<td colspan="7">
			<img src="images/top_09.gif" width="992" height="24" alt=""></td>
	</tr>
</table></center>
<center><table id="big1" width="973" border="0" cellpadding="0" cellspacing="0"><td>
<table id="table1" width="720" border="0" cellpadding="0" cellspacing="0">
		<td align="left"><img src="images/bottom_01.gif" width="720" height="7" alt=""></td>
		<tr><td align="center"bgcolor="d6d6d6">dsafasdf<Br><br>asfdasdfsd<br></td><tr>
		<tr><td align="center"><img src="images/bottom_07.gif" width="720" height="4" alt=""></td></tr></table>

		<table width="19" cellpadding="0" cellspacing="0"><td> <img src="images/spacer.gif" width="19" height="5" alt=""></td>
<table id="table2" width="253" cellpadding="0" cellspacing="0" border="0">
<td align="right"><img src="images/bottom_03.gif" width="253" height="5" alt=""></td>
		<tr><td align="center"bgcolor="d6d6d6">dsafasdf<Br><br>asfdasdfsd<br></td><tr>
		<tr><td align="center"><img src="images/bottom_07.gif" width="253" height="4" alt=""></td></tr></table>
	</table>
</body>
</html>

site