Cómo crear una tabla utilizando DIVs y CSS

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.