16 апреля 2009

Высота таблиц и центрирование контента

Тема по сути стара как мир, но, по моим наблюдениям, актуальности не теряет и новички все также продолжают делать ошибки.

Итак, первый вопрос о высоте таблиц.

Почему при установке DOCTYPE в начале документа не работает атрибут HEIGHT у таблицы?

<table height="100%">
<tr>
<td>
Таблица
</td>
</tr>
</table>

Проблема в том, что вообще в спецификации HTML нет атрибута height у таблицы. Т.е. его использование - это ошибка изначально.Так почему же это работает когда не указан DOCTYPE? Дело в том, что режим рендеринга страницы браузером определяется именно типом документа (DOCTYPE). Но когда DOCTYPE не указан браузер отрисовывает страницу в так называемом "quirks mode" не пытаясь соответствовать какому-то конкретному стандарту.

В режиме соответствия стандартам это работать не будет. Т.е. если у страницы указан полный DOCTYPE или если указан DOCTYPE XHTML, то браузер отрисовывает страницу в режиме соответствия стандартам, если же DOCTYPE отсутствует или же присутствует, но без URL его XML-описания, то отрисовка будет в режиме совместимости (quirks mode).


Так зачем мне указывать DOCTYPE?
Отвечу кратко - это гарантирует, или по крайней мере позволяет надеяться, что страница будет одинакого выглядеть в разных браузерах, а во-вторых - следование стандартам - это к тому же правило хорошего тона и в некоторых случаях может избавить вас от лишних проблем.


Так как же сделать, чтобы это работало?
Чтобы работал именно атрибут height - никак, а вот чтобы добиться того же результата нужно использовать CSS.


Для начала нужно задать CSS самого тела страницы:

html, body {
margin: 0px;
padding: 0px;
height: 100%;
border: none;
}

Для чего это нужно?
Дело в том, что таблица растягиваться на всю высоту элемента, в котором она содержится, т.е. в данном случае на высоту элемента BODY. Но он может не иметь высоту области отображения страницы в браузере, поэтому нам нужно задать высоту BODY принудительно.


Теперь создадим стиль для нашей таблицы:

#full_height_table {
height: 100%;
}

Ну а HTML должен быть таким:

<body>
<table id="full_height_table">
<tr>
<td>
Таблица
</td>
</tr>
</table>
</body>

Теперь у нас все замечательно работает и таблица имеет высоту в 100%.


Теперь второй вопрос.
Как в XHTML центрировать контент из блочных элементов?

Атрибут ALIGN="center" теперь нам не поможет. Чтобы центрировать блочный элемент по горизонтали нужно задать для него CSS со праметрами margin-left и margin-right.

#my_centered_div {
margin-left: auto;
margin-right: auto;
}

Центрированный элемент

Это касается блочных элементов, чтобы центрировать текст нужно использовать CSS text-align: center;


Чтобы центрировать по вертикали нужно использовать свойство CSS родительского элемента vertical-align, но это подойдет только для текста, для блочного элемента следует добавить свойство display: table-cell;. Однако в Internet Explorer это работать не будет. Приемы как сделать вертикальное центрирование блочного элемента в IE можно посмотреть тут.

#my_centered_div_container {
vertical-align: middle;
display: table-cell;
}

Центрированный элемент


Небольшое демо:

Блочный элемент

Свойства CSS (кликайте и смотрите результат выше):
margin-left: 0px; margin-right: auto;
margin-left: auto; margin-right: auto;
margin-left: auto; margin-right: 0px;



И в заключение

Старайтесь задавать все параметры внешнего вида через CSS и вынесите CSS в отдельный файл, не прописывайте стили внутри страницы. В дальнейшем это избавит вас от многих проблем, если вы захотите изменить внешний вид и поведение страницы.



Автор: Count Raven Amiant на 22:35
Теги: ,

9 комментариев:

  1. Иван Лисичка17 апреля 2009 г. в 15:44

    Полезная статья чувак! +5

    ОтветитьУдалить
  2. Count Raven Amiant17 апреля 2009 г. в 15:48

    Спасибо. Рад, что понравилось и пригодилось. =)

    ОтветитьУдалить
  3. Yura Zaripov17 апреля 2009 г. в 16:59

    А не проще вместо
    #my_centered_div {
    margin-left: auto;
    margin-right: auto;
    }
    Написать
    #my_centered_div {
    margin:0 auto;
    }
    ?

    ОтветитьУдалить
  4. Count Raven Amiant17 апреля 2009 г. в 17:17

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

    Просто в дальнейшем идет margin-left: 0; margin-right: auto; - по левой стороне, затем по правой.

    Возможно статья сыровата. Со временем обвешаю ее некоторыми дополнениями.

    Ваш вариант надо тоже добавить. Благодарю за замечание. =)

    ОтветитьУдалить
  5. Анонимный27 мая 2013 г. в 08:35

    Hi there mates, its wonderful article about cultureand fully explained, keep it up all the
    time.

    My weblog; Cheap Louis Vuitton Bags

    ОтветитьУдалить
  6. Анонимный9 июня 2013 г. в 13:43

    I constantly spent my half an hour to read this website's content daily along with a cup of coffee.

    Feel free to visit my site sac Guess

    ОтветитьУдалить
  7. Анонимный10 июня 2013 г. в 16:33

    Every weekend i used to visit this website, as i want enjoyment,
    since this this web site conations truly pleasant funny information too.


    Visit my website :: Air Max Femme (smu-fr.org)

    ОтветитьУдалить
  8. Анонимный13 июня 2013 г. в 01:32

    Do you have a spam issue on this site; I also am a blogger, and I was curious about your situation; many of us have created some nice practices
    and we are looking to swap strategies with others, be sure to shoot me an e-mail if interested.



    Feel free to visit my weblog ... Sac Louis Vuitton Pas Cher **

    ОтветитьУдалить
  9. Анонимный15 июня 2013 г. в 05:26

    Hi, I think your blog might be having browser compatibility issues.
    When I look at your website in Chrome, it looks fine but when opening in Internet
    Explorer, it has some overlapping. I just wanted to give you a quick heads up!
    Other then that, superb blog!

    My site Air Max Pas Cher

    ОтветитьУдалить

Подписаться на: Комментарии к сообщению (Atom)