¿Cómo dar estilo a un GridView con CSS para la interfaz de usuario?

Estrada Web Group
Administrador
¿Cómo dar estilo a un GridView con CSS para la interfaz de usuario?

GridView, Css, Developer, desarrollo web

En la gran mayoría de sitios web se utilizan los GridView y para presentarlo a los usuarios finales, el GridView debe tener un buen formato estético, por eso en este artículo te mostrare como poner un estilo css a un GridView.

 

Podemos utilizar las hojas de estilo en cascada para dar formato al control GridView. El siguiente ejemplo muestra cómo se puede formatear el control GridView utilizando hojas de estilo en cascada. Encuentra el código fuente a continuación:

HTML:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="GridViewCss_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>GridView con estilo css</title>
    <link href="Estilo.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" GridLines="None"
                AllowPaging="true" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
                PageSize="7" >
                <Columns>
                    <asp:BoundField DataField="EmpId" HeaderText="ID" />
                    <asp:BoundField DataField="Name" HeaderText="Nombre" />
                    <asp:BoundField DataField="Address" HeaderText="Dirección" />
                    <asp:BoundField DataField="Date" HeaderText="Fecha" />
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>

CSS:

* {
    padding: 0;
    margin: 0;
}

body {
    font: 11px Tahoma;
}

h1 {
    font: bold 32px Times;
    color: #666;
    text-align: center;
    padding: 20px 0;
}

#container {
    width: 700px;
    margin: 10px auto;
}

.mGrid {
    width: 100%;
    background-color: #fff;
    margin: 5px 0 10px 0;
    border: solid 1px #525252;
    border-collapse: collapse;
}

    .mGrid td {
        padding: 2px;
        border: solid 1px #c1c1c1;
        color: #717171;
    }

    .mGrid th {
        padding: 4px 2px;
        color: #fff;
        background: #424242 url(grd_head.png) repeat-x top;
        border-left: solid 1px #525252;
        font-size: 0.9em;
    }

    .mGrid .alt {
        background: #fcfcfc url(grd_alt.png) repeat-x top;
    }

    .mGrid .pgr {
        background: #424242 url(grd_pgr.png) repeat-x top;
    }

        .mGrid .pgr table {
            margin: 5px 0;
        }

        .mGrid .pgr td {
            border-width: 0;
            padding: 0 6px;
            border-left: solid 1px #666;
            font-weight: bold;
            color: #fff;
            line-height: 12px;
        }

        .mGrid .pgr a {
            color: #666;
            text-decoration: none;
        }

            .mGrid .pgr a:hover {
                color: #000;
                text-decoration: none;
            }

VB.NET

Imports System.Data

Partial Class GridViewCss_Default
    Inherits System.Web.UI.Page
    Private Sub BindData()
        Dim dt As New DataTable()
        dt.Columns.Add("EmpId", GetType(Integer))
        dt.Columns.Add("Name", GetType(String))
        dt.Columns.Add("Address", GetType(String))
        dt.Columns.Add("Date", GetType(DateTime))
        '
        ' Here we add five DataRows.
        '
        dt.Rows.Add(25, "José", "México", DateTime.Now)
        dt.Rows.Add(50, "Fransua Meme", "Francia", DateTime.Now)
        dt.Rows.Add(10, "Ruben", "España", DateTime.Now)
        dt.Rows.Add(21, "Aditya", "Italia", DateTime.Now)
        dt.Rows.Add(100, "Jhon", "Inglaterra", DateTime.Now)
        dt.Rows.Add(101, "ABC", "Delhi", DateTime.Now)
        dt.Rows.Add(102, "XYZ", "Noida", DateTime.Now)
        dt.Rows.Add(103, "BBC", "Delhi", DateTime.Now)
        dt.Rows.Add(104, "CIA", "Banglore", DateTime.Now)
        dt.Rows.Add(105, "KBC", "Delhi", DateTime.Now)
        dt.Rows.Add(106, "Jack", "Noida", DateTime.Now)
        dt.Rows.Add(107, "Jhon", "Gurgaon", DateTime.Now)
        dt.Rows.Add(108, "Mali", "Gurgaon", DateTime.Now)
        dt.Rows.Add(109, "Sara", "Noida", DateTime.Now)
        GridView1.DataSource = dt
        GridView1.DataBind()
    End Sub

    Protected Sub GridView1_PageIndexChanging(sender As Object, e As GridViewPageEventArgs) Handles GridView1.PageIndexChanging
        GridView1.PageIndex = e.NewPageIndex
        BindData()
    End Sub

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        BindData()
    End Sub
End Class

Si tienes comentarios o dudas puedes escribirme en el apartado de comentarios, tus comentarios nos ayudan a mejorar y a enriquecer el sitio web. Gracias por leernos J.

Para descargar el ejemplo lo puedes hacer aquí.

 

Compartir artículo:

Más artículos geniales

Kestrel el servidor web para ASP.NET Core

Kestrel el servidor web para ASP.NET Core

En este tutorial, veremos el servidor web Kestrel para ASP.NET Core. La forma en que alojamos nuestra aplicación en ASP.NET Core ha sufrido cambios drásticos con la versión anterior de ASP.NET

Ver artículo completo
Aprende a integrar pagos con PayPal en ASP.NET Core: Crear el proyecto web ASP.NET Core

Aprende a integrar pagos con PayPal en ASP.NET Core: Crear el proyecto web ASP.NET Core

En este artículo creare el proyecto ASP.NET Core para integrar PayPal y solicitar pagos en mi sitio web.

Ver artículo completo
Maquetar nuestra página con CSS y Divs

Maquetar nuestra página con CSS y Divs

La maquetación con CSS y Divs es el tipo de maquetación más utilizado en la actualidad en las páginas web. En la edad de piedra se maquetaba con tablas, práctica que no recomiendo en absoluto.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla