0

I am trying to center a table on a HTML file. When I do it within the tag:

e.g. table align="center",

it seems to work. However, when I apply this in the external CSS file, it doesn't have any effect.

e.g. (in the external CSS) table {align:center}.

The same happens when I try doing this internally within the <head><style></style></head> tags.

What is the reason for why it's not working? (I'm mainly curious about why the align="center" works but the align:center (in css) doesn't). And if this way is incorrect then what are some alternatives?

I am using this table as a menu bar which should appear on every webpage so I do not want to continuously repeat the first-mentioned method. I'm quite new to HTML and CSS so any help is appreciated. Thanks.

KNAU
  • 11
  • 1
  • you probably mean {align:center;} Right? It is not '=' – Ben Bozorg Jan 09 '18 at 03:50
  • Ahh yes sorry. I will edit. – KNAU Jan 09 '18 at 03:51
  • Assign some `width` to your table and use `margin: auto;`. That's all you need. – Mr. Alien Jan 09 '18 at 03:54
  • 1
    Also there are lot of similar questions on how to center something and blog posts as well, search for it and try first. – Mr. Alien Jan 09 '18 at 03:55
  • Thanks for the suggestions of other posts. I researched before but somehow missed some of them which had the answer I needed. Should I delete this question now? – KNAU Jan 09 '18 at 04:12
  • 1
    "I am using this table as a menu bar ", this is an outdated approach. As you are just learning, don't start by learning bad practices. the `table` tag should be used for tabular data, that is it. There are plenty of tutorials out there on how to create a menu bar without using tables. – Jon P Jan 09 '18 at 04:14

2 Answers2

0

Similar behavior to align="center" can be achieved with the following CSS:

table { margin: 0 auto; }
AlliterativeAlice
  • 11,841
  • 9
  • 52
  • 69
0
table { margin: 0px auto; }

or

table
{ 
margin-left: auto;
margin-right: auto;
}
Tubra
  • 24
  • 4