¿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

Aprender a programar un sistema para administrar archivos en línea con ASP.NET Core

Aprender a programar un sistema para administrar archivos en línea con ASP.NET Core

Si quieres aprender a programar con ASP.NET Core, puedes consultar tres videos que publique en YouTube, sobre un sistema para administrar archivos en línea que desarrolle.

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