Tutorial aplicar estilo a gridView asp.net con css

Hola, muy buenas.

Para este primer “post-tutorial” vamos a aplicar estilo a GridView asp.net con css.

Un GridView es un control de usuario que nos va a generar una tabla html a partir de información obtenida de una base de datos. Nos ofrece la posibilidad de paginar los resultados automáticamente así como utilizar distintos campos para la ordenación de los resultados.

Este es un ejemplo de GridView; nos interesa un GridView sin ningún tipo de estilo, con paginación y con ordenación.

Y este es el html que se genera…

<div>
<table id="gvEquipos" style="border-collapse: collapse;" border="1" rules="all" cellspacing="0">
<tbody>
<tr>
<th scope="col"><a>Club</a></th>
<th scope="col"><a>Nombre</a></th>
<th scope="col"><a>Fundacion</a></th>
<th scope="col"><a>Presupuesto</a></th>
<th scope="col"><a>Presidente</a></th>
<th scope="col"><a>Direccion</a></th>
<th scope="col"><a>PaginaWeb</a></th>
</tr>
<tr>
<td>Real Madrid</td>
<td>Real Madrid Club de Fútbol</td>
<td>1902</td>
<td>346000000</td>
<td>Ramón Calderón</td>
<td>Concha Espina, 1 28036 Madrid</td>
<td>http://www.realmadrid.com</td>
</tr>
<tr>
<td>Barcelona</td>
<td>Fútbol Club Barcelona</td>
<td>1899</td>
<td>280000000</td>
<td>Joan Laporta</td>
<td>Avda. Arístides Maillol s/n 08028 Barcelona</td>
<td>http://www.fcbarcelona.com</td>
</tr>
<tr>
<td>Athletic</td>
<td>Athletic Club de Bilbao</td>
<td>1898</td>
<td>41106000</td>
<td>Ana Urkijo Elorriaga</td>
<td>Alameda de Mazarredo, 23 48009 Bilbao</td>
<td>http://www.athletic-club.es</td>
</tr>
<tr>
<td>Celta</td>
<td>Real Club Celta de Vigo, SAD</td>
<td>1923</td>
<td>24000000</td>
<td>Carlos Mouriño</td>
<td>Avda. de Balaídos, s/n 36210 Vigo</td>
<td>http://www.celtavigo.net</td>
</tr>
<tr>
<td>Deportivo</td>
<td>Real Club Deportivo de la Coruña</td>
<td>1906</td>
<td>77000000</td>
<td>Augusto César Lendoiro</td>
<td>Plaza Pontevedra 19, 1º 15003 La Coruña</td>
<td>http://www.canaldeportivo.com</td>
</tr>
<tr>
<td>Espanyol</td>
<td>Real Club Deportivo Espanyol de Barcelona</td>
<td>1900</td>
<td>38360000</td>
<td>Daniel Sánchez LLibre</td>
<td>Paseo Olímpico, 17-19, 08038 Barcelona</td>
<td>http://www.rcdespanyol.com</td>
</tr>
<tr>
<td>Mallorca</td>
<td>Real Club Deportivo Mallorca, SAD</td>
<td>1916</td>
<td>30000000</td>
<td>Mateo Alemany</td>
<td>Son Moix. Camí dels Reis, s/n 07011 Palma de Mallo</td>
<td>http://www.rcdmallorca.es</td>
</tr>
<tr>
<td>Osasuna</td>
<td>Club Atlético Osasuna</td>
<td>1920</td>
<td>20000000</td>
<td>F. J. Izco</td>
<td>Estadio de El Sadar, c/ de El Sadar s/n 31006 Pamp</td>
<td>http://www.osasuna.es</td>
</tr>
<tr>
<td>Racing</td>
<td>Real Racing Club Santander, SAD</td>
<td>1913</td>
<td>27000000</td>
<td>Manuel Huerta Castillo</td>
<td>Calle Real Racing Club, s/n 39005 Santander</td>
<td>http://www.realracingclub.es</td>
</tr>
<tr>
<td>R. Sociedad</td>
<td>Real Sociedad, SAD</td>
<td>1909</td>
<td>37150943</td>
<td>Miguel Fuentes</td>
<td>Paseo de Anoeta, 1 20014 San Sebastián</td>
<td>http://www.realsociedad.com</td>
</tr>
<tr>
<td colspan="7">
<table>
<tbody>
<tr>
<td>1</td>
<td><a>2</a></td>
<td><a>3</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>

Con esto obtenemos esta tabla…

Analizando un poco la estructura de esta tabla vemos que crea una tabla con un header y, en el caso de que hayamos solicitado paginación, otra tabla en la última fila en la que mete los enlaces de paginación. Vamos con el estilo…

En primer lugar, vamos a crear tres clases para dar estilo a la tabla, una para dar estilo al header (gridViewHeader), otra a la paginación (gridViewPaginacion) y otra para el contenido (gridView).

Vamos ahora a escribir los estilos. En primer lugar el estilo para la clase gridView

/*Estilo general para el gridView*/
.gridView {
margin:0 auto;
font-size:11px;
text-align:center;
border:hidden;
}
/*Selecciona las filas pares y las colorea*/
.gridView tr:nth-child(even)
{
background-color: #a9c673;
}
/*Selecciona las filas impares y las colorea*/
.gridView tr:nth-child(odd)
{
background-color: #fff;
}
/*Estilo para las casillas del gridView*/
.gridView td {
padding-left:3px;
padding-right:3px;
border:hidden;
}

Con este código coloreamos las filas, damos un tamaño de letra, centramos la tabla y quitamos los bordes. El resultado…

Vamos ahora con el estilo para la paginación.

/*Color de fondo para la paginación*/

.gridViewPaginacion td {
background-color:#435B14;
}

/*Bordes redondeados para la paginacion*/

.gridViewPaginacion > td{
border-radius:0px 0px 5px 5px;
}

/*Centramos la tabla que contiene los enlaces para las paginas*/

.gridViewPaginacion table {
margin:2px auto;
}

/*El span representa el enlace a la pagina en la que estamos actualmente*/

.gridViewPaginacion span {
display:block;
margin:0;
padding:5px;
width:18px;
height:18px;
border-radius:50% 50%;
background:#B1C689;
color:#3743a1;
}

/*Estilo para los enlaces redondos*/

.gridViewPaginacion a {
display:block;
text-decoration:none;
margin:0;
padding:5px;
width:15px;
height:15px;
border-radius:50% 50%;
background:#367DEE;
color:#fff;
}

.gridViewPaginacion a:hover {
display:block;
margin:0;
padding:5px;
width:18px;
height:18px;
border-radius:50% 50%;
background:#B1C689;
color:#3743a1;
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);

}

Y el resultado…

Por ultimo vamos a dar formato a el header.

.gridViewHeader{
height:35px;
}

.gridViewHeader th {
background-color:#435B14;
padding:5px;
border:hidden;
color:#fff;
}

/*Redondeamos el borde superior izquierdo de la primera casilla del header*/

.gridViewHeader th:first-child {
border-radius:5px 0 0 0;
}

/*Y el borde superior derecho de la ultima casilla*/

.gridViewHeader th:last-child {
border-radius:0 5px 0 0;
}

/*Estilo para los enlaces del header...*/

.gridViewHeader th a {
padding:5px;
text-decoration:none;
color:#435B14;
background-color:#a9c673;
border-radius:5px;

}

.gridViewHeader th a:hover {
color:#435B14;
background-color:#B1C689;
box-shadow:0 0 .9em rgba(0, 0, 0, .8);
}

Y con esto hemos terminado. Este es el resultado final.

Más que buscar un estilo con un diseño bonito, he intentado analizar la estructura que se genera a partir de un GridView y ver cómo acceder a cada una de las partes de la tabla.

Normalmente es muy útil ocultar cierta información dentro de un GridView que no se muestra pero es muy útil para uso interno de la aplicación. En un post futuro veremos cómo tratar con esos campos ocultos para que no nos den ningún problema con el estilo.

Espero que os haya gustado y agradeceré todos los comentarios que tengais al respecto. Yo soy un aficionado que está empezando y estoy deseando recibir consejos y sugerencias.

Un saludo y hasta la próxima.