Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

XHTML indenting tables?

  1. May 18, 2009 #1
    Hello,

    I have a website that was a project for one of my computer science courses. The class is over now, but I wanted to touch up and gain more experience designing webpages. I was wondering if there is a way of indenting tables? My site is: http://pubpages.unh.edu/~jmm42/FINAL/main.html [Broken] . The eight links to the left along with the two paragraphs to the right are infact in a table. However, I didn't like the fact that the links (the first column) are lined up to the far left. I was wondering is there a way I could indent the whole table to the right- by say 20pixels?? This way the list of links could be flush with my picture on the top. I've been searching online for ways to do this but couldn't find anything. If there is code that allows this to be done in CSS- that would be preferable.

    Oh by the way, this the following is my CSS code for the page:

    ================================================== ===============

    /* Comments in CSS files differ from XHTML- it is not '<!-- comment -->'
    File includes rules to add presentation details to main.html */

    /* Set the body of the page to specified format */
    body { background-color: #00003B; color: black;
    font-size: large; }

    /* Set top-layer background-green, dimension of green page*/
    #pageContent { background: url(../PICTURES/greenBackground2.jpg)
    no-repeat center;
    width: 810px;
    margin: 0px auto; /* See definitions below (#7) */
    border-style: solid;
    border-color: #006400;
    border-width: 8px; }

    /* Set topPic */
    #topPic { text-align: center; }

    /* musicPlayer */
    #musicPlayer { text-indent: 20px; }

    /* Table format: breaks into two columns (list of links and text-column)
    #menu-list { text-indent: 20px; }

    /* Set CSS atrributes for menu bar*/
    #menu { background: #fff;
    letter-spacing : 7px;
    background: url(../PICTURES/greenBackground2.jpg) no-repeat center; }

    #menu li { display: inline; } /* See definitions below (#5) */
    #menu li a { padding: 1px 2.2em; /* See definitions below (#6) */
    text-indent: 3px; }

    /* NOTE: HTML elements are either shown as block or inline elements: */
    #menu a { display: block; /* See definitions below (#1) */
    float: left; /* See explanation below (#2) */
    height: 23px;
    text-align: center;
    text-decoration: none; /* See below (#4).............*/
    /* background: #9ACD32 */ }

    /* Attributes when cursor is over "menu" hyperlinks */
    #menu a:hover { color: navy;
    text-decoration: underline;
    background : #6B8E23;}
    #menu a:visited { color: #00008B; }

    /* Establishes columns of text, images for main area */
    #leftCol1 { width: 250px;
    border-right: 1px dashed #000;
    padding: 10px;
    float: left;
    text-align: justify; }

    /* margin: 10px 40px;
    width: 40%;
    color: black;
    border-style: solid;
    border-color: #006400;
    border-width: 1px; } */

    #rightCol1 { width: 250px;
    border-right: 1px dashed #000;
    padding: 10px;
    float: left;
    text-align: justify; }

    /* margin: 10px 200px;
    width: 40%;
    color: black;
    border-style: solid;
    border-color: #006400;
    border-width: 1px; } */

    /* Copyright */
    #copyright { text-indent: 2px;
    font-size: 12px; }

    /* W3C validator */
    #validator { text-align: center; }

    ================================================== ==============



    Thanks,


    Jeffrey
     
    Last edited by a moderator: May 4, 2017
  2. jcsd
  3. May 18, 2009 #2
    so, you want to indent those 8 links by 20px?

    use

    padding-left: 20px;

    in

    table
    {
    padding-left: 20px;
    }

    or in td
     
  4. May 18, 2009 #3
    I tried this, but it didn't seem to work. I found the following code for inline CSS code that works: <TABLE ALIGN="left" STYLE="margin-right:15px;">. But when I try to incorporate this for a separate CSS file, it doesn't work.. for instance if I put the following in my CSS file:
    .table { margin-right: 15px; }

    but the code did nothing, and yet CSS validator did not yield error.

    THanks,

    JL
     
    Last edited: May 18, 2009
  5. May 18, 2009 #4

    CRGreathouse

    User Avatar
    Science Advisor
    Homework Helper

    That's the problem with computers: they do what you tell them, not what you want. You've told it to put a 15-pixel right margin on all elements with the class "table". You want
    table { margin-right: 15px; }
    or even
    table { margin-right: 15px }
     
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook




Similar Discussions: XHTML indenting tables?
  1. XHTML (Flash) (Replies: 2)

  2. XHTML (slide show) (Replies: 2)

  3. Java If Else Indentation (Replies: 15)

Loading...