Заметка будет полезна тем, кто только учится делать сайты или хочет сделать сайт маленькой фирмы или друга лучше, а также начинающим front-end разработчикам.
Вроде табличка на сайте выглядит хорошо, но на телефоне появляются полосы прокрутки (уходит за экран) или картинка масштабируется до очень мелкого. И становится понятно, что использован не самый современный тег table.
Понятно почему им продолжают пользоваться, но хочется быть современным и выбрать инструмент, который бы давал всегда тот вид, который от него ждёшь. Самым популярным уже не первый год является Flexbox.
Но уже несколько лет говорят, что его вытеснит Grid. Я считаю, что этого не наступило только потому, что всё ещё есть люди (а сейчас начало 2020), которые пользуются Windows XP и смартфонами старше пяти лет (смартфоны старше 5 лет, а не люди), а с ними всё ещё считаются. Хотя Firefox 52 там зелёненький, а значит можно брать на вооружение.
Так чем же плох тег table
Уменьшим табличку:
Тут был применён код:
<table width="100%"> <tbody>
<tr>
<td width="25%" style="cursor: pointer;" onclick="openPLink('https://avtopartiya.com/Slesarnie_work')">
<p style="text-align: center;"><img src="//f.nodacdn.net/314421" /></p></td>
...
<tr valign="top">
<td style="width: 25%; cursor: pointer; " onclick="openPLink(https://avtopartiya.com/Slesarnie_work')">
<p style="text-align: center;">Слесарный ремонт <br /><b>от 390 руб</b></p>
</a></td>
...
Конечно для этого примера можно было загнать пачку ссылок <a> с картинка+текст в div типа <div style="width:100%; text-align:justify; text-justify: newspaper; text-align-last: justify;> и стало бы намного лучше, но таблицами делают и более сложные разметки и тогда всё всё равно поплывёт (будет, как эти два слова "всё" идущие подряд). Таким образом table подойдёт только для чего-то очень простого и не задуманного под адаптивность.
Плюсы и минусы Flexbox
Переделаем табличку во Flex:
Видно, что разная длина текста играет злую шутку, за то адаптивность полная.
Код ощутимо удобнее, меньше и логичнее:
<div style="display: inline-flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px;
align-items: baseline; ">
<div style="cursor: pointer; margin: 0 50px;" onclick="openPLink('https://avtopartiya.com/Slesarnie_work')">
<p style="text-align: center;"><img src="//f.nodacdn.net/314421" /></p>
<p style="text-align: center;">Слесарный ремонт <br /><b>от 390 руб</b></p>
</div>
...
Естественно стили удобнее прикручивать div-у контейнеру и div-у дочернему элементу.
Если сделать фиксированную ширину дочерних элементов, то это сделает разметку красивее, но определённо украдёт львиную долю "фич" самого flexbox layout. Так что работать с ним стоит как с одномерной моделью.
Плюсы и минусы Grid
Переделаем табличку в Grid:
Получилось то, что хотели.
Для этого примера кода совсем мало, но обычно его больше, чем с использованием Flex, но меньше, чем table.
<div style="display: grid;
grid-template-columns: repeat(auto-fill, 250px);
justify-content: space-between; ">
<div style="cursor: pointer;" onclick="openPLink('https://avtopartiya.com/Slesarnie_work')">
<p style="text-align: center;"><img src="//f.nodacdn.net/314421" /></p>
<p style="text-align: center;">Слесарный ремонт <br /><b>от 390 руб</b></p>
</div>
...
Учитывая ещё кучу возможностей для работы с фиксированной разметкой, то Grid - наилучший выбор. Рекомендую именно его, ведь всегда лучше с оптимизмом смотреть в будущее, чем пытаться угодить отстающим.