Cómo crear una tabla utilizando DIVs y CSS

Estrada Web Group
Administrador
Cómo crear una tabla utilizando DIVs y CSS

html5 divs

Si como lo lees en este artículo te mostraremos como crear una tabla a partir de un div. Todos sabemos cómo crear tablas usando HTML. HTML nos proporciona la etiqueta <table> para facilitarnos el trabajo, pero como muchos saben esta etiqueta se usa cada vez menos. La principal desventaja de usar una estructura de tabla es que no soporta escenarios de resolución. !

Si desea que su página web se vean bien cuando se cambia el tamaño de la pantalla de visualización lo mejor es usar la etiqueta div. Al utilizar la etiqueta <table>, los controles se distorsionan y pierden mucho valor visual.

Voy a mostrar un pequeño código que muestra una tabla de 3 por 3 usando la etiqueta Div.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="HTML5_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>Como crear una tabla con divs</title>
    <style type="text/css">

        .Table

        {

            display: table;

        }

        .Title

        {

            display: table-caption;

            text-align: center;

            font-weight: bold;

            font-size: larger;

        }

        .Heading

        {

            display: table-row;

            font-weight: bold;

            text-align: center;

        }

        .Row

        {

            display: table-row;

        }

        .Cell

        {

            display: table-cell;

            border: solid;

            border-width: thin;

            padding-left: 5px;

            padding-right: 5px;

        }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="Table">

        <div class="Title">

            <p>

                Esta es la tabla</p>

        </div>

        <div class="Heading">

            <div class="Cell">

                <p>

                    Primer Nombre</p>

            </div>

            <div class="Cell">

                <p>

                    Segundo Nombre</p>

            </div>

            <div class="Cell">

                <p>

                    Edad</p>

            </div>

        </div>

        <div class="Row">

            <div class="Cell">

                <p>

                    Juan</p>

            </div>

            <div class="Cell">

                <p>

                    Escutia</p>

            </div>

            <div class="Cell">

                <p>

                    28</p>

            </div>

        </div>

        <div class="Row">

            <div class="Cell">

                <p>

                    Pedro</p>

            </div>

            <div class="Cell">

                <p>

                    Infante</p>

            </div>

            <div class="Cell">

                <p>

                    27</p>

            </div>

        </div>

    </div>
    </form>
</body>
</html>

Espero que el ejemplo te sea de utilidad, por favor envíanos tus comentarios y sugerencias, para nosotros son muy importantes y si quieres que escribamos sobre algún tema en particular háznoslo saber.

Compartir artículo:

Más artículos geniales

Aprende a integrar pagos con PayPal en ASP.NET Core: Credenciales API Sandbox para realizar pagos

Aprende a integrar pagos con PayPal en ASP.NET Core: Credenciales API Sandbox para realizar pagos

En este artículo te mostrare donde puedes obtener las Credenciales API Sandbox para recibir pagos en tu página web desarrollada con ASP.NET Core y explicare los tipos de API que existen en PayPal, además creare unos artículos donde te mostrare como integrar PayPal en tu sitio web ASP.NET Core.

Ver artículo completo
Aprende a integrar pagos con PayPal en ASP.NET Core: Configurar la API REST de PayPal en ASP.NET Core

Aprende a integrar pagos con PayPal en ASP.NET Core: Configurar la API REST de PayPal en ASP.NET Core

En este artículo te enseñare a configurar API REST de PayPal para consumirlo en ASP.NET para recibir pagos en tu página web desarrollada con ASP.NET Core

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