0

He generado mediante PHP una matriz en un documento. El estilo css está mediante link en el head pero solo se aplica al body y no se por qué. Los elementos creados con el php no cogen el estilo. Sin embargo, he probado a generar una etiqueta dentro del body y ahi sí que me coge el estilo. ¿Quiere esto decir que para cada elemento generado con php tengo que crear una etiqueta , y no vale una hoja de estilo linkeada?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="tabla.css"> <!-- Esto no me lo reconoce php -->
        <title>Tabla</title>
     </head>
     <body>
         <h1>Tabla</h1>
         <table>
            <?php

                 function generarTableroHTML() {

                 $filas = 20;
                 $columnas = 20;
                 $lado = 30;

                for ( $f = 0; $f < $filas; $f++) {
                        echo `<tr>`;
                   for ($c = 0; $c < $columnas; $c++) {
         
                        echo "<td style= width: $lado px ;height:$lado px>$f-$c</td>";
        
                    }
                    echo "</tr>";
                  }
                }
              generarTableroHTML();
            ?>
      </table>
  </body>

El css es el siguiente:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
  }
  
  table {
      width: 60%;
      text-align: center;
      background: rgb(126, 125, 125);
      border: solid 1px #dddddd;
      border-collapse: collapse;
      border-spacing: 0;
    }
   
    table tr ,
    table tr td {
      padding: 0.5625em 0.625em;
      font-size: 0.575em;
      color: #222222;
      border: 1px solid #dddddd;
    }
    
    table tr.even,
    table tr.alt,
    table tr:nth-of-type(even) {
      background: #f9f9f9;
    }
5
  • No entiendo cuál es el problema. El link del archivo .css se pone en el head y por lo general va destinado a lo que pondrás en el body o en el footer. Por otra parte, no entiendo qué tiene que ver PHP en todo esto. Pon el .css directamente en el head y punto.
    – A. Cedano
    Commented el 18 dic. 2022 a las 21:51
  • 2
    Te falta entrecomillar el estilo: echo "<td style='width: $lado px ;height:$lado px'>$f-$c</td>";. Si vas a declarar la función para llamarla inmediatamente y no la llamas otra vez, mejor no la declares y sólo ejecuta el código de la función. Por otro lado tienes un echo con backticks ``, usa comillas simples o dobles.
    – Sal
    Commented el 19 dic. 2022 a las 0:15
  • @A. Cedano Creo que me expliqué mal. El <link> que hay en el head funciona correctamente. Hago una puntualización. Funciona correctamente en todo el documento menos en aquellos elementos generados en el bloque php(en este caso los tr y td). Creo que se debe a tema caché. Voy a borrar y a ver que pasa.
    – Jose L.
    Commented el 19 dic. 2022 a las 11:16
  • 1
    Esto es contradictorio en sí mismo: echo "<td style= width: $lado px ;height:$lado px>$f-$c</td>";, si estás usando un archivo .css, que es lo recomendado, evita poner estilos in-line. Define en el .css qué dimensiones deben tener los td, y no te ocupes de ello en el código .php. Si haces así, los td irían sólo con el contenido: echo "<td>$f-$c</td>"; y lo demás iría en el .css. Esa es la práctica recomendada, aplicando el principio de separación de responsabilidades.
    – A. Cedano
    Commented el 19 dic. 2022 a las 11:26
  • @A. Cedano Estoy de acuerdo, en un inicio era un ejercicio sin css para crear elementos dinamicamente con php. Posteriormente he ido añadiendo estilo y no he caído en el detalle. Muchas gracias
    – Jose L.
    Commented el 19 dic. 2022 a las 11:30

1 respuesta 1

0

El problema radicaba en la caché. Al borrar y reiniciar, la pagina detecta correctamente la etiqueta con el documento css. Me ha pasado en 2 ejercicios diferentes y en ambos se solucionó borrando la caché.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.