Programación

Generar Tablas en formato HTML: Fácil y Rápido

Publicado el 5 de junio de 2019 · Niwo

Crear tablas en formato HTML puede ser tedioso, incluso para quienes tienen conocimientos de código, debido a la complejidad de su estructura. Sin embargo, con TablesGenerator.com, generar tablas es fácil y rápido sin necesidad de instalar ningún programa.

A continuación, te mostraré algunas de sus funciones que considero sumamente interesantes y útiles en muchos casos.

Tabla de Contenido

Generador de Tablas HTML

Como puedes ver, esta es una tabla sencilla. El código HTML para lograr este resultado sería un poco más complicado:

HTML: html

Como puedes observar, el código es mucho más extenso y complejo que la tabla resultante. Con TablesGenerator, podemos lograr lo mismo de forma visualmente más sencilla. Crear una tabla HTML no es difícil en sí misma; solo requiere conocer las etiquetas <tr> (filas) y <th> (encabezados), pero si buscas agilizar el proceso, esta herramienta es mucho más eficiente, especialmente cuando necesitas generar especificaciones.

Tablas en formato HTML con estilos CSS

Una ventaja adicional es que antes de generar el código HTML, puedes elegir si quieres incluir estilos CSS. Si optas por esto, el código cambia ligeramente al agregar los estilos:

HTML:

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
</style>
<table class="tg">
  <tr>
    <th class="tg-0pky">Tabla de Contenido</th>
    <th class="tg-0pky">Tecniwao</th>
  </tr>
  <tr>
    <td class="tg-0pky">Esta es una tabla</td>
    <td class="tg-0pky">Sencilla Generada con </td>
  </tr>
  <tr>
    <td class="tg-0pky">HTML</td>
    <td class="tg-0pky">Table Generator</td>
  </tr>
</table>

Aunque el código es más extenso debido a la inclusión de los estilos CSS, la estructura básica sigue siendo la misma. Puedes comparar este código con el anterior para apreciar las diferencias.

Si te interesa utilizar esta herramienta, aquí tienes el enlace:

HTML Table Generator - Pagina Web

¿Necesitas generar tablas en formato Markdown? Prueba nuestro Generador de Tablas Markdown.