Cómo mostrar un array de PHP en una tabla HTML

Los arreglos (o arrays) en PHP son, por lejos, la estructura de datos más utilizada.

A diferencia de otros lenguajes, los de PHP son altamente flexibles (no tienen una longitud predeterminada, pueden albergar datos de diferente tipo, etc…).

Una necesidad bastante común cuando se trabaja en desarrollo de aplicaciones web es la visualización del contenido de un arreglo en forma de tabla HTML.

El ejemplo más claro es cuando el arreglo contiene los resultados de una consulta a una base de datos.

Existen varios modos de lograr esta visualización. A continuación verás algunos de ellos, asumamos que todos los ejemplos comienzan con la definición del arreglo:

<?php

$a = [
        [
                'Nombre' => 'Mauro',
                'Apellido' => 'Chojrin',
                'Correo' => 'mauro.chojrin@leewayweb.com',
        ],
        [
                'Nombre' => 'Alberto',
                'Apellido' => 'Loffatti',
                'Correo' => 'aloffatti@hotmail.com',
        ],
        [
                'Nombre' => 'Foo',
                'Apellido' => 'Bar',
                'Correo' => 'foo_bar@example.com',
        ]
];

En rigor de verdad, se trata de una matriz (Arreglo de arreglos) pero lo uso para hacer algo más realistas los ejemplos… si fuera un arreglo unidimensional sería ligeramente más sencillo.

En cualquiera de los casos lo que se obtendrá será:

Mostrar una tabla HTML usando PHP puro

La primera forma es hacerlo 100% en PHP:

$s = '<table border="1">';
foreach ( $a as $r ) {
        $s .= '<tr>';
        foreach ( $r as $v ) {
                $s .= '<td>'.$v.'</td>';
        }
        $s .= '</tr>';
}
$s .= '</table>';

echo $s;

En este caso lo que se ve es cómo se recorre el arreglo y se va conctatenando todo el HTML en el string $s, el cual es emitido al final.

Otra forma ligeramente diferente de hacerlo es realizar los echo directamente:

echo '<table border="1">';
foreach ( $a as $r ) {
        echo '<tr>';
        foreach ( $r as $v ) {
                echo '<td>'.$v.'</td>';
        }
        echo '</tr>';
}
echo '</table>';

Mostrar una tabla usando PHP dentro de HTML

La segunda forma es mezclar HTML con PHP:

<table border="1">
<?php
foreach ( $a as $r ) {
        ?>
        <tr>
        <?php
        foreach ( $r as $v ) {
        ?>
                <td><?php echo $v;?></td>
        <?php
        }
        ?>
        </tr>
<?php
}
?>
</table>

Este código debe escribirse en un archivo .php (a pesar de que la gran mayoría de su contenido sea sólo HTML) para que el servidor web lo interprete correctamente.

Esta es una de las características interesantes que tiene php respecto de otros lenguajes (al menos en lo que al desarrollo web respecta).

Cuando el intérprete lee la secuencia de escape ?> se limita a enviar todo lo que aparece sin hacer ningún tipo de análisis (Hasta que vuelve a aparecer <?php). Esto es lo que permite embeber código de otros lenguajes dentro del de PHP.

A simple vista puede parecerte algo más molesto (eso de estar abriendo y cerrando php todo el tiempo) pero piensa en las ventajas que te da:

  1. Está más claramente separada la lógica de la presentación (Lo que es HTML es HTML y lo que es PHP es PHP).
  2. Los editores de texto (IDEs especialmente) serán capaces de diferenciar claramente el HTML del PHP y de esa forma marcar errores específicos).

Un punto que se deriva del primero es que de esta forma es más fácil trabajar con otros miembros del equipo que no sepan de php pero si de HTML (Por ejemplo diseñadores gráficos).

Una pequeña variante que a veces se utiliza para esto es:

<table border="1">
<?php
foreach ( $a as $r ):
        ?>
        <tr>
        <?php
        foreach ( $r as $v ):
        ?>
                <td><?php echo $v;?></td>
        <?php
        endforeach;
        ?>
        </tr>
<?php
endforeach;
?>
</table>

Este tipo de aproximación es la que toman los frameworks y motores de templating (como Twig por ejemplo).

Es una buena práctica separar el código que hace a la presentación de aquel que hace a la lógica (Conexión a la base de datos, ejecución de consultas, etc…).

¿Te interesa conocer más sobre PHP? Este curso te puede ayudar.

mchojrin

Por mchojrin

Ayudo a desarrolladores PHP a acceder mercados y clientes más sofisticados y exigentes

12 comentarios

  1. Hola, alguien puede ayudarme con esto: tengo una aplicacion que me muestra registros guardados en base de datos a traves de un array, y uno de los datos guardados es una direccion ip, pero cuando se muestra la consulta en una tabla, esta ip no se muestra como enlace elegible para navegar, sino como un texto plano. Mi pregunta es que debo hacer, como debo manejar este dato para convertirlo en un enlace?

    Gestión de Piscinas

    Nuevo

    Tabla Matriz de Piscinas

    ID PISCINA
    PISCINA
    ÁREA
    ESTADO
    INICIO
    COSECHA
    GESTIÓN
    IR
    OPCIONES

    Ha

    <a href="editar.php?
    id_piscina= &
    piscina= &
    area= &
    estado= &
    inicio= &
    cosecha= &
    gestion=
    «>EDITAR
    <a href="sp_eliminar.php? id_piscina=»>ELIMINAR

  2. como trducirais esto con for ? lo que pasa es que necesito poner dos arreglos por ejemplo una orden y sus detalles y probienen de dos arreglos diferentes y necesito hacer una sola tabla horisontal (mi idea de ponerlo for es por que para poder saber de que indice iniciar el segundo arreglo

  3. Hola, tengo una duda… Como se podria hacer si quisiera ingresar desde php la catidad de filas y columnas que quiero tener en la tablas?

  4. Yo probaría otra opción:
    Que PHP devuelva un objeto JSON y que la tarea de renderizado se realice enteramente en el front-end.
    Qué os parece??

    1. Muy interesante sugerencia! Es un poco más complejo de lo que quería mostrar en este ejemplo pero bueno… tal vez se podría agregar 🙂

  5. Buenas tardes:
    Tengo una duda con un echo que tengo. Aquí dejo parte del código:
    while($row = mysqli_fetch_array($result)) {
    echo $row[‘id’] . ‘ ‘ . $row[‘Empresa’] . ‘ ‘ . $row[‘Direccion’] . ‘ ‘ . $row[‘Provincia’] . »;
    }

    Lo que quiero dado que los datos se muestran correctamente, es que los datos que se muestran de la tabla, estos aparecen con el borde. Ahora mismo se ven pero, pero los bordes no se visualizan.

    Gracias y un saludo

    1. Hola José:

      Lo que veo en principio es que no estás usando los tags de creación de celdas de la tabla (<td>) para separar entre un dato y el siguiente, ni el de creación de filas de la tabla (<tr>) para separar entre un registro y el siguiente.

      Prueba con eso.

      Saludos!

  6. Buenas tardes, mi duda es la siguiente, tengo una array de la siguiente manera:
    $arreglo_1=array(
    array (dato1, dato2, dato3, colorcafe),
    array (dato1, dato2, dato3, colorrojo),
    ); // dato 4 imaginemos que es el nombre de un color como lo escribo ahí

    y tengo otro array donde le doy un valor al color ejemplo:
    $arreglo_2=array(
    ‘colorcafe’=>»campo y sabor»,
    ‘colorazul’=>»agua y mar»,
    ); // estos serian los colores con valor

    tengo una tabla la cual me muestra los valores del arreglo 1 y creo una ultima columna para que me muestre el signficado del color

    como hago para que el valor del arreglo_1 referente al colorcafe «para ejemplo» me ingrese una nueva columna donde me diga el significado el cual esta en el arreglo_2 y cuy valor es «campo y sabor» y el color que no tenga significado se imprima un valor que diga no tiene signficado?.

    se que se debe hacer con una sentencia if pero no he logrado que se evalue los campos, gracias

    1. Hola Germán:

      Gracias por tu pregunta. Para empezar, te sugiero usar una versión más nueva de php o, en todo caso, usar la notación moderna de definición de arreglos ($arreglo = [valor1, valor2]).

      Yendo a tu pregunta, puedes resolverlo de varias formas diferentes.

      La mejor a mi modo de ver es utilizar la función array_search.

      La idea sería recorrer todo el arreglo_1 y, por cada elemento, realizar una búsqueda dentro del arreglo_2.

      Exitos!

      1. Gracias por la respuesta, lo he practicado pero sigo sin tener el resultado, será que estaré aplicando mal la sentencia?

        // un foreach para imprimir en tabla los valores del arreglo_1
        foreach ($arreglo_1 as $r) {
        echo »;
        foreach ($r as $v) {
        echo » . $v . »;
        }

        // Genenarando la comparacion con el uso de array_search para identificar el significado del color
        if(array_search($arreglo_1, $arreglo_2)){
        $v = $arreglo_2;
        }else {
        $v = "no esta el significado";
        }

        // Linea de codigo encargada de imprimir los resultados de array_search
        echo '<td width="15%">'. $v . '</td>';
        }

        al correr el codigo me imprime «»no esta el significado»», por lo cual me desconoce unos de los colores que si esta que es el color cafe?, tendré algo mal en la sintexis?

        1. Ahora que veo más de cerca tu código creo que ni siquiera necesitas array_search.

          Aquí tienes un ejemplo que espero te ayude:

          <?php

          $arreglo_1 = [
          ['dato1', 'dato2', 'dato3', 'colorcafe'],
          ['dato1', 'dato2', 'dato3', 'colorrojo'],
          ];

          $arreglo_2 = [
          'colorcafe'=>'campo y sabor',
          'colorazul'=>'agua y mar',
          ];

          ?>

          <table>
          <tbody>
          <?php
          foreach ( $arreglo_1 as $r ):
          ?>
          <tr>
          <td><?php echo $r[0];?></td>
          <td><?php echo $r[1];?></td>
          <td><?php echo $r[2];?></td>
          <td><?php echo array_key_exists($r[3], $arreglo_2) ? $arreglo_2[$r[3]] : 'N/A' ?></td>
          </tr>
          <?php
          endforeach;
          ?>
          </tbody>
          </table>

¿Te quedó alguna duda? Publica aca tu pregunta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.