Hola Amigos Buenas tardes
Mi consulta es la siguiente:
¿Cómo puedo dar estilos a una tabla para que no parezca tabla?
dejo el link de una fotografía donde muestro mi tabla donde el contenido es extraido de una bd en mysql mediante código php:
http://www.subirimagenes.com/otros-incorrecto-9050802.htmly dejo el link de otra fotografía de un video-tutorial donde la tabla que hace esta persona le ha dado diseño CSS para que se vea más estética (a la cual me gustaría que se pareciese la mía):
http://www.subirimagenes.com/otros-correcto-9050804.htmlantes de poner el código mi página se estructura de esta manera
arriba en el header esta el nav
enseguida un section y dentro de este un aside a la izquierda y un article a la derecha
en el aside esta el buscador y en el article se encuentra la tabla, para efectos de mejor visualización coloque el código a partir del section.
dejo mi código php
archivo llamado: busca_grand_nl.php
<section id="contenedor">
<aside id="izquierda">
<h1>Buscar Propiedades de Nuevo León</h1>
<form name="form1" method="post" action="busca_grand_nl.php">
<label>Buscar por Colonia:</label>
<input type="text" name="txtBusqueda" id="txtBusqueda"><br>
Seleccione Municipio*:
<select name="selCiudad" id="selCiudad">
<option value="-1" selected>Ver todas las Propiedades</option>
<?php
$tablaciudades = mysql_query("SELECT * FROM municipios_monterrey ORDER BY nombre_mun ASC"); // Seleccionamos las ciudades de la tabla ciudades
while ($registrociudad = mysql_fetch_array($tablaciudades)) { // Vamos a repetir una Option (opcion), de la Lista Desplegable, por cada ciudad en la tabla
?>
<option value="<?php echo $registrociudad['id_mun']; ?>"><?php echo $registrociudad['nombre_mun']; ?></option>
<?php
} // termina la zona de repeticion
mysql_free_result($tablaciudades); // se libera la memoria usada por la tabla
?>
</select>
<input type="submit" name="cmdBuscar" id="cmdBuscar" value="Buscar">
</form>
<h5>Los campos marcados con (*) son obligatorios</h5>
</aside>
<article id="derecha">
<table border="10" align="center" cellspacing="2" cellpadding="2">
<tr>
<th>Imagen</th>
<th>Dierección </th>
<th>Colonia</th>
<th>Municipio</th>
<th>Estado</th>
<th>Plantas</th>
<th>Recámaras</th>
<th>Baños</th>
<th>Precio</th>
</tr>
<?php
$sql = "SELECT propiedades.*, municipios_monterrey.* FROM propiedades, municipios_monterrey WHERE propiedades.id_mun = municipios_monterrey.id_mun ";
if (isset($_POST['txtBusqueda'])) {
$sql .= " AND propiedades.colonia LIKE '%" . $_POST['txtBusqueda'] . "%' ";
if (intval($_POST['selCiudad']) > 0) {
$sql .= " AND propiedades.id_mun = '" . intval($_POST['selCiudad']) . "'";
}
}
$sql .= " ORDER BY municipios_monterrey.nombre_mun ASC";
$tabla = mysql_query($sql);
while ($registro = mysql_fetch_array($tabla)) {
?>
<tr>
<th><img src="<?php echo $registro['imagen'];?>" width="80" height="80"/></th>
<th><?php echo $registro['direccion']; ?></th>
<th><?php echo $registro['colonia']; ?></th>
<th><?php echo $registro['municipio']; ?></th>
<th><?php echo $registro['estado']; ?></th>
<th><?php echo $registro['plantas']; ?></th>
<th><?php echo $registro['recamaras']; ?></th>
<th><?php echo $registro['banos']; ?></th>
<th><?php echo $registro['precio']; ?></th>
</tr>
<?php
}
mysql_free_result($tabla);
mysql_close($conexion);
?>
</table>
</article>
</section>
<footer>
copyright@ todos los derechos reservados
</footer>
</body>
</html>y dejo el código CSS (hasta el momento es lo que llevo de estilos)
archivo llamado estilos.css
th{
border: #4E6FFF 1px solid;
}
article#derecha, aside#izquierda{
background: #1e6381;
display: inline-block;
margin: .5em;
vertical-align: top;
}
article#derecha{
width:65%;
height: auto;
border: 4px solid black;
margin: 20px 0px 20px;
border-radius: 8px;
background: green;
}
aside#izquierda{
width:30%;
}Gracias por todo, Dios les Bendiga y les Conserve la Salud.
