How to apply style to an HTML table generated with PHP?

Question

How to apply style to an HTML table generated with PHP?

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

3

I have a php file that shows me data from a table (bd mysql), on the other hand, I have an HTML file where I have a table with CSS styles and everything working, I would like to apply these styles with the data extracted from the base data through PHP, is this possible? I have tried to place the php code in the html but it does not read it and vice versa.

Table of php:

table with styles (bootstrap):

Use Xampp, mysql data base (PHPMYADMIN).

Here the PHP code:

<!DOCTYPE html>
<html lang="ES">
<head>
 <meta charset="UTF-8">
 <title>Matxus - información de productos</title>
</head>
<body>
 <?php  
  $server ="localhost"; 
  $usuario = "test";
  $password = "1234";
  $bd = "matxus";
  $conexion = mysqli_connect($server,$usuario,$password,$bd) or die("error en la conexion");
// TABLA PROVEEDORES
$consulta = mysqli_query($conexion, "SELECT * FROM proveedores") or die("error al extraer los datos");
echo '<table border="1">';
  echo '<tr>';
    echo '<th id="idproveedor">Identificador</th>';
    echo '<th id="empresa">Nombre Empresa</th>';
    echo '<th id="comercial">Comercial</th>';
    echo '<th id="telefono">Teléfono</th>';
  echo '</tr>';
  while($extraido = mysqli_fetch_array($consulta)) {
  echo '<tr>';
    echo  '<td>'.$extraido['idproveedor'].'</td>';
    echo  '<td>'.$extraido['empresa'].'</td>';
    echo  '<td>'.$extraido['comercial'].'</td>';
    echo  '<td>'.$extraido['telefono'].'</td>';
  echo '</tr>';
  }
mysqli_close($conexion);
echo '</table>';
?>
</body>
</html>

Code of my table in HTML

<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>Nombre de Empresa</th>
                <th>Comercial</th>
                <th>Teléfono</th>
            </tr>
        </thead>
        <!-- DATOS A EXTRAER DE BD.PROVEEDORES -->
        <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>

As I mentioned in the HTML file, the styles are applied. thanks for the help.

html php

asked by patfinder 22.03.2018 в 19:43

source

3 answers

Place icons on a menu with bootstrap4 Convert date in normal format

score 1 · Answer 1

first, based on any point of view it is a very bad practice to put a query in an HTML file, the main reason is that the code becomes tangled and difficult to maintain, I propose the following as a first step.

Divide HTML and PHP into two files, for example:

index.php and utils.php (it is important that both have the php extension since the template (your table) will have to have some php to generate the result.

Now you are going to include the utils.php in your index.php file and you are going to call a function that we will create later, it can be called getTableFromDatabase ():

 <?php 
 require('utils.php'); 
 $tabla = getTableFromDatabase();
 ?>

Inside the $ table will be the html of the table you want to paint.

In the utils.php file what you are going to do is create the function before named like this:

<?php  

function getTableFromDatabase()
{
  $server ="localhost"; 
  $usuario = "test";
  $password = "1234";
  $bd = "matxus";
  $conexion = mysqli_connect($server,$usuario,$password,$bd) or die("error en la conexion");

$consulta = mysqli_query($conexion, "SELECT * FROM proveedores") or die("error al extraer los datos");

$htmlTabla = ""; 

$htmlTabla.= '<table border="1">';
$htmlTabla.= '<tr>';
$htmlTabla.=  '<th id="idproveedor">Identificador</th>';
$htmlTabla.=  '<th id="empresa">Nombre Empresa</th>';
$htmlTabla.= '<th id="comercial">Comercial</th>';
$htmlTabla.= '<th id="telefono">Teléfono</th>';
$htmlTabla.= '</tr>';

  while($extraido = mysqli_fetch_array($consulta)) {

  $htmlTabla.=  '<tr>';
    $htmlTabla.=   '<td>'.$extraido['idproveedor'].'</td>';
    $htmlTabla.=   '<td>'.$extraido['empresa'].'</td>';
    $htmlTabla.=   '<td>'.$extraido['comercial'].'</td>';
    $htmlTabla.=   '<td>'.$extraido['telefono'].'</td>';
  $htmlTabla.=  '</tr>';
  }

$htmlTabla.=  '</table>';

mysqli_close($conexion);

return $htmlTabla;

}

Then in the index.php you just have to print the variable:

  <?php echo $tabla; ?>

Before I finish I want to tell you that this is not even a good implementation, I have put it because with it you can improve a bit, but it becomes indispensable if you want to be a good web developer start using a framework (Symfony, Laravel, there are thousands), this way of programming has been used for more than 10 years at a professional level.

Greetings

score 1 · Answer 2

First of all I join the recommendation of the previous answer. and what you need is to include the relevant styles of bootstraps so that css classes do their work.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

Put this line below

<title>Matxus - información de productos</title>

and the styles will be loaded, keep in mind that they are loading from the internet

score 0 · Answer 3

Ok friend normally when I generate a php that I want to have style just add to the head the style label and write my css I do not know if it is what you are looking for but ami works wonders for me something like this:

<html>
<head>
<style>
//Escribe aqui tus reglas de estilo
</style>
</head>

<body>
<?php
//aquí tu código php
?>
</body>
</html>