it-swarm.com.ru

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

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

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

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

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

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

91
Alexander Prokofyev

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

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

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

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

Элегантное кросс-браузерное решение CSS: работает как в MSIE 6 (Quirks and Standards), так и в 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>
179
VonC

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

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

Просто. 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, которые я разместил выше. Например, это объявление типа документа, конечно, будет работать одинаково:

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

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

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

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

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

text-align: center;

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

2
Mark Manning
style="text-align:center;" 

(Я думаю)

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

0
Steven A. Lowe

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

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

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

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

0
sean