como hacer una tabla en html

La creación de tablas en HTML es una habilidad fundamental para cualquier desarrollador web. Una tabla es una herramienta visual que permite presentar información de manera organizada y fácil de leer.

En este artículo, aprenderás paso a paso a como crear una. Desde la estructura básica hasta técnicas avanzadas para personalizar el diseño.

Paso 1: Crea un elemento table en tu código HTML

Las tablas en html se definen con la etiqueta table, este elemento marca el inicio de tu tabla y es la etiqueta principal alrededor del cual todos los demás elementos serán agregados.

Copiarhtml
<table></table>

Paso 2: Agrega filas a tu tabla utilizando el elemento tr

La etiqueta tr define una fila dentro de una tabla. Puedes tener varias filas en una sola tabla. Para agregar una fila, debes abrir y cerrar un elemento tr dentro de tu elemento table.

Copiarhtml
<table>
  <tr></tr>
</table>

Paso 3: Agrega celdas a tus filas utilizando el elemento td

La etiqueta td define una celda en tu tabla. Cada celda representa una columna de una fila. Para agregar celdas a una fila, debes abrir y cerrar elementos td dentro de un elemento tr.

Copiarhtml
<table>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
</table>

Paso 4: Agrega encabezados a tus celdas utilizando el elemento th

La etiqueta th define un encabezado de columna. Este elemento es opcional pero puede ser útil para describir el contenido de las celdas. Para agregar encabezados a tu tabla, debes agregar elementos th dentro de un elemento tr en la primera fila de tu tabla.

Copiarhtml
<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
</table>

Paso 5: Agrega estilo a tu tabla utilizando CSS

Puedes personalizar el aspecto de tu tabla utilizando estilos en CSS. Por ejemplo, puedes establecer bordes, colores de fondo, alineaciones de texto, entre otros.

Copiarhtml
<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
</table>

Copiarcss
table {
  border: 1px solid black;
  width: 100%;
  text-align: center;
}

td {
  background-color: #dddddd;
  padding: 8px;
}

Con esto, ya tendríamos una tabla completa en HTML con estilos aplicados mediante CSS. Es importante mencionar que existen muchas más etiquetas y diferentes estructuras que se pueden agregar a una tabla html.

Si quieres más continuar aprendiendo acerca de tablas en html puedes visitar los siguientes enlaces:

• Cómo centrar tabla en html
• Documentación MDN