Tablas En DIVs

Esta vez veremos como hacer una tabla (así como la conocemos), pero ahora hecha en Divs (Por eso el titulo: Tablas en Divs).Los Divs se caracterizan por ser agrupadores de contenido independientes. En cambio, las tablas, por tener el contenido bien estructurado.

Muchos quizás no queremos utilizar tablas en nuestros proyectos web, por lo mismo de que son (digamos, que ya no se usan), mas sin embargo nos gustan las ventajas de una tabla, entre la que destaca, el hecho de que los contenido se encuentran a una misma altura con sus filas (tr).

Bueno la estructura de una tabla sería esta:

<table border="1" width="100%" align="center" cellpadding="10px">
    <tr>
        <td>Tutoriales En Linea 1</td>
        <td>Tutoriales En Linea 2</td>
        <td>Tutoriales En Linea 3</td>
    </tr>
    <tr>
        <td>Tutoriales En Linea 1</td>
        <td>Tutoriales En Linea 2</td>
        <td>Tutoriales En Linea 3</td>
    </tr>
</table>

Ver Resultado

Con width="333px"

Propiedad CSS

<div id="contenedor">
    <div id="contenidos">
        <div id="columna1">Tutoriales En Linea 1</div>
        <div id="columna2">Tutoriales En Linea 2</div>
        <div id="columna2">Tutoriales En Linea 3</div>
    </div>
    <div id="contenidos">
        <div id="columna1">Tutoriales En Linea 1</div>
        <div id="columna2">Tutoriales En Linea 2</div>
        <div id="columna2">Tutoriales En Linea 3</div>
    </div>
</div>

Y con CSS:

<style type="text/css">
#contenedor {
    display: table;
    border: 2px solid #000;
    width: 333px;
    text-align: center;
    margin: 0 auto;
}
#contenidos {
    display: table-row;
}
#columna1, #columna2, #columna3 {
    display: table-cell;
    border: 1px solid #000;
    vertical-align: middle;
    padding: 10px;
}
</style>

Nos quedara: Ver Resultado

Esto porque:

El Div con la ID "contenedor”, esta haciendo el papel de la tabla en si (Table), con el estilo: "display: table;”
El Div con la ID "contenido”, esta haciendo el papel de la fila de una tabla (Tr), con el estilo: "display: table-row;”
Los Divs con las IDs "columna1”, "columna2” y "columna3”, están haciendo el papel de las columnas o celdas de una tabla (Td), con el estilo: "display: table-cell;”

Y van a actuar como tal. Porque por ejemplo en un tabla ponemos:

<style type="text/css">
#contenedor {
    display: table;
    border: 2px solid #000;
    width: 333px;
    text-align: center;
    margin: 0 auto;
}
#contenidos {
    display: table-row;
}
#columna1, #columna2, #columna3 {
    display: table-cell;
    border: 1px solid #000;
    vertical-align: middle;
    padding: 10px;
}
</style>
<body>
 
<center>
<table border="1" width="300px" align="center" cellpadding="10px">
    <tr>
        <span style="color: #00ff00;"><td>Columna 1<br>Columna 1<br>Columna 1<br>Columna 1</td></span>
        <td>Columna 2</td>
        <td>Columna 3</td>
    </tr>
    <tr>
        <span style="color: #00ff00;"><td>Columna 1<br>Columna 1<br>Columna 1<br>Columna 1</td></span>
        <td>Columna 2</td>
        <td>Columna 3</td>
    </tr>
</table>

Lo que nos saldrá: Ver resultado

Y en los Divs:

<div id="contenedor">
    <div id="contenidos">
        <div id="columna1">Tutoriales En Linea 1<br>Columna 1<br>Columna 1<br>Columna 1</div>
        <div id="columna2">Tutoriales En Linea 2</div>
        <div id="columna3">Tutoriales En Linea 3</div>
    </div>
    <div id="contenidos">
        <div id="columna1">Tutoriales En Linea 1<br>Columna 1<br>Columna 1<br>Columna 1</div>
        <div id="columna2">Tutoriales En Linea 2</div>
        <div id="columna3">Tutoriales En Linea 3</div>
        </div>
</div>

Lo que también nos saldrá: Ver Resultado

Otro Ejemplo: Ver Resultado

<!doctype html>
<html>
<head>
<style>
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#customers td, #customers th {
    border: 1px solid #ddd;
    text-align: left;
    padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2}

#customers tr:hover {background-color: #ddd;}

#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: #4CAF50;
    color: white;
}
</style>
</head>
<body>

<table id="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
</table>
</body>
</html>

Propiedad CSS

Artículos Relacionados

Comentarios