На днях я просматривал HTML-код со студентом, когда мы наткнулись на ‹table›.

Он отображает данные с информацией о бронировании в ресторане. В первом столбце содержались названия бронирования. Во втором столбце указано время бронирования.

Выглядело это так:

«Ого, я не могу поверить, что этот код на самом деле использует таблицу. Что это, 90-е? » - мой студент

Еще в 90-е столы были в моде. Разработчики будут использовать таблицы в своем HTML-коде для форматирования нетабличного содержимого.

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

Итак, мой студент начал мозговой штурм, как он мог бы «правильно» закодировать эту информацию о бронировании.

«Я знаю - мы будем использовать списки».

"OK." Я сказал. «Значит, вы бы использовали два списка? Один на имя, а другой на время? "

"Да. И я воспользуюсь CSS, чтобы придать ему вид таблицы ».

Его отвращение к таблицам и к тому, как ими злоупотребляли в прошлом, заставило его вместо этого злоупотреблять другим элементом HTML.

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

Зачем нужны таблицы? Для чего они?

Согласно документации Mozilla Developer Network, таблицы представляют собой табличные данные.

Мне нравится думать о табличных данных как о данных, которые связаны между собой. Была ли связь между каждым бронированием? Да, каждое время бронирования было связано с определенным именем.

Использование таблиц для представления табличных данных совершенно уместно и семантично. CSS-фреймворки, такие как Bootstrap, даже поддерживают стилизованные таблицы. Таблицы предназначены для использования!

Так откуда же взялась эта ненависть?

Раньше таблицы использовались для форматирования и разметки. Взгляните на этот пример (или просмотрите его в интерактивном режиме на Codepen):

<table align=”center”>
  <tbody>
    <tr><td>Welcome to this email</td></tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.    Vestibulum aliquet velit at lectus sodales, sit amet consequat odio eleifend. Fusce accumsan sed eros convallis imperdiet. Donec at dignissim nibh. 
      </td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet velit at lectus sodales, sit amet consequat odio eleifend. Fusce accumsan sed eros convallis imperdiet. Donec at dignissim nibh. 
      </td>
    </tr>
  </tbody>
</table>
<table align=”center”>
  <tr><td>Thank you for reading this email</td></tr>
</table>

Эти 3 таблицы создали для нас этот макет из двух столбцов.

Благодаря современным достижениям в CSS нам больше не нужно использовать таблицы в качестве уловки для макета страницы. Взгляните на этот переписанный пример с использованием CSS, который создает тот же макет из двух столбцов (см. Codepen):

// html file
<header>
  Welcome to this email
</header>
<div>
  <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet velit at lectus sodales, sit amet consequat odio eleifend. Fusce accumsan sed eros convallis imperdiet. Donec at dignissim nibh.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet velit at lectus sodales, sit amet consequat odio eleifend. Fusce accumsan sed eros convallis imperdiet. Donec at dignissim nibh. 
  </p>
</div>
<footer>
 Thank you for reading this email
</footer>
// css file
header,
footer {
  text-align: center;
}
div {
  display: flex;
}

Макеты таблиц никуда не денутся

Когда вы смотрите на этот код, используя таблицы для разметки, ваш желудок может перевернуться. Но эта техника никуда не делась в ближайшее время.

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

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

Изучите свой HTML

Я советую понять, какие инструменты вам доступны. Самое главное, используйте правильный инструмент для работы. Конечно, вы можете использовать молоток, чтобы вбить шуруп в стену. Но разве отвертка не подойдет лучше?

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

Вы когда-нибудь задумывались о том, чтобы узнать об элементах HTML помимо старых резервных: ‹div›, ‹span›, ‹h1› и ‹p›?

Например, есть элемент ‹dl›, который может пригодиться при написании глоссария.

Тогда есть элемент ‹time›. Это позволит браузерам планировать события в календаре вашего пользователя.

Вы собирались использовать элемент ‹b›, чтобы сделать что-то важным, выделив его жирным шрифтом? Рассмотрите возможность использования элемента ‹strong› вместо. Программы чтения с экрана не передают пользователям стиль. Но они передали бы семантическое значение элемента ‹strong›.

Вы импортируете библиотеку, чтобы на экране появилась палитра цветов или календарь? Рассмотрите возможность использования ‹input type =” color ”/› или ‹input type =” date ”›, чтобы использовать то, что дает вам браузер.

Найдите минутку, чтобы ознакомиться с некоторыми доступными вам элементами HTML.

И в следующий раз, когда вы будете работать с HTML, спросите себя, подходите ли вы к нужному инструменту.