Неочевидности XHTML [Знаю как

Содержание

Предмет
100% высоты
Центровка таблицы

Предмет

Решил снова обратить свой взор на XHTML. Как-то мало ему придается значения и мало на него обращается внимания, ровно как не заметно его активное применение на полях. А ведь, граждане, это de facto стандарт, который существует еще с 2000 года и, вроде как, основной эшелон интернет браузеров его давно должен поддерживать, более того, уже, судя по всему, даже поддержка XHTML2 появилась, а мы все из эпохи ха-тэ-мэ-эль выйти не можем. Стыдно, граждане. Стандарты надо уважать!

Ну, дык, вот. Оказалось, что XHTML не на столько очевиден, как это кажется на первый взгляд. В стандарте, конечно, описано все, но порой это «все» подано в таком виде, что сразу-то и не поймешь в чем дело и как это должно работать, если вообще должно работать в принципе. Вот эти-то неочевидности пред очи я и решил поставить.

100% высоты

Порой хочется отцентрировать некий объект, текст там или картинку, или еще что-нибудь, не только по горизонтали, но и по вертикали, так, чтобы оно располагалось по центру окна браузера, или сделать еще более сложную композицию с пропорциональным расположением объектов, как, например, сделано на моей титульной странице В обычном HTML это делалось просто — явным объявлением 100% высоты и 100% ширины у основной таблицы, которая обрамляла все позиционируемые объекты внутри ее. В XHTML это, на первый взгляд, перестало работать, вернее перестала работать установка 100% высоты, ширина выставляется без проблем.

В чем дело? Браузеры не умеют обрабатывать установку высоты таблицы средствами CSS, как это требует стандарт XHTML? А вот и нет! Они-то как раз это делают в точном соответствии со стандартом и именно поэтому, как это ни странно звучит, получается такой эффект. Дело вот в чем. Стандарт гласит, что размеры объекта вычисляются относительно объекта его обрамляющего. Поверх же таблицы существуют еще два объекта body и html высоту которых никто не определял, кроме программистов писавших код самого браузера, которые, определили их высоту минимально возможной по умолчанию. Вот и выходит, что браузер отображает все правильно, но стопроцентная высота таблицы оказывается меньше нами ожидаемой.

Что делать? Ответ напрашивается сам собой — установить 100% высоту у body и html. Вот пример простейшего XHTML кода, который можно также посмотреть в действии.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
  <head>
    <title>центровка</title>
    <style t ype="text/css">
      body { height: 100%; margin: 0 0 0 0; }
      html { height: 100%; margin: 0 0 0 0; }
      table.main {
        height: 100%; width: 100%;
        border: 5px solid green;
        vertical-align: middle; text-align: center; }
    </style>
  </head>
  <body>
    <table class="main">
      <tr>
        <td>ЦЕНТР</td>
      </tr>
    </table>
  </body>
</html>

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

Проблема обычно сразу следующая за предыдущей. Хочется вставить таблицу в таблицу, да так, чтобы вставленная была отцентрирована относительно ячейки обрамляющей таблицы. Отцентрировать по вертикали не составляет труда, а вот с горизонтальной центровкой выходит проблема - выясняется, что классические приемы центровки объектов определенные в XHTML и CSS для горизонтальной центровки таблиц не годятся, при этом стандарт, на первый взгляд, не содержит необходимых инструментов для центровки именно таблиц.

На самом деле это не так. Такой инструмент присутствует, но не очевиден. Стандарт гласит, что браузер должен отцентрировать таблицу если левый и правый отступы равны. Наиболее простой способ этого добиться - установить атрибуты margin-left и margin-right в значение auto. Вот завершенный пример XHTML кода, который можно также посмотреть в действии.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
  <head>
    <title>центровка</title>
    <style type="text/css">
      body { height: 100%; margin: 0 0 0 0; }
      html { height: 100%; margin: 0 0 0 0; }
      table.main {
        height: 100%; width: 100%;
        border: 5px solid green;
        vertical-align: middle; text-align: center; }
      table.centered {
        margin-left: auto; margin-right: auto;
        height: 200px; width: 300px;
        border: 3px solid blue; }
    </style>
  </head>
  <body>
    <table class="main">
      <tr>
        <td>
          <table class="centered">
            <tr>
              <td>ЦЕНТР</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>