Programación Web y Scripting > CSS / SASS / LESS
Como dar estilos a una tabla
(1/1)
programador_independiente:
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.html
y 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.html
antes 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
--- Código: ---<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>
--- Fin del código ---
y dejo el código CSS (hasta el momento es lo que llevo de estilos)
archivo llamado estilos.css
--- Código: ---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%;
}
--- Fin del código ---
Gracias por todo, Dios les Bendiga y les Conserve la Salud.
Alchiment:
Si vas a utilizar una base de datos e imprimir los registros en una pagina, seria mejor imprimieras la tabla por medio de PHP, de igual manera asigna las propiedades CSS, no tendría problemas al cargarlo.
Te dejo un ejemplo:
http://appsalche.esy.es/
Codigo PHP
--- Código: ---<?php
echo "<table align='center'>";
/*CICLO PARA LA IMPRESION DE LOS DATOS*/
//FILAS -- titulos
echo "<tr>";
echo "<th>";
echo "No.";
echo "</td>";
echo "<th>";
echo "FECHA";
echo "</td>";
echo "<th>";
echo "CORREO";
echo "</td>";
echo "<th>";
echo "PAGINA";
echo "</td>";
//condicion del boton cancelar
echo "</tr>";
while ($row = mysql_fetch_array($temp_lista)) {
$id = $row['id'];
$fecha = $row['fecha'];
$mail = $row['mail'];
$page = $row['page'];
//CREACION DE LA TABLA
//FILAS -- registros
echo "<tr>";
//COLUMNAS
echo "<td>";
echo $id;
echo "</td>";
echo "<td>";
echo $fecha;
echo "</td>";
echo "<td>";
echo $mail;
echo "</td>";
echo "<td>";
echo "<a href='$page'> <img src='images/enlace.ico' width='18' height='18'/> </a>";
echo "</td>";
echo "<td>";
echo "<a id='edi' href='?edit=$id&fecha=$fecha&mail=$mail&page=$page'><img src='images/edi.ico' height='16' width='16''></a> ";
echo " - ";
echo "<a href='?elim=$id&fecha=$fecha&mail=$mail&page=$page' ><img src='images/elim.ico' height='16' width='16''></a>";
echo "</td>";
echo "</tr>";
}
echo "</table>";
?>
--- Fin del código ---
Codigo CSS
--- Código: --- table{
margin-left: 20px;
}
table tr:nth-child(odd){
background: rgb(0, 114, 198);
width: auto;
padding: 1%;
}
table tr:nth-child(odd) td{
padding: 1%;
width: auto;
word-wrap:break-word;
}
table tr:nth-child(even){
padding: 1px;
background: rgb(125,194,240);
}
table tr:nth-child(even) td{
padding: 1%;
width: 150px;
word-wrap:break-word;
}
table th:hover{
background: rgba(51,51,51,0.7);
color: white;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;
}
--- Fin del código ---
programador_independiente:
Muchas gracias Alchiment por tu respuesta.
Cambié el código, en vez de utilizar tables usé una div y labels, muchas gracias por tu ayuda de cualquier manera, saludos!!!!
Dejo el Código quizás a alguien le sirva en el futuro:
Código PHP:
--- Código: ---<section id="contenedor_buscador">
<aside id="izquierda">
<h4>Buscar Propiedades de Nuevo León</h4><br>
<form name="form1" method="post" action="busca_grand_nl.php">
<label>Búsqueda por Colonia:</label>
<input type="text" name="txtBusqueda" id="txtBusqueda">
<label>Elija Municipio*:</label>
<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">
<h2>Resultados de su búsqueda</h2>
<?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))
{
?>
<div class="propiedades">
<img id="img_array"src="<?php echo $registro['imagen'];?>"/><br><br>
<label>Direccion:<?php echo $registro['direccion']; ?></label><br>
<label>Colonia:<?php echo $registro['colonia']; ?></label><br>
<label>Municipio:<?php echo $registro['municipio']; ?></label><br>
<label>Estado:<?php echo $registro['estado']; ?></label><br>
<label>Plantas:<?php echo $registro['plantas']; ?></label><br>
<label>Recámaras:<?php echo $registro['recamaras']; ?></label><br>
<label>Baños:<?php echo $registro['banos']; ?></label><br>
<label>Precio:<?php echo $registro['precio']; ?></label>
</div>
<?php
}
mysql_free_result($tabla);
mysql_close($conexion);
?>
</table>
</article>
</section>
--- Fin del código ---
Código CSS:
--- Código: ---.propiedades{
background:#055273;
border:2px solid 053C53;
border-radius:20px;
display:block;
float:left;
font-family: verdana;
font-size: .8em;
margin-bottom: 10px;
margin-left:2.3%;
margin-top:10px;
min-height: 350px;
width:30%;
}
.propiedades label{
margin-left: 20px;
margin-top: -20px;
display: block;
}
--- Fin del código ---
Navegación
Ir a la versión completa