61

On a page I'm working on at the moment, I can't seem to be able to center a table with an image in the first row and two columns of text below it (the two columns shouldn't be more than the image's width) Here's the page : http://www.puzzles-et-jeux.com/fr/page/minipuzzles.html I spent a lot of time trying to solve this. I would like to keep it in HTML because I have to rush and also because I have to create 20 pages of the sort with different widths /+ layouts for each image.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
FabricePMW
  • 627
  • 1
  • 7
  • 9

6 Answers6

113

For your design, it is common practice to use divs rather than a table. This way, your layout will be more maintainable and changeable through proper styling. It does take some getting used to, but it will help you a ton in the long run and you will learn a lot about how styling works. However, I will provide you with a solution to the problem at hand.

In your stylesheets you have margins and padding set to 0 pixels. This overrides your align="center" attribute. I would recommend taking these settings out of your CSS as you don't normally want all of your elements to be affected in this manner. If you already know what's going on in the CSS, and you want to keep it that way, then you have to apply a style to your table to override the previous sets. You could either give the table a class or you can put the style inline with the HTML. Here are the two options:

  1. With a class:

    <table class="centerTable"></table>

In your style.css file you would have something like this:

.centerTable { margin: 0px auto; }

  1. Inline with your HTML:

    <table style="margin: 0px auto;"></table>

If you decide to wipe out the margins and padding being set to 0px, then you can keep align="center" on your <td> tags for whatever column you wish to align.

Wesley Porter
  • 1,401
  • 2
  • 13
  • 15
  • 1
    Note: I'm not going to downvote you, but ... I'm not onboard with saying that the method you prefer is "proper" and the method someone else is trying to use is therefor improper. This is CSS and HTML: What works is proper. Some levitate toward one method, others levitate towards another. But if a standards-based browser will properly display the information: It was done right. That's what it's for. I do give you kudos (and the upvote) for providing the solution and if you had used a phrase more akin to "how i do it" rather than "proper", I'd have even been happy about it. ;) – TheSatinKnight Aug 26 '18 at 23:06
  • Not working with a display: inline-table tho – Barbz_YHOOL Jun 21 '21 at 02:24
  • With margin set to auto, [0px can be left out](https://www.w3schools.com/css/css_margin.asp). Since the auto will center the table, the NNpx will only control the top and bottom margins. The left and right margins can be controlled by width instead. e.g. `table { width: 60%; margin: 50px auto;}` – Leon Chang Nov 10 '21 at 03:55
51
table
{ 
margin-left: auto;
margin-right: auto;
}

This will definitely work. Cheers

Talha Daniyal
  • 531
  • 4
  • 4
17

Try this -

<table align="center" style="margin: 0px auto;"></table>
Avinash T.
  • 2,280
  • 2
  • 16
  • 23
  • 21
    `align` attribute is obsolete and unneeded for pages operating in standards-compliant mode (i.e. with proper DOCTYPE). – Marat Tanalin Dec 28 '12 at 17:37
  • "The align attribute of is not supported in HTML5. Use CSS instead." from https://www.w3schools.com/Tags/att_table_align.asp
     – Maurici Abad Mar 25 '20 at 09:48
1

Give it a class of center

then on CSS

.center {
  margin-left: auto;
  margin-right: auto;
}
ephantus okumu
  • 178
  • 2
  • 11
0
<table align="center"></table>

This works for me.

alhelal
  • 916
  • 11
  • 27
  • "The align attribute of is not supported in HTML5. Use CSS instead." from https://www.w3schools.com/Tags/att_table_align.asp
     – Maurici Abad Mar 25 '20 at 09:48
0
      margin-left: auto;
    margin-right: auto;

You could adjust it depending on the screen size

Gabriel soft
  • 432
  • 3
  • 7
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 12 '22 at 09:11