[Duda] Enlazando PHP con HTML y CSS

Archivado
Buenas gente. Estoy haciendo un script en PHP que devuelve una serie de registros en texto usando HTML, y quería adecentar un poco el estilo usando CSS. El problema con el que me encuentro es que pongo código en HTML:

function results() {
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Buscador de expedientes</title></head>
<body>
<table>
   <tr>
      <td><b>C&oacute;digo de expediente</b></td>
      <td><b>Nombre de expediente</b></td>
      <td><b>Propietario</b></td><td><b>Ciudad</b></td>
      <td><b>Pa&iacute;s</b></td><td><b>Estado</b></td>
      <td><b>N&uacute;mero de unidades</b></td>
      <td><b>Ubicaci&oacute;n</b></td>
   </tr>
</table>
</body>
</html>
<?php
   }


sin información de estilo ni nada. Y cuando ya voy a volcar los datos (fijáos que es aquí donde está la información de estilo):

$res = mysql_query ($consulta, $conexion);
   results();
   while ($data = mysql_fetch_array ($res)) {
      ?>
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html>
      <head><title>Buscador de expedientes</title>
      <style>
      table td {
      width: 300px;
      display: inline-block;
      border-style: solid;
      border-width: 1px;
      }
      </style>
      </head>
      <body>
      <td><?php echo $data[0]?></td>
      <td><?php echo $data[1]?></td>
      <td><?php echo $data[2]?></td>
      <td><?php echo $data[3]?></td>
      <td><?php echo $data[4]?></td>
      <td><?php echo $data[5]?></td>
      <td><?php echo $data[6]?></td></br></body></html>
      <?php
   }

me aplica el estilo únicamente a la cabecera de a la tabla, no a los datos. Éstos me los muestra apegotonados sin espacio entre ellos. Sé que no aplica nada de espacio porque si añado un font-size:40px; sólo se agranda la fuente de la cabecera.

Ya no sé qué puede fallar. ¿Alguna ayuda?

EDIT: Ya lo he sacado yo :D Quitar el </table> del primer código y ponerle un <tr> al final del último <td> del segundo código.
Las tablas y el CSS no suelen llevarse muy bien, de hecho ya no es aconsejable usar tablas, puedes hacer lo mismo usando <div> :)
Prueba con:
$res = mysql_query ($consulta, $conexion);
   results();
   while ($data = mysql_fetch_array ($res)) {
      ?>
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html>
      <head><title>Buscador de expedientes</title>
      <style>
      .data {
      width: 300px;
      display: inline-block;
      border: 1px solid #000;
      }
      </style>
      </head>
      <body>
<table>
      <td class="data"><?php echo $data[0]?></td>
      <td class="data"><?php echo $data[1]?></td>
      <td class="data"><?php echo $data[2]?></td>
      <td class="data"><?php echo $data[3]?></td>
      <td class="data"><?php echo $data[4]?></td>
      <td class="data"><?php echo $data[5]?></td>
      <td class="data"><?php echo $data[6]?></td>
</table>
</body></html>     
<?php
   }

Aunque te han comentado que usar divs es mejor, no voy a entrar a discutir sobre eso, sólo puntualizar que esta creencia viene de que antiguamente se usaba las tablas para todo, incluso el diseño de la web, cuando estas están diseñadas para enseñar datos (mira por donde, lo que hacemos aquí), la gente las odia por su pasado, pero realmente es mejor usar tablas para usar datos en vez de divs (estas últimas están bien para maquetar, pero no para mostrar datos), ya que cuando queremos exportar esos datos a un word por ejemplo, o a un excel, no tendremos problemas (que sí los tendremos con las divs).
largeroliker escribió:EDIT: Ya lo he sacado yo :D Quitar el </table> del primer código y ponerle un <tr> al final del último <td> del segundo código.

XD

Gracias de todas formas :)
En primer lugar, totalmente de acuerdo con Xavy_S, que no te dejes liar con la postura talibán de "tablas no". Una cosa es utilizar las tablas para "maquetar" el diseño de la página y otra usarlas en su ámbito semántico correcto y por lo que entiendo de tu ejemplo, es un uso totalmente aceptable.

Y eso de que las tablas y los CSS no se llevan bien, tampoco es demasiado correcto, si lo haces bien el resultado será optimo. Si no quieres complicarte la vida y quieres resultados "de la leche" yo usaría un framework tipo bootstrap (o cualquier otro, hay muchos), echa un vistazo a:

http://twitter.github.io/bootstrap/base-css.html#tables

Mas cosas:

La cabecera de la tabla (títulos de la primera fila) es recomendable incluirla en un bloque separado tal que:

<table>
<thead>
<tr>
<th>título columna 1</th>
<th>título columna 2</th>
<th>título columna 3</th>
</tr>
<tbody>
<tr>
<td>celda 1 de resultado 1</th>
<td>celda 2 de resultado 1</th>
<td>celda 3 de resultado 1</th>
</tr>
<tr>
<td>celda 1 de resultado 1</th>
<td>celda 2 de resultado 1</th>
<td>celda 3 de resultado 1</th>
</tr>
</tbody>
</table>



En tercer lugar, en tu código tienes un bucle tal que:

while ($data = mysql_fetch_array ($res)) {
      ?>
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html>
...
}


Osea, por cada tupla resultado de la consulta SQL generas una página completa ? no se si entiendo lo que quieres hacer, pero lo normal sería:

<html>
<head>
...
</head>
<body>

...
<table>
<thead>
<tr>
<th>título columna 1</th>
<th>título columna 2</th>
<th>título columna 3</th>
</tr>
<tbody>
<?php
// ... conexión con la base de datos, definición de consulta...

while ($data = mysql_fetch_array ($res)) {
echo '
<tr>
<td>' . $data[0] . '</th>
<td>' . $data[1] . '</th>
<td>' . $data[2] . '</th>
</tr>';
?>
</tbody>
</table>
...
</body>
</html>


Es decir, el bucle recorre las tuplas y "escribe" filas de la tabla, no una página completa con una tabla completa

Como mínimo si lo que hay en el resultado de $data[i] es texto cuyo origen no es "confiable" (osea, un usuario añade un registro y pone como valor <etiqueta>aaa</etiqueta> yo lo parsearía con htmlspecialchars().

Ojo con los parámetros de la consulta que recibas (si es que especificas filtros) para evitar SQL injection y similares.

...es posible que se me haya colado algún bug de sintaxis o similar (está escrito todo de memoria)

Te recomiendo aparte acostumbrarte a conocer la semantica de los tags, el uso de <b></b> para negrita es está volviendo obsoleto, es mejor usar <strong></strong> si pretendes dar "importancia" a la palabra. Si solo quieres estilo visual, olvida el <b> o <strong> y dale estilo a la celda vía CSS, osea:

En php / html

...
<td class="rojo">celda1</td>
...


En css

td.rojo
{
color: red;
}


Ya por último yo usaría codificación utf-8 (define el charset utf-8 en el head de la página) y olvídate de andar usando Pa&iacute;s en lugar de País.

En fin, me he liado de más, pero son una buena ristra de consejos que me hubiera gustado saber en su día, espero que te sean de utilidad.
Bueno, comentar que no es una SQL pública, es una base de datos que yo he diseñado y que será totalmente privada. No hay peligro de SQL Injection ni de valores perjudiciales.

Sobre lo de la página completa en el bucle...bueno, es una chapucilla menor porque se interpreta bien, porque el sistema es imprimir la cabecera de la tabla y luego una fila por cada registro coincidente. Así funciona bien, mucho ayudará la corrección de errores de los navegadores actuales, pero bueno XD
5 respuestas
Archivado
Volver a General