Как выровнять таблицу?

Question

[Gerich4444]

Здравствуйте. Нубский вопрос. почему таблица выглядит криво и как это исправить?

<table> 
<tbody> 
<tr> 
<td><figure style="text-align: center" rel="width: 300px; height: auto;"><img src="/wa-data/public/shop/img/frame-19.png" style="width: 300px; height: auto;" width="313" height="390"><figcaption>Юрий Рыбянцев -мастер спорта по паверлифтингу</figcaption></figure></td> 
<td><figure style="text-align: center" rel="width: 300px; height: auto;"><img src="/wa-data/public/shop/img/frame-18.png" style="width: 300px; height: auto;" width="304" height="379"><figcaption>Иван Середа - тренер по фитнесу</figcaption></figure></td>
<td><figure style="text-align: center" rel="width: 300px; height: auto;"><img src="/wa-data/public/shop/img/frame-13.png" style="width: 300px; height: auto;" width="304" height="379"><figcaption>Вероника Маслова - призерка чемпионата Европы</figcaption></figure></td> 
<td><figure style="text-align: center" rel="width: 300px; height: auto;"><img src="/wa-data/public/shop/img/frame-11.png" style="width: 300px; height: auto;" width="300" height="374"><figcaption>Виктор Суханов - тренер по фитнесу и бодибилдингу</figcaption></figure></td> 
</tr> 

</tbody> 
</table>


<table> 
<tbody>
<tr> 
<td><figure style="text-align: center" rel="width: 300px; height: auto;"><img src="/wa-data/public/shop/img/frame-12.png" style="width: 300px; height: auto;" width="301" height="375"><figcaption>Иван Зарубин - призер чемпионата Европы по паверлифтингу	</figcaption></figure></td> 
<td><figure style="text-align: center" rel="width: 300px; height: auto;"><img src="/wa-data/public/shop/img/frame-14.png" style="width: 300px; height: auto;" width="304" height="380"><figcaption>Любовь Онищенко - фитнес тренер</figcaption></figure></td>
<td><figure style="text-align: center" rel="width: 300px; height: auto;"><img src="/wa-data/public/shop/img/frame-15.png" style="width: 300px; height: auto;" width="333" height="415"><figcaption>Григорий Старцев - тренер по паверлифтингу</figcaption></figure></td> 
<td><figure style="text-align: center" rel="width: 300px; height: auto;"><img src="/wa-data/public/shop/img/frame-17.png" style="width: 300px; height: auto;" width="323" height="403"><figcaption>Иван Калмыков - призер чемпионата Украины по паверлифтингу</figcaption></figure></td>
</tr>
</tbody> 
</table>

Answer 1

[Александр Васильев]

Здравствуйте.
Во-первых, уберите все отсюда (1)
Во-вторых уберите все отсюда (2)



Посмотрите, что получится.

Почитайте про атрибуты тегов https://www.google.com/search?q=%D0%B0%D1%82%D1%80...

Comments

[Gerich4444]

Спасибо, а как избежать проблем при смене разрешения? Из-за текста все сползает


Как сделать, чтоб таблица стала адаптивной?

[Александр Васильев]

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

Рекомендую прислушаться к мнению куратора тега - он ниже написал.

[Spaceoddity]

td{
vertical-align: top;
}
figcaption{
word-wrap: break-word;
}

Answer 2

[Danny Arty]

Ну во-первых, зачем вам две таблицы, если можно обойтись одной?
Во-вторых, это можно легко сделать на флексах (оригиналы картинок разного размера):

Comments

[Gerich4444]

Спасибо, как вариант!

[Gerich4444]

А как сделать это дело адаптивным?

[Danny Arty]

Gerich4444, пишите медиа запросы - гугл в помощь, так как я не знаю какой у вас макет

[Spaceoddity]

Gerich4444,

@media (max-width: 480px) {
.gallery {
 flex-flow: column nowrap;
}
.gallery-item {
  width: 100%;
}
}

Answer 3

[Span4ev]

Это вам в фотошоп, а затем уже сюда. Нормальная практика - подгонять разные размеры изображений под один шаблон. Ну вот как вы себе это представляете? Если их выровнять и чтобы это было красиво, то те, что меньше по высоте станут растянутыми по вертикали, те, что уже - станут растянутыми по ширине. Одни будут располагать выше, другие ниже.
Это всё не выход, тут пока рано говорить про grid. (полагаю, вы ещё не изучали css grid). Тут если их скейлить или обрезать средствами css, то это будет смотреть ужасно.

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

Comments

[Gerich4444]

Фотографии в одинаковом размере

[Одиночка Айс]

Gerich4444, 300, 301, 304 и т.д. это одинаковый размер?

[Span4ev]

Gerich4444, может я чего-то не понимаю?

width="313" height="390">
width="304" height="379">
width="304" height="379">
width="300" height="374">


width="301" height="375"><figcaption>Иван Зарубин - призер чемпионата Европы по паверлифтингу
width="304" height="380"><figcaption>Любовь Онищенко - фитнес тренер
width="333" height="415"><figcaption>Григорий Старцев - тренер по паверлифтингу
width="323" height="403"><figcaption>Иван Калмыков -

[Gerich4444]

Одиночка Айс, фото в одинаковом размере.

[Gerich4444]

Span4ev, фото в одинаковом размере.

[Одиночка Айс]

Gerich4444, да понятно, что проблема не в тебе

Answer 4

[bondarenkoIlya]

Сделать флексами