05 Html Table

Таблицы и табличная вёрстка #

Кстати глагол верстать применяется и к работе фронтендера, когда он с помощью HTML и CSS “делает страницу”.

За те 30 лет, что существует интернет и страницы и их вёрстка значительно и неоднократно менялись. Один из типов html-вёрстки называется табличной. И несмотря на то, что сейчас такая вёрстка не рекомендуется к использованию мы её рассмотрим.

И рассмотрим мы её(табличную вёрстку) не только в академических целях. До сих пор в вёрстке писем может использоваться табличная вёрстка и HTML4 стандарт. Миллионы компьютеров с Microsoft Outlook 2000 никуда не делись. А значит и нам надо понимать как это работает.

Пример таблицы в HTML:

<table>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

Результат работы

таблица в опере

таблица в опере

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

<table border = "1" cellPadding = "10" cellSpacing = "2" align="center"></code>

Результат:

таблица с бордером в опере

таблица с бордером в опере

А каждого тега могут быть атрибуты, которые влияют на его отображение. Мы использовали 4 из них: border, cellPadding, cellSpacing, align.

Border изменяет толщину рамки вокруг ячеек таблицу.

CellPadding отделяет текст внутри таблицы от края таблицы. Избавляет от налипания и помогает читаемости.

CellSpacing - расстояние между ячейками таблицы.

Align - выравнивает нашу таблицу по центру или краям.

Bgcolor - добавляет цвет фона в таблице. Добавьте самостоятельно bgcolor=“yellow” и посмотрите.

Дополнительные ссылки. #

  1. Доступные в HTML4 свойства таблицы