Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
|
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old June 15th, 2006, 01:12 AM
Authorized User
 
Join Date: Jun 2006
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Default Trying to center a table with scrollbar

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
__________________
Sickopuppie
 
Old June 15th, 2006, 01:19 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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
 
Old June 15th, 2006, 01:48 AM
Authorized User
 
Join Date: Jun 2006
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
 
Old June 15th, 2006, 02:02 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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
 
Old June 15th, 2006, 02:36 AM
Authorized User
 
Join Date: Jun 2006
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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

Sickopuppie
 
Old June 15th, 2006, 02:43 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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





Similar Threads
Thread Thread Starter Forum Replies Last Post
add scrollbar to table MAntis_sg Classic ASP Basics 3 May 18th, 2006 11:36 AM
How can we put the Table in the center of browser nitinsuri1980 ASP.NET 1.0 and 1.1 Professional 1 April 2nd, 2006 04:09 AM
How can we put the Table in the center of browser? nitinsuri1980 ASP.NET 1.0 and 1.1 Basics 1 April 1st, 2006 10:00 PM
Scrollbar in "Table" mcinar HTML Code Clinic 10 January 16th, 2005 08:47 PM
Scrollbar in "Table" mcinar Classic ASP Basics 7 January 2nd, 2005 09:03 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.