Cargando

Ir a contenido


 


HTML5 - Estilos Avanzados para Tablas

En este tutorial estaremos viendo algunos de los nuevos estilos que HTML5 tiene para nosotros, la forma de aplicarlos y por supuesto ejemplos en código de cómo debemos ejecutarlos.


Escrito por el oct 30 2013 18:59


Dentro de las nuevas especificaciones de HTML5 y CSS existen varios estilos que se le pueden aplicar a las tablas de forma de poder definir y ajustar aún más su comportamiento a lo que tenemos como concepto en nuestra mente para hacer nuestras páginas o documentos, los elementos que podemos modificar son los bordes de las tablas, el manejo de las celdas vacías, inclusive la disposición de la misma tabla.

border-collapse

Especifica como los bordes son manejados en las celdas adyacentes, los valores que puede asumir esta propiedad son: collapse y separate.

Con esta propiedad podemos controlar el comportamiento de como el navegador dibuja los bordes, veamos esta imagen de como el navegador lo manejar por defecto:


Observamos que se dibuja un borde en la tabla y otro borde en cada celda de la misma, esto genera un efecto de doble borde, veamos ahora como con border-collapse podemos manejar este tema.

<html>
<head>
	 <title>Example</title>
	 <style>
		 [b]table { [/b]
[b]			 border-collapse: collapse; [/b]
[b]		 } [/b]
		 th, td {
			 padding: 2px;
		 }
	 </style>
</head>
<body>
	 <table border="1">
		 <caption>Results of the 2011 Fruit Survey</caption>
		 <colgroup id="colgroup1">
			 <col id="col1And2" span="2"/>
			 <col id="col3"/>
		 </colgroup>
		 <colgroup id="colgroup2" span="2"/>
		 <thead>
			 <tr>
				 <th>Rank</th><th>Name</th><th>Color</th>
				 <th colspan="2">Size & Votes</th>
			 </tr>
		 </thead>
		 <tbody>
			 <tr>
				 <th>Favorite:</th><td>Apples</td><td>Green</td>
				 <td>Medium</td><td>500</td>
			 </tr>
			 <tr>
				 <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
				 <td>Large</td><td>450</td>
			 </tr>
		 </tbody>
		 <tfoot>
			 <tr>
				 <th colspan="5"> Fruit Data Enterprises</th>
			 </tr>				
		 </tfoot>
	 </table>

Veamos que nos genera este código en el navegador antes de continuar con la explicación:



El valor collapse que colocamos en la propiedad border-collapse nos indica que no queremos que se dibuje un borde en cada elemento adyacente, lo que nos crea el efecto que vimos en la imagen anterior.

Configurando los bordes separados

Si en vez de utilizar collapse utilizamos el valor por defecto separate de propiedad border-collapse, podemos utilizar propiedades adicionales como border-spacing para poder definir el espacio entre bordes de elementos adyacentes, veamos el ejemplo:

<!DOCTYPE HTML>
<html>
<head>
	 <title>Example</title>
	 <style>
		 [b]table { [/b]
[b]			 border-collapse: separate; [/b]
[b]			 border-spacing: 10px; [/b]
[b]		 } [/b]
		 th, td {
			 padding: 2px;
		 }
	 </style>
</head>
<body>
	 <table border="1">

<caption>Results of the 2011 Fruit Survey</caption>
		 <colgroup id="colgroup1">
			 <col id="col1And2" span="2"/>
			 <col id="col3"/>
		 </colgroup>
		 <colgroup id="colgroup2" span="2"/>
		 <thead>
			 <tr>
				 <th>Rank</th><th>Name</th><th>Color</th>
				 <th colspan="2">Size & Votes</th>
			 </tr>
		 </thead>
		 <tbody>
			 <tr>
				 <th>Favorite:</th><td>Apples</td><td>Green</td>
				 <td>Medium</td><td>500</td>
			 </tr>
			 <tr>
				 <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
				 <td></td><td></td>
			 </tr>
			 </tbody>
			 <tfoot>
			 <tr>
				 <th colspan="5">Fruit Data Enterprises</th>
			 </tr>				
		 </tfoot>
	 </table>
</body>
</html>

En este ejemplo simplemente especificamos que el borde tendrá un espacio de 10 píxeles para los elementos adyacentes, veamos el ejemplo de como se traslada esto al navegador:



Manejando las celdas vacías

Como vimos en la imagen anterior el navegador igualmente le asigna un espacio con borde para las celdas vacías, esto a veces puede que no lo queramos en nuestra tabla por lo que al código anterior podemos hacer la siguiente modificación para poder tratar con las celdas vacías.

<style>
table {
	 border-collapse: separate;
	 border-spacing: 10px;
	 [b]empty-cells: hide; [/b]
}
th, td {
	 padding: 2px;
}
</style>


Veamos como se ve esto en el navegador:



Efectivamente ya nos pudimos deshacer de las celdas vacías sin perder el formato de nuestra tabla.

Con esto finalizamos el tutorial, como vemos podemos hacer muchas modificaciones a nuestras tablas de forma de adaptarlas a lo que podamos conceptualizar y de adaptar a nuestras necesidades.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado oct 30 2013 18:59
  •   Visitas 3.8K
  •   Nivel
    Avanzado



Tutoriales Relacionados


1 Comentarios


Cesar Ortiz
oct 30 2013 23:23
Espectacular Tutorial Jacosta, gracias por compartirlo ;)
No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse