Как равномерно распределить данные на две таблицы?

Question

[RimMirK]

Вот есть две таблицы, где вторая - это продолжение первой

код таблицы

<style>
	table {text-align:center;}
	table#_1 {float:left;}
	table#_2 {float:left; margin-left:10px;}
</style>

<table id='_1' cellpadding='5' border='1'>
	<caption><b>таблица</b></caption>
	<tr>
		<th>колонка 1</th>
		<th>колонка 2</th>
	</tr>
	<tr><td>test</td><td>test</td></tr>
	<tr><td>test</td><td>test</td></tr>
	<tr><td>test</td><td>test</td></tr>
</table>
<table id='_2' cellpadding='5' border='1'>
	<caption><b>та же самая таблица</b></caption>
	<tr>
		<th>колонка 1</th>
		<th>колонка 2</th>
	</tr>
	<tr><td>test</td><td>test</td></tr>
	<tr><td>test</td><td>test</td></tr>
</table>

Так-же есть БД из которой нужно помещать данные.

Как мне помещать в таблицы данные из БД, чтобы заполнялись поочередно,

вот-так

?

В общем, мне надо из БД:
сделать вот такой результат:

Придумал такой вариант: буду в первую таблицу помещать данные с четным id, а все остальные - во вторую. Но, думаю, это плохой вариант, к тому же, если какие-то данные из БД удалятся, тогда в таблице уже будут значения не по порядку.

Comments

[Ипатьев]

А при чем здесь id вообще? всегда можно добавить счетчик выводимых строк.
Но вообще, AFAIK, должно быть чисто CSS решение

[RimMirK]

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

[Ипатьев]

Все мы новички.
Что конкретно неясно? Как завести переменную и прибавлять к ней в цикле единичку?

Answer 1

[ThunderCat]

Так как суть и смысл задачи автор вопроса не пояснил, будем исходить из фразы я вообще максимально новичек в создании сайтов, ну и объяснять очевидные вещи на пальцах...

Самым очевидным решением будет не делать 2 таблицы, и вообще не использовать таблицы. 4 дива подряд (ну или 2 если рассматривать второй рисунок) замечательно решают задачу без дополнительных танцев с бубном. Отступы и бордер создают тот же вид за меньшие деньги.

Второй, менее удобный и более "странный" вариант - формировать 2 таблицы в цикле. Тут уже идут варианты извращений на любой вкус:
- Можно сделать 3 цикла - первый проходит по всему массиву, каждый четный элемент записывается в один массив, каждый нечетный в другой. Потом за 2 цикла выводятся таблицы, соответственно из первого и второго массива.
- Можно за один проход сразу формировать строки с готовым хтмл первой и второй таблицы, а в конце только вывести их.
Ну и прочие подварианты, не несущие какого-то нового смысла...

Comments

[RimMirK]

Во! Это то, что мне и надо было, Спасибо!

[toxa82]

Ох вы извращенцы. Одного цикла хватит. Берете половину данных и формируете одну таблицу, из второй половины формируете вторую таблицу. Количество записей должно быть у вас известно. Поделил на 2 и получил половину.

[ThunderCat]

toxa82, Если читать вопрос внимательно, то станет понятно что такое решение не подходит.

[toxa82]

Тогда css grid вам в помощь.