Center align a table

**MBX** · 12-27-2006, 06:41 PM

i dont know why but now in dreamweaver when i center align a table inside a table, which then is perfectly in the middle of the page, appears correctly in dreamweaver... but both in safari & firefox the table is on top of the page instead of in the middle/ centered horizontally and vertically.

it always worked in dreamweaver before and it even displays it correctly in the program itself but the result in the browsers is different. any idea?
and if i can't do it in dw8 the visual way, what's the correct html-tags for the code?

thanks in advance

**benniaustin** · 12-27-2006, 08:46 PM

Nested tables.... Yuck.

can you post the html that dreamweaver gave you?

**MBX** · 12-27-2006, 09:04 PM

do you mean centered (vertically/ horizontally) tables in general or do you just mean html nested sucks? and if, why so? what's wrong with that if you have a small site and don't need scrolling?

i'm tryig a css alternative now. will let know if it worked out or not.

**benniaustin** · 12-27-2006, 09:34 PM

What I meant was that using tables for your layout is abuse, but nesting them is even worse.

It just makes the code harder to read, and when modifying it in the future it's easy to mess it up. If you must use tables, here's a css trick. Put your table in the div, and adjust the height+width accordingly.

HTML Code:

<html>
<html>
  <head>
    <style type="text/css">
      #myContent {
        border:1px solid black;
        position:absolute;
        left:50%;
        top:50%;
        margin-top:-150px;
        margin-left:-250px;
        width:500px;
        height:300px;
      }
    </style>
  </head>
  <body>
    <div id="myContent">myContent</div>
  </body>
</html>

What you're doing is positioning the element absolutely at 50% from the top, and 50% from the left. Then using negative margins, moving it over and up for half of the size of the div.

This method does have limitations though, for instance, if you resize the browser to smaller than the div, you the top and left get cut off. Make sure when using this method, you are taking into consideration an 800x600 resolution.

**MBX** · 12-27-2006, 09:38 PM

well, i personally don't care about how the code looks like. i know it's great if you have it super-clean but personally i'm a visual person and don't attract sourcecode-geeks to my site who are looking into the hidden realms of the site.

i'm used to creating the layouts with tables. i don't know of any other method that easily divides parts of the designs or text content.

i'll try your css suggestion, even though it would be great if the tables thingy worked.

i really don't know why it doesnt. "valign=center" and middle is set, it's showing all correctly in dreamweaver but not in the browsers. it's really strange.

**mwinter** · 12-28-2006, 02:37 AM

Originally Posted by MBX

well, i personally don't care about how the code looks like.

I can't imagine why. Simple code is easy to edit.

i'm used to creating the layouts with tables.

It really is about time to break that habit. Table-based layouts were always a hack, as were spacer GIFs and all that other rubbish. Semantic markup is usually smaller and renders more promptly.

i don't know of any other method that easily divides parts of the designs or text content.

That's rather vague.

Mike

**MBX** · 12-28-2006, 03:48 PM

sorry, but i'm no pro webdesigner.

if you can give me a tip how to create layouts without tables easily i'd be very grateful.

**MBX** · 12-28-2006, 09:30 PM

your example works. but what i really miss is a visual way of defining sections or splitting up that div css "table".

with tables i can quickly divide it into columns & rows easily, but i dont know how to do that easily with the css example you gave me.

any idea?

**benniaustin** · 12-29-2006, 05:25 PM

That's a whole lot more than any quick explanation I could give you. If you're going to stick with tables, just put the table inside of the div, and make the table and div the same size.

if you want some help with CSS layouts. do a google search for

css float tutorial

you should be able to find a site, that helps with your positioning.

Thread: Center align a table

Thread Tools

Search Thread

Center align a table

Bookmarks

Bookmarks

Posting Permissions