Trying to center a table with scrollbar

Sickopuppie · June 15th, 2006, 01:12 AM

I apologize for posting so much but I am having trouble centering a table with a scroll bar. As you can se, I tried the ailgn="center" command, but for some reason, the table is still aligned to the right. Am I doing something wrong? Can someone please help me?

<body>
<div align="center" style="overflow: auto;height: 100px; width: 521px;">
    <table border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#999999" bgcolor="#FFFFFF" style="width: 500px;">
      <tr>
        <td>
           TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
        </td>
      </tr>
</table>
</div>
</body>

Sickopuppie

meow · June 15th, 2006, 01:19 AM

The table is centered but the DIV that contains it is only a little wider so you don't see it. :)

Not sure what you want to do. Center the DIV? Is the table for data or will it contain only text as in your example? Because then it isn't needed at all.

--
http://yupapa.com

Sickopuppie · June 15th, 2006, 01:48 AM

I believe my table will contain text and pictures. I was told I should add a scrollbar using a <div> tag but once I do that, the table does not align in the center anymore. I have no idea how to center my table and I am quite the amatuer in html. I hope that helps.

Sickopuppie

meow · June 15th, 2006, 02:02 AM

Point is that then you can put your text (and images) directly in the DIV. You don't need the table.

You can center blocks in several ways. The old fashioned way you tried, <div align="center"> , still works under certain conditions, but it center its content. I.e. the table in this case. If you remove the width from the DIV so it spans the whole page you can see that the table is centered.

The modern way to center blocks is with CSS. You do that by giving the block equal left and right margins. They can be 'auto'. You also need to use a doctype that puts browsers in Standards Mode.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Blah blah</title>
</head>

<body>

<div align="center" style="overflow: auto; height: 100px; width: 500px; border: 5px solid; margin-right: auto; margin-left: auto">
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</div>

</body>
</html>

What doctype you actually use is up to you. HTML or XHTM, Strict or Transitional - they can all trigger Standards Mode.

--
http://yupapa.com

Sickopuppie · June 15th, 2006, 02:36 AM

Thanks, I think I see what you're saying. I really appreciate it.

Sickopuppie

meow · June 15th, 2006, 02:43 AM

Oops! I edited sloppy. The align attribute should go.

<div style="overflow: auto; height: 100px; width: 500px; border: 5px solid; margin-right: auto; margin-left: auto">

Also, if you don't do that already you should put all CSS in an external CSS file so it can be cached. It makes for very small and clean HTML. :)

--
http://yupapa.com