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;
}
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 unecho
con backticks``
, usa comillas simples o dobles.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 lostd
, y no te ocupes de ello en el código.php
. Si haces así, lostd
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.