¿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

Aprende a programar un Sistema de Inventarios con net core y sql server

Aprende a programar un Sistema de Inventarios con net core y sql server

Resumen: Este es el primer artículo y video para aprender a programar con ASP.NET Core y base de datos SQL Server con un sistema de inventarios, en esta primera entrega aprenderás a diseñar una base de datos SQL Server relacional.

Ver artículo completo
Implementación de un formulario en ASP.NET Core

Implementación de un formulario en ASP.NET Core

Con este artículo, puedes aprender a crear un formulario web en ASP.NET Core, diseñar su interfaz gráfica con HTML y CSS, validar los datos ingresados por el usuario tanto en el lado del cliente como en el lado del servidor, y enviar los datos a través de una solicitud HTTP

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