Как оформить таблицу, которая читает данные из mysql?

Question

opsimecom @opsimecom

Как оформить таблицу, которая читает данные из mysql?

Подскажите как оформить правильно, есть таблица которая читает данные из базы данных и отображает их на сайте.
Но я не понимаю как оформить эту таблица которая циклична и при добавления в бд данных она увеличивается, нужно чтобы она не просто вертикально шла постоянно, а в квадратные столбцы каждый запрос
У меня вот так...

нужно плюс минус такое структурирование чтобы таблица создавалась горизонтально и после вертикально.

вот код

<table border = '1' width ='80%' align = 'center'> <caption>Products Database</caption>
    <tr>
      <th>Номер</th>
      <th>Название оффера</th>
      <th>Гео</th>
       <th>Описание</th>
      <th>Соц сеть</th>
      <th>Креотив</th>
      
    </tr>

  <?php
  
  
  while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
      echo '<tr>';
      echo '<td>' . $row['product_id'] . '</td>';
      echo '<td>' . $row['product_name'] . '</td>';
      echo '<td>' . $row['price'] . '</td>';
       echo '<td>' . $row['opis'] . '</td>';
        echo '<td>' . $row['socs'] . '</td>';
      echo '<td>' .
      '<img src = "data:image/png;base64,' . base64_encode($row['product_image']) . '" width = "250px" height = "250px"/>'
      . '</td>';
      echo '</tr>';
  }
  ?>

  </table>

Вопрос задан более трёх лет назад
183 просмотра

1 комментарий

Подписаться 1 Простой 1 комментарий

Пригласить эксперта

Ответы на вопрос 2

Комментировать

6 комментариев

opsimecom @opsimecom Автор вопроса

добавил

заменил код на ваш но выходит вот что

Написано более трёх лет назад

Олег @lolzqq

opsimecom, надо bootstrap подключить в тэг head в начале страницы
Вот это добавьте

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

в <head>

Написано более трёх лет назад

opsimecom @opsimecom Автор вопроса

Олег, тоже самое, не работает почему то....

вот полный код

<html>
    <head>
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    </head>
  <title>Лучшие креативы L</title>

  <body>

  <?php

  require_once 'config.php';

  $sql = "SELECT * FROM products";
  $stmt = $pdo->prepare($sql);
  $stmt->execute();
  ?>
  <table border = '1'>
  <?php
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
      echo '<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">';
      echo '<div>' . $row['product_id'] . '</div>';
      echo '<div>' . $row['product_name'] . '</div>';
      echo '<div>' . $row['price'] . '</div>';
       echo '<div>' . $row['opis'] . '</div>';
        echo '<div>' . $row['socs'] . '</div>';
      echo '<div>' .
      '<img src = "data:image/png;base64,' . base64_encode($row['product_image']) . '" width = "250px" height = "250px"/>'
      . '</div>';
      echo '</div>';
  
  }
  ?>
</table>
  
  </body>
</html>

Написано более трёх лет назад

Олег @lolzqq

opsimecom, попробуйте (код страницы целиком)

<!doctype html>
<html lang="ru">
	<head>
	  <meta charset="utf-8" />
	  <meta name="viewport" content="width=device-width">
	  <title></title>
	  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
	</head>
<?php
	require_once 'config.php';

	$sql = "SELECT * FROM products";
	$stmt = $pdo->prepare($sql);
	$stmt->execute();
?>
	<body>
	  <div class="container-fluid">
		  <div class="row">
			<?php
			while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
				  echo '<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">';
				  echo '<div>' . $row['product_id'] . '</div>';
				  echo '<div>' . $row['product_name'] . '</div>';
				  echo '<div>' . $row['price'] . '</div>';
				   echo '<div>' . $row['opis'] . '</div>';
					echo '<div>' . $row['socs'] . '</div>';
				  echo '<div>' .
				  '<img src = "data:image/png;base64,' . base64_encode($row['product_image']) . '" width = "250px" height = "250px"/>'
				  . '</div>';
				  echo '</div>';
			  
			}
			?>
		  </div>
		</div>
	</body>
</html>

Написано более трёх лет назад

opsimecom @opsimecom Автор вопроса

Олег, ДА!!! Классно получилось то что нужно Спасибо огромное) И еще вопрос подскажите как оформить столбцы с помощью css или бутстрапа ?

Написано более трёх лет назад
Олег @lolzqq
opsimecom,
Общие правила разметки bootstrap: https://bootstrap-4.ru/docs/5.0/layout/containers/
Разметка адаптивных блоков по ширине: https://bootstrap-4.ru/docs/5.0/layout/columns/
Вкратце:
1. Берем кусок экрана, в котором хотим поместить горизонтальный блок данных. Создаём для него тэг
<div class="container">...</div>
2. Если мы хотим располагать внутри этого блока маленькие адаптивные блоки в ряд, а не в колонну, то вставляем внутрь тэг
<div class="row">...</div>
3. Далее вставляем внутрь получившейся конструкции маленькие адаптивные блоки, их может быть 1, а может быть несколько
<div class="col-sm-12 col-md-6 ..."></div>
Здесь:
- col - обозначает что блок будет являться колонкой и расти только по вертикали
- sm/md/lg/xl/xxl - обозначает размер экрана просмотра (sm = 540px, md = 720px , и т.д. подробнее тут)
- цифры от 1 до 12 обозначают, сколько частей от ширины родительского блока займёт наша колонка

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

В результате получится конструкция

<div class="container"> <div class="row"> <div class="col-sm-12 col-md-6 ...">Текст первой колонки</div> <div class="col-sm-12 col-md-6 ...">Текст второй колонки</div> <div class="col-sm-12 col-md-6 ...">Текст третьей колонки</div> </div> </div>

Тот вариант, что скинул раньше её и создаёт.
Далее вы можете переделать тот макет вывода данных, скомпоновав нужные вам div, как заблагорассудится.

<div class="container"> <div class="row"> <div class="col-sm-12 col-md-6 ..."> <div class="col-12">Текст первой колонки <div class="col-sm-12 col-md-6 ...">Текст второй колонки</div> <div class="col-sm-12 col-md-6 ...">Текст третьей колонки</div> </div> </div> </div> </div>

Тут уже в первую колонку вложены вторая и третья.

Переписывать всю документацию Bootstrap не вижу смысла, почитайте, попробуйте повкладывать одни div в другие div, там не сложно.

4. Отступы до текста внутри блока называются padding - смотрите тут https://bootstrap-4.ru/docs/5.0/layout/gutters/
5. Отступы между блоками называются margin - смотрите тут https://bootstrap-4.ru/docs/5.0/utilities/spacing/

Касательно отображения цвета ваших кнопочек - в нужные вам колонки добавьте аттрибут style="background: ваш_цвет;" вместо ваш_цвет берёте цвет из палитры (https://colorscheme.ru/ например) он обозначается, как #FF7F00 (это пример рыжего цвета)
Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

CSS

Простой
Как сделать это меню в 2 ряда, а не чтобы всё вываливалось?
- 1 подписчик
- 58 минут назад
- 22 просмотра
0

ответов
PHP

Простой
Почему не применяются настройки xdebug.ini после изменения?
- 1 подписчик
- час назад
- 22 просмотра
0

ответов
PHP

+1 ещё

Простой
Как получить публичную ссылку на изображение с чата Телеграм?
- 1 подписчик
- час назад
- 29 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- 2 часа назад
- 74 просмотра
1

ответ
PHP

+1 ещё

Простой
Почему перестали отображаться новости на детальной странице новостей?
- 1 подписчик
- 3 часа назад
- 36 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- 3 часа назад
- 30 просмотров
1

ответ
HTML

+1 ещё

Простой
Как Выделить слово приходящая из базы определенным цветом?
- 1 подписчик
- 4 часа назад
- 106 просмотров
0

ответов
PHP

Простой
Почему ломается передача по ссылке в foreach с указанием оператора опциональной последовательности для массива?
- 1 подписчик
- 4 часа назад
- 54 просмотра
1

ответ
PHP

+1 ещё

Простой
Почему ошибка 502 после миграции с PHP 8.2 на PHP 8.3?
- 1 подписчик
- 6 часов назад
- 99 просмотров
2

ответа
JavaScript

+1 ещё

Средний
Как сделать так, чтобы клик по object передавался родителю?
- 1 подписчик
- 7 часов назад
- 94 просмотра
2

ответа
Показать ещё Загружается…

PHP Developer

YCLIENTS • Москва

от 200 000 до 350 000 ₽

PHP разработчик

Ведисофт • Екатеринбург

от 25 000 ₽

Midlle PHP developer (backend)

ИТЦ Аусферр • Магнитогорск

от 100 000 до 160 000 ₽

Перенести сайт на Друпал на новый хостинг

25 апр. 2024, в 15:51

3000 руб./за проект

Разработка игры нарды

25 апр. 2024, в 15:31

70000 руб./за проект

Верстка мобильной версии на SvelteKit [FIGMA]

25 апр. 2024, в 15:26

15000 руб./за проект

Это не table вовсе.

А список, ul, каждый продукт это li. Вместо td используйте подходящие семантические теги.
Дальше на CSS стилизуйте как хотите.

Answer 1 · 2021-02-16 11:56:30

Вам не таблица нужна а сетка, она же grid. Возьмите какой-нибудь CSS-фреймворк и будет вам счастье. Хоть тотже Bootstrap

Answer 2 · 2021-02-16 12:00:21

Попробуйте переписать это для bootstrap
https://getbootstrap.com/docs/5.0/getting-started/...

Это вам так понимаю не нужно:

<table border = '1' width ='80%' align = 'center'> <caption>Products Database</caption>
    <tr>
      <th>Номер</th>
      <th>Название оффера</th>
      <th>Гео</th>
       <th>Описание</th>
      <th>Соц сеть</th>
      <th>Креотив</th>
      
    </tr>

А вот это вывод информации из БД на страницу

while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
      echo '<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">';
      echo '<div>' . $row['product_id'] . '</div>';
      echo '<div>' . $row['product_name'] . '</div>';
      echo '<div>' . $row['price'] . '</div>';
       echo '<div>' . $row['opis'] . '</div>';
        echo '<div>' . $row['socs'] . '</div>';
      echo '<div>' .
      '<img src = "data:image/png;base64,' . base64_encode($row['product_image']) . '" width = "250px" height = "250px"/>'
      . '</div>';
      echo '</div>';
  }

На больших экранах будет отображаться в 4 колонки, на экранах поменьше в 3, на планшетах в 2, на мобильных в 1.

Как оформить таблицу, которая читает данные из mysql?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт