Cómo poner una tabla HTML en tu post o web

Vamos a explicar de manera sencilla, cómo poner una tabla en tu artículo o página web mediante código.

Es muy sencillo insertar tablas en artículos de blog, o páginas web. Algunas páginas web disponen de editores que facilitan la tarea, pero ni todos los editores permiten insertar de manera sencilla tablas, ni todas las páginas web tiene incorporadas editores de texto. Por eso vamos a explicar cómo poner tablas mediante código HTML.

Lo más importante es localizar en tu editor o constructor visual el botón o bloque que te permita insertar código HTML. Una vez localizado, apriétalo, o inserta el bloque de código donde quieras poner la tabla, y copia la tabla de bajo que más se parezca a lo que buscas.

Tabla de dos columnas con tres filas.

Encabezado 1	Encabezado 2
Texto de la fila 1, celda 1	Texto de la fila 1, celda 2
Texto de la fila 2, celda 1	Texto de la fila 2, celda 2
Texto de la fila 3, celda 1	Texto de la fila 3, celda 2

Pon el ratón aquí para desplegar el código de la tabla.

<h3>Tabla</h3>

<table>
  <tbody>
    <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
    </tr>
    <tr>
      <td>Texto de la fila 1, celda 1</td>
      <td>Texto de la fila 1, celda 2</td>
    </tr>
    <tr>
      <td>Texto de la fila 2, celda 1</td>
      <td>Texto de la fila 2, celda 2</td>
    </tr>
    <tr>
      <td>Texto de la fila 3, celda 1</td>
      <td>Texto de la fila 3, celda 2</td>
    </tr>
  </tbody>
</table>

Tabla de tres columnas con tres filas.

Encabezado 1	Encabezado 2	Encabezado 3
Texto de la fila 1, celda 1	Texto de la fila 1, celda 2	Texto de la fila 1, celda 3
Texto de la fila 2, celda 1	Texto de la fila 2, celda 2	Texto de la fila 2, celda 3
Texto de la fila 3, celda 1	Texto de la fila 3, celda 2	Texto de la fila 3, celda 3

Pon el ratón aquí para desplegar el código de la tabla.

<h3>Tabla</h3>

<table>
  <tbody>
    <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
      <th>Encabezado 3</th>
    </tr>
    <tr>
      <td>Texto de la fila 1, celda 1</td>
      <td>Texto de la fila 1, celda 2</td>
      <td>Texto de la fila 1, celda 3</td>
    </tr>
    <tr>
      <td>Texto de la fila 2, celda 1</td>
      <td>Texto de la fila 2, celda 2</td>
      <td>Texto de la fila 2, celda 3</td>
    </tr>
    <tr>
      <td>Texto de la fila 3, celda 1</td>
      <td>Texto de la fila 3, celda 2</td>
      <td>Texto de la fila 3, celda 3</td>
    </tr>
  </tbody>
</table>

Tabla de cuatro columnas con dos filas.

Encabezado 1	Encabezado 2	Encabezado 3	Encabezado 4
Texto de la fila 1, celda 1	Texto de la fila 1, celda 2	Texto de la fila 1, celda 3	Texto de la fila 1, celda 4
Texto de la fila 2, celda 1	Texto de la fila 2, celda 2	Texto de la fila 2, celda 3	Texto de la fila 2, celda 4

Pon el ratón aquí para desplegar el código de la tabla.

<h3>Tabla</h3>

<table>
  <tbody>
    <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
      <th>Encabezado 3</th>
      <th>Encabezado 4</th>
    </tr>
    <tr>
      <td>Texto de la fila 1, celda 1</td>
      <td>Texto de la fila 1, celda 2</td>
      <td>Texto de la fila 1, celda 3</td>
      <td>Texto de la fila 1, celda 4</td>
    </tr>
    <tr>
      <td>Texto de la fila 2, celda 1</td>
      <td>Texto de la fila 2, celda 2</td>
      <td>Texto de la fila 2, celda 3</td>
      <td>Texto de la fila 2, celda 4</td>
    </tr>
  </tbody>
</table>

Tutoriales