• Viernes 29 de Marzo de 2024, 01:26

Autor Tema:  Como dar estilos a una tabla  (Leído 2700 veces)

programador_independiente

  • Nuevo Miembro
  • *
  • Mensajes: 10
    • Ver Perfil
Como dar estilos a una tabla
« en: Viernes 29 de Agosto de 2014, 05:21 »
0
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: [Seleccionar]
<section id="contenedor">
    <aside id="izquierda">
<h1>Buscar Propiedades de Nuevo Le&oacute;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&oacute;n </th>
<th>Colonia</th>
<th>Municipio</th>
<th>Estado</th>
<th>Plantas</th>
<th>Rec&aacute;maras</th>
<th>Ba&ntilde;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
Código: [Seleccionar]
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.

Alchiment

  • Nuevo Miembro
  • *
  • Mensajes: 8
    • Ver Perfil
Re:Como dar estilos a una tabla
« Respuesta #1 en: Viernes 29 de Agosto de 2014, 05:34 »
0
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: [Seleccionar]
<?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>";
?>

Codigo CSS
Código: [Seleccionar]
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;
}

programador_independiente

  • Nuevo Miembro
  • *
  • Mensajes: 10
    • Ver Perfil
Re:Como dar estilos a una tabla
« Respuesta #2 en: Lunes 1 de Septiembre de 2014, 03:07 »
0
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: [Seleccionar]
<section id="contenedor_buscador">
    <aside id="izquierda">
<h4>Buscar Propiedades de Nuevo Le&oacute;n</h4><br>
<form name="form1" method="post" action="busca_grand_nl.php">
<label>B&uacute;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="&nbsp;Buscar&nbsp;">
</form>

<h5>Los campos marcados con (*) son obligatorios</h5>
</aside>
<article id="derecha">
<h2>Resultados de su b&uacute;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&aacute;maras:<?php echo $registro['recamaras']; ?></label><br>
<label>Ba&ntilde;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>


Código CSS:
Código: [Seleccionar]
.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;
}