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

StackOverflow https://stackoverflow.com/questions/301147

Вопрос

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

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

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

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

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

Это было полезно?

Решение

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

  

& # 8220; правильно & # 8221; способ центрировать таблицу с помощью CSS. Соответствующие браузеры должны центрировать таблицы, если левые и правые поля равны. Самый простой способ сделать это - установить для левого и правого поля значение & # 8220; auto. & # 8221; Таким образом, можно написать в таблице стилей: 

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>

Другие советы

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

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

Простой.IE6 и выше с радостью центрирует вашу таблицу с помощью «margin:0 auto;», если страница отображается только в «стандартном» режиме.Чтобы это произошло, вам необходимо допустимое объявление типа документа, например 

<!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 и ниже уже привыкли к некоторым странно выглядящим веб-сайтам, но вам все равно необходимо убедиться, что эти визуальные сбои не сделают ваш сайт непригодным для использования.

Приятного кодирования!

РЕДАКТИРОВАТЬ:Извините, возможно, мне следует отметить, что вам не обязательно иметь «строгий» тип документа, чтобы перевести IE6 в «стандартный» режим рендеринга.Я понял, что так может показаться из примеров типов документов, которые я разместил выше.Например, это объявление типа документа, конечно, будет работать одинаково: 

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

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

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

Вам нужен какой-то способ сказать, что вы хотите центрировать таблицу, и человек использует более старый браузер. Затем вставьте & Quot; & Lt; center & Gt; & Quot; команды вокруг стола. В противном случае - используйте CSS.

Удивительно - если вы хотите центрировать все в области ТЕЛА - вы просто можете использовать стандарт 

text-align: center;

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

style="text-align:center;"

(я думаю)

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

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

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

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

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

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top