Таблицы #

Так как таблица очень важный элемент HTML, мы должны знать его особенности досконально. Ведь в конце концов важная информация в интернете даётся часто в табличном виде. Сравнение доходов слоёв населения, список школ города, посещаемость учеников и тд и тп.

Пример таблицы в 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>

Результат:

В элементе HTML “table” могут быть вложены следующие элементы:

• tr
• th
• td
• thead
• tbody
• tfoot
• caption
• colgroup
• col

Семантически очень важно выделять заголовки и футеры таблицы. Такие вещи очень важны для читалок.

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

• Border изменяет толщину рамки вокруг ячеек таблицу.
• CellPadding отделяет текст внутри таблицы от края таблицы. Избавляет от налипания и помогает читаемости.
• CellSpacing - расстояние между ячейками таблицы.
• Align - выравнивает нашу таблицу по центру или краям.
• Bgcolor - добавляет цвет фона в таблице. Добавьте самостоятельно bgcolor=“yellow” и посмотрите.

Специфические для таблицы атрибуты почти все устарели. Несмотря на это их очень широко используют до сих пор. Причин тому несколько.

1. “HTML стерпит всё”. Многие страницы были сделаны 30 лет назад и никто их переделывать не собирается. Но отображать их надо. Потому поддержка старого кода порой очень необходима. Возможно нам придётся поддерживать такую страницу(надеюсь всё же что нет) и мы должны понимать, что именно мы делаем.
2. Многим программистам уже много лет и именно они делали эти страницы 30 лет назад. Им тяжело запоминать новые вещи и проще сделать “и так сойдёт”.
3. Самоучки пытаются учиться самостоятельно. А в интернете не все статьи написаны вчера. Некоторые реально устарели.
4. За те 30 лет, что существует интернет и страницы, и их вёрстка значительно и неоднократно менялись. Один из типов html-вёрстки называется табличной. До сих пор в вёрстке писем может использоваться табличная вёрстка и HTML4 стандарт. Миллионы компьютеров с Microsoft Outlook 2000 никуда не делись. А значит и нам надо понимать как это работает.

И несмотря на то, что сейчас табличная вёрстка не рекомендуется к использованию - один раз можно сверстать страницу и на таблицах. Кстати глагол верстать применяется и к работе фронтендера, когда он с помощью HTML и CSS “делает страницу”.

В HTML5 все элементы, не только таблицу, рекомендуется раскрашивать в CSS.

Emmet code #

table>tr*5>td*15

Подробнее о Emmet code

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

1. Доступные в HTML4 свойства таблицы.
2. Используемые в HTML5 элементы таблицы.
3. Документация к элементам таблицы на developer.mozilla.org - элемент col и другие.