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.

Artículos relacionados
Desarrollo de un Sistema de Inventarios con ASPNET MVC Parte 7 (Panel de Control)
Desarrollo de un Sistema de Inventarios con ASPNET MVC Parte 7 (Panel de Control)

Desarrollo de un Sistema de Inventarios con AS

Cómo agregar videos de YouTube a tu página web con ASP.NET
Cómo agregar videos de YouTube a tu página web con ASP.NET

Para todos aquellos que necesitan agregar vide

Cómo crear un inicio de sesión y registro usando jQuery y CSS en asp.net
Cómo crear un inicio de sesión y registro usando jQuery y CSS en asp.net

En este artículo voy a crear un ejemplo para e

8 Comentarios
  • Félix Comentar
    lunes, 9 de febrero de 2015

    Muchas gracias, estoy aprendiendo a diseñar páginas web y este artículo me ha sido muy útil.

    • Estrada WebGroupComentar
      miércoles, 11 de febrero de 2015

      Hola Felix, que bueno que te ha servido el artículo, en estos apartados puedes encontrar más información http://developerji.com/Categoria/ASP.NET/2 http://developerji.com/Categoria/CSS/1013 Saludos

  • isaias Comentar
    domingo, 1 de marzo de 2015

    excelente informe, me sirvió mucho. gracias.

    • Estrada WebGroupComentar
      lunes, 2 de marzo de 2015

      Que bueno que te fue de utilidad Isaias, cualquier duda o sugerencia es bien recibida. Estamos a tus ordenes

  • Blanca Duarte Comentar
    martes, 3 de marzo de 2015

    Excelente material

    • Estrada WebGroupComentar
      martes, 3 de marzo de 2015

      Hola Blanca Duarte, que bueno que te fue de utilidad el artículo. Saludos y te esperamos pronto por aquí. Estrada WebGroup

  • Christian Comentar
    jueves, 30 de abril de 2015

    Hola, el ejemplo es muy bueno porque es simple y se entiende como usar los DIVs en tablas. Aclaracion aparte, es un tema usar "table-cell", "table-row", etc, ya que no lo soporta el IE anterior al 9. Logicamente que el IE6 al 8, son super-prehistoricos, pero aunque cueste creerlo todavia hay quien tiene un xp y los usa.

  • Victor Hugo Comentar
    miércoles, 9 de marzo de 2016

    Claro y conciso, no deja lugar a dudas.

  • Gendron Comentar
    martes, 6 de marzo de 2018

    I have checked your site and i have found some duplicate content, that's why you don't rank high in google, but there is a tool that can help you to create 100% unique articles, search for: Best article rewritwer Ercannou's essential tools

  • Felipe Comentar
    lunes, 11 de marzo de 2019

    Me ha servido mucho este articulo, pero me llama la atención el termino "escenarios de resolución". Sera que te refieres a las modificaciones que se hacen por CSS? Actualmente tengo una problemática con respecto a la resolución, es decir, cuando se agranda esta tabla hecha con DIV por tener mas columnas, estas se van alineando en la linea siguiente por lo cual se pierde el concepto de tabla. Saludos!

  • Felipe Comentar
    lunes, 11 de marzo de 2019

    Me ha servido mucho este articulo, pero me llama la atención el termino "escenarios de resolución". Sera que te refieres a las modificaciones que se hacen por CSS? Actualmente tengo una problemática con respecto a la resolución, es decir, cuando se agranda esta tabla hecha con DIV por tener mas columnas, estas se van alineando en la linea siguiente por lo cual se pierde el concepto de tabla. Saludos!

    • JoséComentar
      lunes, 11 de marzo de 2019

      Gracias por tus comentarios Felipe, los escenarios de resolución me refiero a las diferentes resoluciones de pantalla, si gustas puedo ver cual es tu problema enviandome un correo con el código e imagen de la evidencia para buscar una solución más rapida. Si gustas puedes escribirme a info@estradawebgroup.com. Saludos

Enviame un comentario