HTML/CSS Is There a Way to Indent Tables in XHTML?

[jeff1evesque]

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 . 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

 

[rootX]

so, you want to indent those 8 links by 20px?

use

padding-left: 20px;

in

table
{
padding-left: 20px;
}

or in td

 

[jeff1evesque]

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

 

[CRGreathouse]

.table { margin-right: 15px; }

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

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 }