CSS способ горизонтального выравнивания таблицы
Я хочу показать таблицу фиксированной ширины по центру окна браузера. Теперь я использую
<table width="200" align="center">
но Visual Studio 2008 дает предупреждение в этой строке:
атрибут "align" считается устаревшим. Рекомендуется более новая конструкция.
какой стиль CSS я должен применить к таблице, чтобы получить тот же макет?
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>
простой. 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">
хотя это может быть ересью в современном мире - в прошлом вы бы сделали следующий код без css. Это работает во всем, включая сегодняшние браузеры, но , как я уже сказал , это ересь в современном мире:
<center>
<table>
...
</table>
</center>
что вам нужно, так это каким-то образом сказать, что вы хотите центрировать таблицу, а человек использует более старый браузер. Затем вставьте команды "
удивительно - если вы хотите центр все в области тела-вы просто можете использовать стандарт
text-align: center;
команда css и в IE8 (по крайней мере) она будет центрировать все на странице, включая таблицы.
Это должно работать:
<div style="text-align:center;">
<table style="margin: 0 auto;">
<!-- table markup here. -->
</table>
</div>
Я только учусь этому, и то, что наконец сработало для меня, было сначала сделать таблицу с тремя строками. Установите маржу для левой и правой строк на 50%. Затем поместите одну строку, фиксированную таблицу ширины внутри " табличных данных "центра"табличной строки".
<style>
.abc {
text-align: center;
}
</style>
<table class="abc">
<tr>
<td>Item1</td>
<td>Item2</td>
</tr>
</table>