Метод CSS для горизонтального выравнивания таблицы

Я хочу показать таблицу фиксированной ширины в центре окна браузера. Теперь я использую

<table width="200" align="center">

Но Visual Studio 2008 дает предупреждение в этой строке:

Атрибут 'align' считается устаревшим. Рекомендуется использовать более новую конструкцию.

Какой стиль CSS следует применять к таблице для получения того же макета?

Ответы

Ответ 1

Стивен прав, в теория:

"правильный" способ центрировать таблицу с помощью CSS. Соответствующие браузеры должны центрировать таблицы, если левое и правое поля равны. Самый простой способ сделать это - установить левое и правое поля на "авто". Таким образом, можно написать в таблице стилей:

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

Но статья, упомянутая в начале этого ответа, дает вам еще один способ центрировать таблицу.

Элегантное кросс-браузерное решение css: Это работает как в MSIE 6 (Quirks, так и в стандартах), Mozilla, Opera и даже Netscape 4.x без установки явной ширины:

div.centered 
{
    text-align: center;
}

div.centered table 
{
    margin: 0 auto; 
    text-align: left;
}


<div class="centered">
    <table>
    …
    </table>
</div>

Ответ 2

Попробуйте следующее:

<table width="200" style="margin-left:auto;margin-right:auto">

Ответ 3

Simple. IE6 и выше будут счастливо центрировать вашу таблицу с "margin: 0 auto"; если только страница отображается в режиме "стандарты". Чтобы это произошло, вам нужна действительная декларация doctype, например

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

или

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Правда, IE5.5 и ниже по-прежнему отказываются центрировать таблицу, но, возможно, вы можете жить с этим, особенно если страница по-прежнему функционирует с выравниваемой таблицей. Я думаю, что теперь пользователи IE5.5 и ниже довольно привыкли к некоторым нечетным веб-сайтам, но вам все равно нужно обеспечить, чтобы эти визуальные сбои не отображали ваш сайт непригодным для использования.

Счастливое кодирование!

EDIT: Извините, я должен, возможно, указать, что вам не нужно иметь "строгий" тип, чтобы получить IE6 и перейти в режим рендеринга стандартов. Я понял, что это может показаться на примере примеров doctype, которые я опубликовал выше. Например, это объявление doctype, конечно, будет работать одинаково:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ответ 4

Хотя это может быть ересь в сегодняшнем мире - в прошлом вы делали бы следующий код без кода. Это работает во всем, вплоть до сегодняшних браузеров, но, как я уже сказал, это ересь в современном мире:

<center>
<table>
   ...
</table>
</center>

Что вам нужно, так это сказать, что вы хотите центрировать таблицу, а человек использует более старый браузер. Затем вставьте команды "<center> " вокруг таблицы. В противном случае - используйте css.

Удивительно - если вы хотите сосредоточить все в области BODY, вы можете использовать стандартный

text-align: center;

Команда css, и в IE8 (по крайней мере) она будет центрировать все на странице, включая таблицы.

Ответ 5

style="text-align:center;"

(я думаю)

или вы можете просто игнорировать его, он все еще работает

Ответ 6

Это должно работать:

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>

Ответ 7

Я просто изучаю это, и что, наконец, для меня работало, это сначала создать таблицу с тремя строками. Установите маржу для левой и правой строк на 50%. Затем поместите таблицу с фиксированной шириной в одну строку внутри "табличных данных" центральной "строки таблицы".

Ответ 8

<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>

Ответ 9

Добавьте к стилю div:

width: fit-content;

Ответ 10

В основном это работает как,

<table align="center">
...

Но вы можете сделать это лучше с помощью CSS, и это будет лучший подход к использованию CSS, так как он обеспечивает динамическое поведение веб-страницы и отзывчив.

  <table style="text-align:center;">

Кроме того, если вам нужно отобразить только таблицу на странице, вы можете использовать выравнивание тегов тела, как показано ниже,

 <body style="text-align:center;">
<table>
  ...
</table>

Если вы хотите какие-либо другие предложения, пожалуйста, дайте мне знать. Безусловно, поможет вам в этом. Также с использованием функций начальной загрузки это будет более простым и интерактивным.