Выровнять по центру таблицу HTML

На странице, над которой я работаю в данный момент, я не могу сосредоточиться на таблице с изображением в первой строке и двумя столбцами текста ниже (два столбца не должны быть больше чем ширина изображения) Здесь страница: http://www.puzzles-et-jeux.com/fr/page/minipuzzles.html Я потратил много времени, пытаясь решить это. Я хотел бы сохранить его в HTML, потому что мне нужно спешить, а также потому, что мне нужно создать 20 страниц сортировки с разной шириной /+ макетами для каждого изображения.

Ответ 1

Для вашего дизайна распространенной практикой является использование div, а не таблицы. Таким образом, ваш макет будет более удобным и изменчивым благодаря правильному стилю. Это требует некоторого привыкания, но это поможет вам тонну в долгосрочной перспективе, и вы узнаете многое о том, как работает стилизация. Однако я предоставлю вам решение проблемы.

В ваших таблицах стилей у вас есть поля и отступы, установленные на 0 пикселей. Это переопределяет ваш атрибут align="center". Я бы рекомендовал использовать эти настройки вне вашего CSS, поскольку вы обычно не хотите, чтобы все ваши элементы были затронуты таким образом. Если вы уже знаете, что происходит в CSS, и вы хотите сохранить его таким образом, тогда вы должны применить стиль к своей таблице, чтобы переопределить предыдущие наборы. Вы можете либо предоставить таблицу a class, либо вы можете поместить стиль в строку с помощью HTML. Вот два варианта:

С классом:

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

В вашем файле style.css у вас будет что-то вроде этого:

.centerTable { margin: 0px auto; }

Встроенный HTML:

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

Если вы решите уничтожить поля и дополнение, установленное на 0px, вы можете сохранить align="center" в тегах <td> для любого столбца, который вы хотите выровнять.

Ответ 2

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

Это определенно сработает. Приветствия

Ответ 3

Попробуйте это -

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

Ответ 4

<table align="center"></table>

Это работает для меня.