Как сверстать таблицу на сайте: подробное руководство

Содержание:

Опытные программисты говорят, что большинство начинающих разработчиков неправильно используют HTML-теги для создания таблиц. Многие не учитывают синтаксис или семантику. Это сказывается на понимании и правильном считывании их браузерами. Порой получается так, что таблица вроде есть, на одном браузере она транслируется оптимально такой, какая она на самом деле, на других же не видно границ, блоки сидят друг на друге.

Как сверстать таблицу на сайте: подробное руководство

Давайте узнаем вначале, какие теги используют для создания таблиц.

Теги, которые используют при верстке таблиц

HTML-язык позволяет использовать следующие теги, чтобы нарисовать таблицу:

  • <table> — этот символ нужен для обвертки таблицы;
  • <tr> — так обозначаются строка или ряд;
  • <td> — служит для обозначения ячейки;
  • <th> — это ячейка-заголовок;
  • <col> — если нужно прорисовать колонку, то именно этот тег поможет сверстать ее;
  • <colgroup> — этот тег обозначает колонки, уложенные в группы;
  • <thead> — символ, обозначающий верхний колонтитул таблицы;
  • <tbody> — основная часть таблицы. Если не имеет смысла группировать основное содержимое таблицы, то его новички часто не используют. Это неправильно. С помощью этого тега вы получаете больше контроля над таблицей внутри сайта.

В основном начинающими программистами для верстки HTML-таблиц используются первые три тега. Первый считается контейнером для таблицы, а второй и третий вырисовывают структуру.

Семантические теги нужны для передачи смысла и важности находящегося в них контента. Поэтому опытные программисты говорят, что правильная семантическая верстка позволяет:

  • поисковым роботам лучше понимать контент на сайте и предоставлять пользователям, поднимая аккуратный сайт в поисковых системах на первые строки;
  • браузерам и помощникам для пользователей с ограниченными возможностями лучше понимать контент и транслировать его в правильной форме.

Поэтому так важно разработчику правильно использовать семантическое ядро.

Как сверстать таблицу на сайте: подробное руководство

Как работать с таблицами

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

  • сolspan — для объединения столбцов;
  • rawspan — для объединения строк.

Если вы начинающий программист, то в этих обозначениях легко запутаться. Так, например, многие не понимают, что первый атрибут указывает на количество столбцов, пересекающих строки.

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

Как сверстать таблицу на сайте: подробное руководство

На рисунке вы видите не только растянутую вторую строку, но и третий столбец. Теперь посмотрим на код, благодаря которому получилась таблица.

Как сверстать таблицу на сайте: подробное руководство

Вы видите, что ячейки для первой и третьей строк не заданы. Это и не нужно, потому что они поглощаются атрибутами. Вот так работают атрибуты вместе с тегами. Правильная семантика дает возможность конфигурировать любую таблицу в любом направлении.

Не забывайте про такие атрибуты, как:

  • width;
  • length;
  • border;
  • line.

Выравнивание производится с помощью тегов «text-align». Если нужен заголовок для таблицы, то указывайте тег «caption».

Тег тела таблицы, или «tbody», также важен для поисковых роботов. Они понимают, где находится основная информация в таблице, только благодаря ему. «tfoot» размещается после тега тела таблицы. Таким образом, предотвращается проблема с доступностью.

Теперь поговорим об информационном шуме. Если вы задались вопросом, как писать чистый код не только в CSS-верстке, посетите IT-блог от DevEducation и узнайте много интересного о написании кода для сайтов.

Что нужно, чтобы очистить содержимое

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

Например, посмотрите на рисунок.

Как сверстать таблицу на сайте: подробное руководство

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

Как сверстать таблицу на сайте: подробное руководство

Оставляйте только белый фон. Не старайтесь закрашивать ячейки в красные, синие, зеленые тона. Не делайте их разноцветными. Старайтесь выравнивать содержимое по центру. Убирайте разлинковку, курсивный шрифт и другое оформление, которое, по-вашему, кажется красивым. Старайтесь избегать различных двойных рамок.

Какие ошибки допускают новички-разработчики

Многие новички прописывают вместо заголовка для таблицы, который обозначается тегом «caption», h3. Это неправильное написание, и поисковый робот его не поймет. Да и таблица у вас будет выглядеть совершенно иначе.

Наличие заголовка обязательно в правильном семантическом исполнении. Так как он влияет на оптимизацию сайта, которую любят поисковые роботы. А речевой браузер, прочитывая информацию из заголовка, меняет тон и тембр голоса. Это необходимо для тех, кто не имеет возможности прочитать глазами, что написано на сайте.

Бывает так, что новички неправильно задают классы. Например, начинают писать код класса с цифры или дефиса. Правильно написанный класс выглядит так:

  • .shopping-cart-block;
  • .social-icon.

Многие не заключают теги таблицы в скобки или прописывают информацию, касающуюся длины и ширины ячейки, после того, как откроют и закроют тег столбцов или строк.

Заключение

Прочтя это руководство, многие новички станут больше обращать внимание на код, который они пишут, и не будут допускать серьезные ошибки. Если же вы только начали путь верстальщика, пройдите полные IT-курсы от DevEducation. Они откроют вам вход в новый и красивый мир по верстке веб-сайта. Он намного интереснее, чем просто прописывание скелета проекта в HTML.

Присоединяйся к DevEducation — стань востребованным специалистом и построй карьеру в IT!