CSS способ горизонтального выравнивания таблицы

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

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

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

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

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

8 91
html css css-tables alignment

8 ответов:

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

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

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

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

элегантное кросс-браузерное решение css: Это работает как в MSIE 6 (причуды и стандарты), 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>
177

попробуйте это:

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

простой. 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">

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

удачи в кодировании!

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

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

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

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

вам нужно каким-то образом сказать, что вы хотите центрировать таблицу, и человек использует более старый браузер. Затем вставьте команды "

" вокруг таблицы. В противном случае-используйте css.

удивительно - если вы хотите центр все в области тела - вы просто можете использовать стандартный

text-align: center;

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

2
style="text-align:center;"

(Я думаю)

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

0

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

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

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

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

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