CSS way to horizontally align table

Question

I want to show a table of fixed width at the center of browser window  Now I use   lt table width  200  align  center  gt     But Visual Studio 2008 gives warning on this line   Attribute  align  is considered outdated  A newer construct is recommended   What CSS style should I apply to the table to obtain the same layout

User · Answer

Add to the div style   width  fit-content

User · Answer

Although it might be heresy in today s world - in the past you would do the following non-css code   This works in everything up to and including today s browsers but - as I have said - it is heresy in today s world    lt center gt   lt table gt          lt  table gt   lt  center gt    What you need is some way to tell that you want to center a table and the person is using an older browser   Then insert the   lt center   commands around the table   Otherwise - use css   Surprisingly - if you want to center everything in the BODY area - you just can use the standard  text-align  center    css command and in IE8  at least  it will center everything on the page including tables

User · Answer

Try this    lt table width  200  style  margin-left auto margin-right auto  gt

User · Answer

Steven is right  in theory      the    correct    way to center a table using CSS  Conforming browsers ought to center tables if the left and right margins are equal  The simplest way to accomplish this is to set the left and right margins to    auto     Thus  one might write in a style sheet    table        margin-left  auto      margin-right  auto      But the article mentioned in the beginning of this answer gives you all the other way to center a table      An elegant css cross-browser solution     This works in both MSIE 6  Quirks and Standards   Mozilla  Opera and even Netscape 4 x without setting any explicit widths    div centered        text-align  center     div centered table        margin  0 auto       text-align  left       lt div class  centered  gt       lt table gt               lt  table gt   lt  div gt

User · Answer

Simple  IE6 and above will happily center your table with  margin  0 auto   if only the page renders in  standards  mode  To make this happen you need a valid doctype declaration  such as    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt    or    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt    True  IE5 5 and below will still refuse to center the table but perhaps you can live with that  especially if the page is still functional with the table left aligned  I think by now users of IE5 5 and below are fairly used to some odd looking websites - but you still need to ensure that those visual glitches don t render your site unusable    Happy coding    EDIT  Sorry  I should perhaps point out that you do not have to have a  strict  doctype to get IE6 and up into  standards  rendering mode  I realised it might seem that way from the doctype examples I posted above  For example  this doctype declaration will of course work equally     lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt

User · Answer

Simple  IE6 and above will happily center your table with  margin  0 auto   if only the page renders in  standards  mode  To make this happen you need a valid doctype declaration  such as    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt    or    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt    True  IE5 5 and below will still refuse to center the table but perhaps you can live with that  especially if the page is still functional with the table left aligned  I think by now users of IE5 5 and below are fairly used to some odd looking websites - but you still need to ensure that those visual glitches don t render your site unusable    Happy coding    EDIT  Sorry  I should perhaps point out that you do not have to have a  strict  doctype to get IE6 and up into  standards  rendering mode  I realised it might seem that way from the doctype examples I posted above  For example  this doctype declaration will of course work equally     lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt

User · Answer

Basically  it works like    lt table align  center  gt          But  you can do it in better way using CSS  and this will be a better approach to use CSS as  it provides dynamic behavior to a web page and is responsive      lt table style  text-align center   gt    Also  if you need to display only table on a page then you can go with body tag alignment only as shown below     lt body style  text-align center   gt   lt table gt         lt  table gt      If you want any other suggestions please let me know  Will surely help you on this  Also using bootstrap features this would be more easy and interactive

User · Answer

This should work    lt div style  text-align center   gt     lt table style  margin  0 auto   gt       lt  -- table markup here  -- gt     lt  table gt   lt  div gt

User · Answer

Steven is right  in theory      the    correct    way to center a table using CSS  Conforming browsers ought to center tables if the left and right margins are equal  The simplest way to accomplish this is to set the left and right margins to    auto     Thus  one might write in a style sheet    table        margin-left  auto      margin-right  auto      But the article mentioned in the beginning of this answer gives you all the other way to center a table      An elegant css cross-browser solution     This works in both MSIE 6  Quirks and Standards   Mozilla  Opera and even Netscape 4 x without setting any explicit widths    div centered        text-align  center     div centered table        margin  0 auto       text-align  left       lt div class  centered  gt       lt table gt               lt  table gt   lt  div gt

User · Answer

lt style gt       abc           text-align  center         lt  style gt    lt table class  abc  gt       lt tr gt           lt td gt Item1 lt  td gt           lt td gt Item2 lt  td gt       lt  tr gt   lt  table gt

User · Answer

This should work    lt div style  text-align center   gt     lt table style  margin  0 auto   gt       lt  -- table markup here  -- gt     lt  table gt   lt  div gt

User · Answer

Try this    lt table width  200  style  margin-left auto margin-right auto  gt

User · Answer

I m just learning this and what finally worked for me was to first make a table with three rows  Set the margin for the left and right rows to 50   Then put a single row  fixed width table inside of the  table data  of the center  table row

User · Answer

style  text-align center       i think   or you could just ignore it  it still works

User · Answer

I m just learning this and what finally worked for me was to first make a table with three rows  Set the margin for the left and right rows to 50   Then put a single row  fixed width table inside of the  table data  of the center  table row

User · Answer

Try this    lt table width  200  style  margin-left auto margin-right auto  gt

User · Answer

lt style gt       abc           text-align  center         lt  style gt    lt table class  abc  gt       lt tr gt           lt td gt Item1 lt  td gt           lt td gt Item2 lt  td gt       lt  tr gt   lt  table gt

User · Answer

style  text-align center       i think   or you could just ignore it  it still works

User · Answer

style  text-align center       i think   or you could just ignore it  it still works

User · Answer

Simple  IE6 and above will happily center your table with  margin  0 auto   if only the page renders in  standards  mode  To make this happen you need a valid doctype declaration  such as    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt    or    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt    True  IE5 5 and below will still refuse to center the table but perhaps you can live with that  especially if the page is still functional with the table left aligned  I think by now users of IE5 5 and below are fairly used to some odd looking websites - but you still need to ensure that those visual glitches don t render your site unusable    Happy coding    EDIT  Sorry  I should perhaps point out that you do not have to have a  strict  doctype to get IE6 and up into  standards  rendering mode  I realised it might seem that way from the doctype examples I posted above  For example  this doctype declaration will of course work equally     lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt

User · Answer

This should work    lt div style  text-align center   gt     lt table style  margin  0 auto   gt       lt  -- table markup here  -- gt     lt  table gt   lt  div gt

User · Answer

Try this    lt table width  200  style  margin-left auto margin-right auto  gt

User · Answer

Simple  IE6 and above will happily center your table with  margin  0 auto   if only the page renders in  standards  mode  To make this happen you need a valid doctype declaration  such as    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt    or    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt    True  IE5 5 and below will still refuse to center the table but perhaps you can live with that  especially if the page is still functional with the table left aligned  I think by now users of IE5 5 and below are fairly used to some odd looking websites - but you still need to ensure that those visual glitches don t render your site unusable    Happy coding    EDIT  Sorry  I should perhaps point out that you do not have to have a  strict  doctype to get IE6 and up into  standards  rendering mode  I realised it might seem that way from the doctype examples I posted above  For example  this doctype declaration will of course work equally     lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt

User · Answer

style  text-align center       i think   or you could just ignore it  it still works

User · Answer

Steven is right  in theory      the    correct    way to center a table using CSS  Conforming browsers ought to center tables if the left and right margins are equal  The simplest way to accomplish this is to set the left and right margins to    auto     Thus  one might write in a style sheet    table        margin-left  auto      margin-right  auto      But the article mentioned in the beginning of this answer gives you all the other way to center a table      An elegant css cross-browser solution     This works in both MSIE 6  Quirks and Standards   Mozilla  Opera and even Netscape 4 x without setting any explicit widths    div centered        text-align  center     div centered table        margin  0 auto       text-align  left       lt div class  centered  gt       lt table gt               lt  table gt   lt  div gt

User · Answer

Add to the div style   width  fit-content

User · Answer

Although it might be heresy in today s world - in the past you would do the following non-css code   This works in everything up to and including today s browsers but - as I have said - it is heresy in today s world    lt center gt   lt table gt          lt  table gt   lt  center gt    What you need is some way to tell that you want to center a table and the person is using an older browser   Then insert the   lt center   commands around the table   Otherwise - use css   Surprisingly - if you want to center everything in the BODY area - you just can use the standard  text-align  center    css command and in IE8  at least  it will center everything on the page including tables

User · Answer

Steven is right  in theory      the    correct    way to center a table using CSS  Conforming browsers ought to center tables if the left and right margins are equal  The simplest way to accomplish this is to set the left and right margins to    auto     Thus  one might write in a style sheet    table        margin-left  auto      margin-right  auto      But the article mentioned in the beginning of this answer gives you all the other way to center a table      An elegant css cross-browser solution     This works in both MSIE 6  Quirks and Standards   Mozilla  Opera and even Netscape 4 x without setting any explicit widths    div centered        text-align  center     div centered table        margin  0 auto       text-align  left       lt div class  centered  gt       lt table gt               lt  table gt   lt  div gt

User · Answer

Basically  it works like    lt table align  center  gt          But  you can do it in better way using CSS  and this will be a better approach to use CSS as  it provides dynamic behavior to a web page and is responsive      lt table style  text-align center   gt    Also  if you need to display only table on a page then you can go with body tag alignment only as shown below     lt body style  text-align center   gt   lt table gt         lt  table gt      If you want any other suggestions please let me know  Will surely help you on this  Also using bootstrap features this would be more easy and interactive

User · Answer

This should work    lt div style  text-align center   gt     lt table style  margin  0 auto   gt       lt  -- table markup here  -- gt     lt  table gt   lt  div gt

[html] CSS way to horizontally align table

Examples related to html

Examples related to css

Examples related to alignment

Examples related to css-tables