HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
How To Center A Table
Post new topic   Reply to topic    HTML Help Forum Index -> HTML Table
View previous topic :: View next topic  
Author Message
Mori



Joined: 20 Jul 2009
Posts: 21

PostPosted: Mon Sep 21, 2009 5:07 am     How To Center A Table Reply with quote

Hi everyone,

On the following reference, HTML learners are advised not to use table align attribute and use styles instead. But I don't know how to do it:
http://www.w3schools.com/TAGS/tag_table.asp

Any help is appreciated.
Regards
Mori
sticks464



Joined: 31 Dec 2006
Posts: 2311

PostPosted: Mon Sep 21, 2009 5:35 am     Reply with quote

You can use an inline stylesheet for starters until you get the hang of it.
In the page head section immediately following the title tag add this opening and closing tag.
Code:
<style type="text/css">

</style>


In the html markup add an id to the main table, can be any name to identify this table (cannot start with a number or contain spaces)
Code:
<table id="anyname" cellspacing="0">


Now to style the table and get it aligned use these attributes inside the style tags created in the head section.
Code:
#anyname {
width: 750px;
margin: 0 auto;
border: 0;
padding:0;
}


width = width of table
margin = 0px at the top and bottom, auto = equal margins left and right consisting of the remaining space available of the viewport after the width of the table is subtracted. (Basically means it is centered in the screen).
border = none
padding = none (same as cellpadding)

margin: 0 auto will always center an element unless the element width is set to 100%.
tiepich



Joined: 15 Oct 2009
Posts: 3

PostPosted: Fri Oct 16, 2009 8:47 am     Re: How To Center A Table Reply with quote

Mori wrote:
Hi everyone,

On the following reference, HTML learners are advised not to use table align attribute and use styles instead. But I don't know how to do it:
http://www.w3schools.com/TAGS/tag_table.asp

Any help is appreciated.
Regards
Mori


or you can add a style directly into table tag, if you do not want to have external styles, for example:

Code:

<table style="background-image:url(images/image.jpg); background-repeat: no-repeat; background-position:top center;">
Mori



Joined: 20 Jul 2009
Posts: 21

PostPosted: Fri Oct 16, 2009 9:02 am     Reply with quote

Thanks for the reply!
I tried your code, but it didn't center my table. Would you please give me the table complete code?

Thanks again!
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> HTML Table All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 

 
DARFUR
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial