Как оформить таблицу, которая читает данные из 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>

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

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 (это пример рыжего цвета)
Написано более трёх лет назад

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

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

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

PHP

+1 ещё

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

ответа
PHP

+1 ещё

Простой
Не работает событие телеграм бота, как запустить его?
- 1 подписчик
- 10 часов назад
- 54 просмотра
0

ответов
CSS

+1 ещё

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

ответов
HTML

+1 ещё

Простой
Как сделать чтобы в МиниВК приложении ссылки открывались внутри?
- 1 подписчик
- 22 часа назад
- 19 просмотров
0

ответов
PHP

Средний
Обнаружилась на сайте активная РНР сессия, как и где найти функцию session_write_close()?
- 1 подписчик
- вчера
- 64 просмотра
0

ответов
PHP

+1 ещё

Простой
Как написать правило в nginx чтобы адрес типа localhost:8099/home/index/alex попадал в GET['url'] параметр?
- 1 подписчик
- вчера
- 59 просмотров
1

ответ
PHP

Средний
Как сформировать список по вложенному массиву рекурсивной функцией?
- 1 подписчик
- вчера
- 104 просмотра
2

ответа
PHP

Средний
Как указать тип возвращаемого значения абстрактного метода, если он должен возвращать объект класса унаследованного от другой абастракции?
- 1 подписчик
- вчера
- 90 просмотров
2

ответа
PHP

Простой
Как узнать из-за чего прерывается фоновый процесс запущенный через exec?
- 1 подписчик
- вчера
- 81 просмотр
2

ответа
HTML

+3 ещё

Простой
Почему появляется горизонтальная прокрутка на мобильном (overflow включен)?
- 1 подписчик
- вчера
- 69 просмотров
1

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

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

Decart IT-production

от 260 000 до 340 000 ₽

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

Wanted. • Москва

До 160 000 ₽

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

Wanted.

До 200 000 ₽

Подправить телеграмм бота

27 нояб. 2024, в 22:58

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

Создать многостраничный дизайн WEB-приложения (сайта) в бьюти-сфере

27 нояб. 2024, в 22:29

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

Разработать приложение для Android и IOS

27 нояб. 2024, в 21:14

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

Это не 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?

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

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

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