Cómo usar DIV en lugar de tablas para un diseño de forma

Escrito por jim campbell | Traducido por elizabeth garay ruiz
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo usar DIV en lugar de tablas para un diseño de forma
El diseño sin tablas HTML reemplazó el diseño de tabla HTML para hacer el código más eficiente. (Hemera Technologies/AbleStock.com/Getty Images)

El diseño sin tablas HTML reemplazó el diseño de tabla HTML para hacer el código más eficiente, fácil de leer y menos propenso a tener errores. Puedes cambiar tus etiquetas de tabla HTML usando la etiqueta div. Las etiquetas div incrustadas actúan como las líneas y columnas de la tabla. Después de que cambies las etiquetas por div, el diseño permanece igual, pero el código es más fácil de manejar si necesitas hacer cambios en el futuro.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Haz clic derecho en la página HTML que contiene la tabla que deseas convertir. Haz clic en "Open With" (Abrir con) y en el editor HTML que quieres usar.

  2. 2

    Encuentra la etiqueta de apertura de la tabla. Inicia la conversión cambiando la tabla de inicio y salida con las etiquetas div correspondientes. El siguiente código es un ejemplo de una tabla con dos columnas y una línea:

    <table> <tr> <td>Data Row #1</td> <td>Data Row #2</td> </tr> </table>

  3. 3

    Cambia las etiquetas de apertura y cierre de la tabla por las etiquetas div. Usando el ejemplo del paso 2, cambiando las etiquetas de la tabla con un contenedor principal div que se ve como sigue:

    <div id="main"> <tr> <td>Data Row #1</td> <td>Data Row #2</td> </tr> </div>

  4. 4

    Cambia las etiquetas de la línea de la tabla con las div incrustadas. Las "tr" representan líneas de etiquetas. El siguiente código muestra la tabla del paso 2 y del 3 con las etiquetas div para las líneas:

    <div id="main"> <div id="rows"> <td>Data Row #1</td> <td>Data Row #2</td> </div> </div>

  5. 5

    Cambia las celdas o columnas de la tabla con las etiquetas incrustadas div finales. El siguiente código completa el cambio de la tabla de ejemplo con las etiquetas div:

    <div id="main"> <div id="rows"> <div id="column1">Data Row #1</div> <div id="column2">Data Row #2</div> </div> </div>

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles