Почему rowspan схлопывает строки?

Question

[maksimwork1980]

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

Получается только так:

<div id="test">
		<table>
		<tr><td colspan="3"></td><td colspan="2" rowspan="2"></td></tr>
		<tr><td rowspan="3"></td><td colspan="2" rowspan="2"></td></tr>
		<tr><td colspan="2"></td></tr>
		<tr><td colspan="2"></td><td colspan="2"></td></tr>
		<tr><td colspan="5" rowspan="2"></td></tr>
		<tr></tr>
		</table>
	</div>

#test table {
	border-collapse: collapse;
}
#test tr {
	
}
#test td {
	font-size: 18px;
	font-family: "Roboto_Bold";
	border: 1px solid #000000;
	padding: 30px;
}

Comments

[Ankhena]

Посмотрите на эту строку.
Вы объединили 5(!) столбцов. Откуда там 5, если их всего 3?
И потом rowspan 2 = объединение со следующей строкой, которой нет вовсе.

Не нужно путать таблицу экселя с таблицей в HTML.
Смотрите только на рамки.

[maksimwork1980]

Ankhena,

Откуда там 5, если их всего 3?

По моей затеи в первой строчке занимают как 5 ячеек 2 ячейки - по 3 и по 2.
Я сейчас вручную попробовал добавить на самый верх строчку с пятью ячейками:

<div id="test">
    <table>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td colspan="3"></td><td colspan="2" rowspan="2"></td></tr>
    <tr><td rowspan="3"></td><td colspan="2" rowspan="2"></td></tr>
    <tr><td colspan="2"></td></tr>
    <tr><td colspan="2"></td><td colspan="2"></td></tr>
    <tr><td colspan="5" rowspan="2"></td></tr>
    <tr></tr>
    </table>
  </div>

результата не дало.

И потом rowspan 2 = объединение со следующей строкой, которой нет вовсе.

Я на данный момент поверхностно понимаю, как работают таблицы в HTML.
Я добавил вторую строчку в самый конец:
<tr></tr>

[Ankhena]

maksimwork1980,

Я добавил вторую строчку в самый конец:

Это ничего вам не даст.
Хотите, чтобы строка была в 2 раза выше остальных, задайте ей высоту в 2 раза больше остальных.

По моей затеи в первой строчке занимают как 5 ячеек 2 ячейки - по 3 и по 2.

Ваше затея прекрасна.
Но результат вы получите всё равно такой же как если бы их было 3, только лишнего кода понапишете.

Ещё раз: считайте количество по бордерам.
На картинке: 3 столбца и 5 строк.
Именно столько их должно быть и в разметке.

[Aetae]

В excel можно сохранять как html.

[maksimwork1980]

Ankhena, увидел 3 столбца, но к сожалению не помогло.
Aetae, так правда можно было?
Надо посмотреть, за счёт чего в Excel почти получилось (убрать бы лишние ячейки)

[maksimwork1980]

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

[Ankhena]

maksimwork1980, осталось найти 5 строк и правильно объединить ясейки.

[Ankhena]

maksimwork1980,

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

Вы табличные данные так размечаете или раскладку блоков делаете?
Если первое, то это действительно table. Если второе, то, в основном, гриды или флексы.

[maksimwork1980]

Ankhena, раскладку блоков так делаю. Я уже сделал на флекс боксах.

[Ankhena]

maksimwork1980, на флексах будут лишние обертки.

[Aetae]

maksimwork1980, чтоб не было лишних ячеек - не надо объединять линоие ячейки в excel, оставляй одну ячейку там где должна быть одна - размеры настроишь потом руками через css.

Answer 1

[Антон Шаманов]

пишешь как видишь, слева направо, сверху вниз. colspan - column т.е. вертикальный столбец, rowspan - row т.е. горизонтальная строка. твоя таблица показывает, что ты понял ровно ничего.

Comments

[maksimwork1980]

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