Таблицы #
Так как таблица очень важный элемент 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” и посмотрите.
Специфические для таблицы атрибуты почти все устарели. Несмотря на это их очень широко используют до сих пор. Причин тому несколько.
- “HTML стерпит всё”. Многие страницы были сделаны 30 лет назад и никто их переделывать не собирается. Но отображать их надо. Потому поддержка старого кода порой очень необходима. Возможно нам придётся поддерживать такую страницу(надеюсь всё же что нет) и мы должны понимать, что именно мы делаем.
- Многим программистам уже много лет и именно они делали эти страницы 30 лет назад. Им тяжело запоминать новые вещи и проще сделать “и так сойдёт”.
- Самоучки пытаются учиться самостоятельно. А в интернете не все статьи написаны вчера. Некоторые реально устарели.
- За те 30 лет, что существует интернет и страницы, и их вёрстка значительно и неоднократно менялись. Один из типов html-вёрстки называется табличной. До сих пор в вёрстке писем может использоваться табличная вёрстка и HTML4 стандарт. Миллионы компьютеров с Microsoft Outlook 2000 никуда не делись. А значит и нам надо понимать как это работает.
И несмотря на то, что сейчас табличная вёрстка не рекомендуется к использованию - один раз можно сверстать страницу и на таблицах. Кстати глагол верстать применяется и к работе фронтендера, когда он с помощью HTML и CSS “делает страницу”.
В HTML5 все элементы, не только таблицу, рекомендуется раскрашивать в CSS.
Emmet code #
table>tr*5>td*15
Дополнительные ссылки. #
- Доступные в HTML4 свойства таблицы.
- Используемые в HTML5 элементы таблицы.
- Документация к элементам таблицы на developer.mozilla.org - элемент col и другие.