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

96

Я хочу показати таблицю фіксованої ширини в центрі вікна браузера. Зараз я використовую

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

Але Visual Studio 2008 дає попередження за цим рядком:

Атрибут "вирівнювання" вважається застарілим. Рекомендується новіша конструкція.

Який стиль CSS я повинен застосувати до таблиці, щоб отримати однаковий макет?

— Олександр Прокоф’єв
джерело

2

Отже, яке рішення ви врешті вибрали?

— Ола Тувессон,

183

Теоретично Стівен має рацію :

"правильний" спосіб центрування таблиці за допомогою 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>

— VonC
джерело

Ви можете привести таблицю в центр із запасом: 0 авто; в IE6 і вище, якщо ви переконаєтесь, що ваша сторінка має дійсну декларацію типу документа.

— Ола Тувессон,

@Marco: Зараз у мене немає цієї інформації, але це може бути гарною основою для запитання про StackOverflow.

— VonC

1

ви цілком праві. ТАБЛИЦІ не потрібно вказувати ширину, щоб отримати горизонтальне центрування. Я тестував це. Хоча для DIV потрібна ширина, яку потрібно вказати, щоб отримати горизонтальне центрування.

— Марко Демайо

17

Спробуйте це:

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

— Джалберт
джерело

2

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

— Ола Тувессон
джерело

2

Хоча це може бути єресь у сучасному світі - раніше ви робили наступний код без css. Це працює у всьому, включаючи сучасні браузери, але - як я вже сказав - це є єресь у сучасному світі:

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

Що вам потрібно, це якимось чином сказати, що ви хочете відцентрувати таблицю, і людина використовує старіший браузер. Потім вставте команди "<center>" навколо таблиці. В іншому випадку - використовуйте css.

Дивно - якщо ви хочете відцентрувати все в області ТІЛА - ви просто можете скористатися стандартом

text-align: center;

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

— Марк Меннінг
джерело

0

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

В основному, це працює так,

<table align="center">
...

Але ви можете зробити це кращим чином, використовуючи CSS, і це буде кращий підхід до використання CSS, оскільки він забезпечує динамічну поведінку веб-сторінки та реагує.

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

Крім того, якщо вам потрібно відобразити лише таблицю на сторінці, ви можете перейти до вирівнювання тегів тіла, як показано нижче,

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

Якщо вам потрібні інші пропозиції, будь ласка, повідомте мене. Напевно допоможе вам у цьому. Крім того, за допомогою функцій завантаження це було б простіше та інтерактивніше.

— Гурав Гутам
джерело

0

Додайте до стилю div:

width: fit-content;

— Халед Мохав
джерело