На днях я просматривал 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, спросите себя, подходите ли вы к нужному инструменту.