4 Replies Latest reply on Mar 20, 2010 11:18 AM by Nancy OShea

    Centering a table on a page

    delsutton Level 1

      Hi

       

      Is there an easy way to centre a table on a page i.e. both horizontally and vertically? I can figure out the horizontal element but can't seem to get it to do it vertically.

       

      Thanks

        • 1. Re: Centering a table on a page
          osgood_ Level 8

          delsutton wrote:

           

          Hi

           

          Is there an easy way to centre a table on a page i.e. both horizontally and vertically? I can figure out the horizontal element but can't seem to get it to do it vertically.

           

          Thanks

           

           

           

          The below method is taken from http://apptools.com/examples/tableheight.php where you can read more:

           

           

          Basically the solution is insert your existing table in another tables td cell which is set to stretch to the height of the browser window.

           

           

           

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <style type="text/css">
          html, body, #wrapper {
                height:100%;
                margin: 0;
                padding: 0;
                border: none;
                text-align: center;
             }
             #wrapper {
                margin: 0 auto;
                text-align: left;
                vertical-align: middle;
                width: 400px;
             }
          </style>
          <title>Untitled Document</title>
          </head>

           

          <body>
          <table id="wrapper">
                <tr>
                   <td>This is centered</td>
                </tr>
             </table>

           

          </body>
          </html>

          • 2. Re: Centering a table on a page
            Nancy OShea Adobe Community Professional & MVP

            Vertical centering is not usually a concern on web pages.  True Vertical Centering is difficult to calculate because you don't know how many toolbars I have or how much vertical space I allow for browser viewport.  What may appear vertically centered to you probably won't be vertically centered for other people.

             

            Vertical centering with CSS APDiv and percentages, but I don't recommend this for an entire web site.

            http://alt-web.com/TEMPLATES/vertical-center.html

             

             

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists
            http://alt-web.com/
            http://twitter.com/altweb
            http://alt-web.blogspot.com

            • 3. Re: Centering a table on a page
              RobTMathias

              Thanks Nancy, So helpful! Is there way to take a form like a table or just a box that will accept tables, images, videos, text, and make it format using the alignment properties of normal CSS (browser default, baseline, center, left, right, bottom, absolutes etc..)? Such as where instead of an apdiv with everything crowding under it and having to use tons of return npsb's to keep the stuff from crowding up under it (and then still you are not able to do bigger resolutions neatly formatted), you have resolution-dynamically aligning boxes of various sizes that go in and around text and side by side and to the left and right and middle of each otherr?     Or almost as good is there a way to make something like a percentage positioned apdiv that holds it's spot, so tables and images and text formatted normally on the page cant slide underneath it?

               

              Also, is there a way to take sections of the page and make them columned, where I am able to take care of almost the same formatting, and the columns can get narrower or wider on different screens, making text paragraphs bunch up vertically inside them on narrower screens, and images and boxes and tables around the text within that column dance around like as defined by css alignment making an image right aligned, one left aligned, and when centered text is selected it dances in the middle of it, and nothing is bunching up under the images and tables either, plus I can still have tables, images, videos, and more tables side by side by placing them in the different columns?

               

              I noticed that inside a standard div, nothing can ever be side by side, by floating a table left, an image right, and having the centered text float in between it and scrunch up on narrower screens where the table and image get closer together, while still keeping stuff above the div above it and stuff below the div below it, but this is really the functionality I am looking for, no matter how I get it.  I am starting to consider doing the entire vertical 25,000px page redone in percentage formatted APDivs (which currently has tables and images aligned to the left and right and random places of baseline and browser default swf's and flv players with centered text floating to every direction of them).. Is this likely to come out successful on screens ranging from 1024 to 1980px wide? My web design teacher says it's not that easy to get predictable results, but one thing I like about the idea is the chance for tables side by side and text in between them that has images mixed in according to full css alignment property options. Im sure you have often wished for this, do you have any suggestions, maybe random features im not aware of yet?

               

              EDIT: I have resolved a great deal of anything I was curious by a 3-cell horizontal 100% table, content in middle cell which gets 99%, This acts as a very nice divider and still centers and has all of the normal align properties of the main body. I am saving APdivs for hide/unhide behaviors upon rollover or clicks, for tips and expanded information reading.. Our teacher taught us this it wasnt in the book. Any other cool APDiv behaviors or ways to trigger you guys know of? I have these dropdown menus for paypal buttons I created on paypal, and I have like 10 options for everything on my site, I kinda wanted to trigger an APDiv unhide behavior for each menu part you rollover, is the best way to have the rollover hide the other 9 as it unhides the current menu cell, or can it track which one of the 10 was previously unhidden and intelligently hide just that one? I am thinking you can set a variable global to the apdivs associated with that set of menu cells to track the currently unhidden one, and then the next one you rollover simply reads what the previously unhidden one was and hides it before replacing itself into that variable and unhiding itself? What is the way to go about it? Now to close it once done with the menu selections (hide the currently open and not open a new one), either click on it or have it go away once the dropdown menu becomes unextended again, can a dropdown menu becoming retracted again trigger anything?

               

              Message was edited by: RobTMathias

              • 4. Re: Centering a table on a page
                Nancy OShea Adobe Community Professional & MVP

                I noticed that inside a standard div, nothing can ever be side by side....

                 

                Not true.  See this live demo (view page source to see the code).

                http://alt-web.com/TEMPLATES/Basic-1-col-fixed.html

                 

                Rob, Too many questions.  Start a new discussion, limit your question to 1 sensible topic at a time and use a meaningful subject line. You'll get better answers that way. 

                 

                 

                 

                Nancy O.
                Alt-Web Design & Publishing
                Web | Graphics | Print | Media  Specialists
                http://alt-web.com/
                http://twitter.com/altweb
                http://alt-web.blogspot.com