Inicia sesión


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>


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-01-25
  • Categorias: Noticias Tutorial CSS3 html5 Html webmasters


Comentarios 1
    1. image
      marjuanm 2019-01-30
      Genial, muchas gracias, me funcionó perfecto.
      Spam


Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Crecimiento mundial en el mercado de software de diseño PCB para el 2020 - 2029

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-13
  • Categorias: Desarrolladores Lenguajes De Programacion Software Noticias Tutorial

Historia de los sistemas operativos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-12
  • Categorias: Microsoft Windows Apple Ordenador Noticias Tutorial Informatica

Vacía tu mente, no tengas forma, ni figura

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-12
  • Categorias: Estilo Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial