Help - Search - Members - Calendar
Full Version: How To Align A Html Table.
Sal's RuneScape Forum > Everything... Not RuneScape > Tech Talk > Programming & Web Development
The Virus
Oks o I am building a website for my friend, and I am trying to align a table (<table> tag) into the center, but the catch is that i want there to be some opening so you can see the main background. Now from what other people have told me, I have to use CSS. Now the thing is that, once I go the align code, and put the loading code or whatever in my main html page, and save it, it does nothing. Why? Because w3school.com, the site i sued for these codes, doesn't event tell me how to make the CSS code relate to just the table section, so its just sitting there doing nothing. Now I obviously don't know poop about CSS, but I think that is how it kinda works, cause you can't just add a code that doesn't have any clues to what to apply it to, and it will magically do it. So yeah, how do I align this table. Doesn't have to be CSS, as long as I align it. Thanks.
Samarkov
Would something like this work?
I don't believe you HAVE to use CSS for this..
CODE
<html>
<head></head>
<body>
<center>
<table width="60%"><tr><th>Content</th></tr></table></center></body>
</html>


~~Samarkov king.gif
gabtdw
Hi,

This should work:

CODE
table {margin-left: auto; margin-right: auto;}


Obviously if the table has a class, add that in with a dot (table.class).

@Samarkov: I don't believe the <center> element is even supported in the latest versions of (X)HTML ohmy.gif
Samarkov
QUOTE (gabtdw @ Nov 3 2009, 03:55 PM) *
Hi,

This should work:

CODE
table {margin-left: auto; margin-right: auto;}


Obviously if the table has a class, add that in with a dot (table.class).

@Samarkov: I don't believe the <center> element is even supported in the latest versions of (X)HTML ohmy.gif

I use it on my site and it's approved by w3c. I could be talking about something entirely different, but I don't see much harm in it.

~~Samarkov king.gif
The Virus
Well I can't figure out where to add it, heres my code:

CODE
    <table>
        <br>
        <fieldset name="Group1" style="border-bottom-color: #FFFFFF; height: 535px; width: 1560px; background-color: #000000; clear: both; border-left-color: #FFFFFF; border-right-color: #FFFFFF; border-top-color: #FFFFFF;"><br><br><font size="4" color="#ecb81f">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Removed text for privacy reasons.</font>
        <legend class="style2">
        <img height="39" src="img/welcome.png" width="178">
        </legend>
        &nbsp;<br>
        </fieldset>
    </table>


I am trying to add
CODE
table {margin-left: auto; margin-right: auto;}
but where ever I add it, it shows up as text not code.

Also, I am trying to make my index just one image with a button that says enter in the middle, and the button will be aprt of the background, how do I make the button click able but nothing else? Do I have to make the button separate image? If so how would I align it?
finisterra
You could add it inside the table tag if you are only using it for this table.

CODE
<table style="margin-left: auto; margin-right: auto;">
The Virus
CODE
<table style="margin-left: auto; margin-right: auto;">

Didn't work

Fixed: Added finisterra's code in the fieldset.

Now:

QUOTE
Also, I am trying to make my index just one image with a button that says enter in the middle, and the button will be aprt of the background, how do I make the button click able but nothing else? Do I have to make the button separate image? If so how would I align it?


gabtdw
QUOTE (The Virus @ Nov 4 2009, 04:42 AM) *
CODE
<table style="margin-left: auto; margin-right: auto;">

Didn't work

Fixed: Added finisterra's code in the fieldset.

Now:

QUOTE
Also, I am trying to make my index just one image with a button that says enter in the middle, and the button will be aprt of the background, how do I make the button click able but nothing else? Do I have to make the button separate image? If so how would I align it?





If you needed to have the button image in the background, rather than being an actual thing, you could do it like this:

CODE
<div><a href="blah" style="display: block; margin-left: auto; margin-right: auto; width: Ypx; height: Zpx; background-image: url(/dir/of/button/img.gif); text-align: center; line-height: Zpx;">Enter</a></div>


replacing Y and Z with the dimensions of the button image, the url(...) with the path to the button image and the line-height to the height of the button image.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.