Is There a Way to Indent Tables in XHTML?

  • Thread starter jeff1evesque
  • Start date
In summary: The HTML you found is a way to put style information (usually mere decoration) directly into the HTML document, rather than in a separate CSS document. You don't want to do that.In summary, the person is asking if there is a way to indent a table on their website by 20 pixels using CSS. They have tried using padding-left and margin-right, but it did not work. They also found code for inline CSS that works, but they are unable to incorporate it into a separate CSS file. They are seeking help to properly indent the table using CSS.
  • #1
jeff1evesque
312
0
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
 
Last edited by a moderator:
Technology news on Phys.org
  • #2
so, you want to indent those 8 links by 20px?

use

padding-left: 20px;

in

table
{
padding-left: 20px;
}

or in td
 
  • #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:
  • #4
jeff1evesque said:
.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 }
 

1. What is XHTML indenting tables?

XHTML indenting tables is a way to organize and format data in a table structure using the XHTML language. It allows for easy reading and understanding of data.

2. Why is XHTML indenting tables important?

XHTML indenting tables helps to maintain consistency and structure in web pages. It also makes it easier for search engines to understand and index the data in a table.

3. How do you indent tables in XHTML?

To indent tables in XHTML, you can use the border-collapse: collapse; property in CSS. This will merge the borders of table cells and create a neat and organized look.

4. Can you indent specific parts of a table in XHTML?

Yes, you can indent specific parts of a table in XHTML by using the padding property in CSS. This allows you to add spacing between cells or rows, creating a more visually appealing table.

5. Are there any disadvantages to indenting tables in XHTML?

One potential disadvantage of indenting tables in XHTML is that it may increase the file size of the webpage. This can affect the loading speed of the page, especially for users with slower internet connections.

Similar threads

  • Programming and Computer Science
Replies
1
Views
1K
  • Programming and Computer Science
Replies
4
Views
1K
  • Programming and Computer Science
Replies
4
Views
1K
  • Programming and Computer Science
Replies
9
Views
3K
  • Programming and Computer Science
Replies
9
Views
4K
  • Programming and Computer Science
Replies
2
Views
5K
  • Programming and Computer Science
Replies
2
Views
4K
  • Programming and Computer Science
Replies
1
Views
3K
  • Programming and Computer Science
Replies
4
Views
2K
  • MATLAB, Maple, Mathematica, LaTeX
Replies
4
Views
2K
Back
Top