Создание и настройка таблиц в HTML

Информацию на сайте можно представлять различными способами: в виде картинок, текста или даже встроенного видео. Но порой бывает так, что нужна немного иная подача материала. Например, в виде сравнения марок автомобилей или сорта овощей. И в этом случае отличным решением будут таблицы. Администраторам сайта они помогают сделать наглядную информацию для своих пользователей, разместив все характеристики (или любые другие данные) по строчкам и столбцам. Поэтому пренебрегать знаниями о создании таблиц не следует.

Специально для обучающихся программированию, изучающих язык HTML, PHP, MySQL с нуля, а также для профи  создан крутой проект WebShake. Тут есть статьи, курсы, тесты, а также свой чат для веб-разработчиков, чтобы помочь в создании сайтов, оформлении контента, создании таблиц.

Таблицы в HTML создаются внутри открывающего и закрывающего тегов <table>… </table>. Они служат контейнером для последующей информации. Далее идёт создание строки с помощью тега <tr>, внутри которой нужно разместить ячейку таблицы посредством тега <td>. В принципе, для соблюдения минимальных требований этого вполне хватит. Но зачастую, таблицы содержат намного больше данных и функционал HTML вполне допускает расширение «границ». Чтобы создать дополнительные ячейки в строках, достаточно продублировать конструкцию <td>…</td> необходимое количество раз. Со строками аналогичная ситуация. Единственное, что нельзя делать – так это вкладывать строки друг в друга. Ниже представлен простой пример таблицы:<table>

<td>

<tr>…</tr>

<tr>…</tr>

<tr>…</tr>

</td>

</table>

Для более лёгкого запоминания табличных тегов можно обратиться к их банальному переводу. Так, тег <tr> переводится как «строка таблицы», от англ. «table row». Похожая ситуация и с <td>: он на русском звучит как «табличные данные», от англ. «table data».

Помимо создания таблицы, ей необходимо ввести семантическую структуру. Или, простыми словами, разбить её на логические блоки, по типу шапки, тела и подвала. Для пользователя и администратора это не принесёт никаких визуальных изменений. В конце концов, для этого всегда можно использовать CSS. А вот для поисковых роботов подобная вещь будет хорошим сигналом. Они будут понимать, какая часть таблицы несёт в себе важную или содержательную информацию.

Итак, чтобы указать в таблице эти семантические блоки, используются нижеприведённые теги:

• <thead>…</thead> — шапка таблица
• <tbody>…</tbody> — тело таблицы
• <tfoot>…</tfoot> — подвал таблицы

Надо знать, что все они только лишь внутри основного тега <table>. Также, помимо них, у администратора (или разработчика) сайта, есть возможность озаглавить первые ячейки таблицы. Для этого используется тег <th>. Он работает также, как и <td>, но его отличие в том, что он делает текст внутри себя более жирным и центрирует его по центру.

Более сложные таблицы, информация в которых размещается в нескольких ячейках сразу, невозможно создать без использования специальных атрибутов. Например, если необходимо объединить их по горизонтали, то в открывающем теге <td> (или в заголовочном <th>), следует прописать ключевое слово colspan с нужным значением. Таким образом, при объединении трёх ячеек по горизонтали, нужно в аргументе colspan прописать цифру три. Вот пример такой таблицы:

<table>

<tr>

<th>Value_1</th>

<th>Value_2</th>

<th>Value_3</th>

</tr>

<tr>

<td colspan=”3”>Value_4</td>

</tr>

</table>

Аналогичным образом дело обстоит с объединением ячеек по вертикали. Только там используется атрибут rowspan. Вообще, для лучшей наглядности, следует в открывающем теге <table> прописывать атрибут border, т.к. он создаст рамку вокруг самой таблицы и её ячеек. Это свойство поможет нагляднее оценить ход изменений.

При создании таблицы, с учётом всего вышесказанного, следует обратить внимание и на некоторые их особенности в HTML:

• Браузеры, как правило, имеют встроенные стили. Они касаются и таблиц. Из-за этого их размеры по умолчания высчитываются исходя из содержимого ячеек, а общая ширина вытекает из суммы содержимого всех ячеек.
• Если вдруг ширина таблицы превысит видимые границы, то текст просто перенесётся на новую строку. Единственное, что заставит появиться полосу прокрутки (чаще всего горизонтальную), так это вставка широкой картинки.
• Чтобы информация в таблице одинаково центрировалась во всех ячейках, с верхней и нижней частей добавляется пустое пространство.
• В таблицах реализована автоматическая возможность добавления пустого пространства сверху и снизу от содержимого ячеек. Сделано это для того, чтобы информация одинаково центрировалась по всей таблице, независимо от размера находящейся в ней информации.