Manual HTML: Cómo crear y hacer tablas en HTML (con ejemplos prácticos)

Ejemplos prácticos para realizar ejercicios de tablas con Html. Veremos tablas con bordes, tablas sin bordes, como poner un título a una tabla con la itiqueta caption, como combinar celdas en una tabla, tanto por filas como por columnas, como rellenar es espacio entre celdas, colorear celdas o tablas, … , son muchas las posibilidades que tenemos y no hay nada como prácticar.

• Tablas sin bordes
  Cómo crear tablas sin bordes.
• Tabla con encabezados
  Cómo crear encabezados de tabla.
• Tabla con un título, caption
  Cómo agregar un título a una tabla.
• Tabla celdas que abarcan más de una fila o columna
  Cómo combinar celdas de una tabla.
• Etiquetas dentro de una tabla
  Cómo mostrar los elementos dentro de otros elementos.
• Relleno de celda, cellpadding
  Cómo utilizar cellpadding para crear más espacio en blanco entre el contenido de la celda y sus bordes.
• Espaciado entre celdas, cellspacing
  Cómo utilizar cellspacing para aumentar la distancia entre las células.
• El atributo frame en una tabla
  Cómo utilizar el atributo “frame” para el control de los bordes de una tabla

Tablas sin bordes

Esta tabla no tiene bordes:

<h4>Esta tabla no tiene bordes:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

Esta otra tabla tampoco tiene bordes:

<h4>Esta otra tabla tampoco tiene bordes:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

Tabla con encabezados

Encabezados en las tablas:

<h4>Encabezados en las tablas:</h4>
<table border="1">
<tr>
 <th>Nombre</th>
 <th>Telefono</th>
 <th>Telefono</th>
</tr>
<tr>
 <td>Bill Gates</td>
 <td>555 77 854</td>
 <td>555 77 855</td>
</tr>
</table>

Encabezados verticales:

<h4>Encabezados verticales:</h4>
<table border="1">
<tr>
 <th>Nombre:</th>
 <td>Bill Gates</td>
</tr>
<tr>
 <th>Telefono:</th>
 <td>555 77 854</td>
</tr>
<tr>
 <th>Telefono:</th>
 <td>555 77 855</td>
</tr>
</table>

Tabla con un título, caption

<table border="1">
 <caption>Gastos mensuales</caption>
 <tr>
 <th>Mes</th>
 <th>gastos</th>
 </tr>
 <tr>
 <td>January</td>
 <td>100 €</td>
 </tr>
 <tr>
 <td>February</td>
 <td>50 €</td>
 </tr>
</table>

Tabla celdas que abarcan más de una fila o columna

Celdas que ocupan dos columnas:

<h4>Celdas que ocupan dos columnas:</h4>
<table border="1">
<tr>
 <th>Nombre</th>
 <th colspan="2">Telefono</th>
</tr>
<tr>
 <td>Bill Gates</td>
 <td>555 77 854</td>
 <td>555 77 855</td>
</tr>
</table>

Celdas que ocupan dos filas:

<h4>Celdas que ocupan dos filas:</h4>
<table border="1">
<tr>
 <th>Nombre:</th>
 <td>Bill Gates</td>
</tr>
<tr>
 <th rowspan="2">Telefono:</th>
 <td>555 77 854</td>
</tr>
<tr>
 <td>555 77 855</td>
</tr>
</table>

Etiquetas dentro de una tabla

<table border="1">
<tr>
 <td>
 <p>Esto es un párrafo</p>
 <p>Esto es otro párrafo</p>
 </td>
 <td>Esta celda contiene una tabla:
 <table border="1">
 <tr>
 <td>A</td>
 <td>B</td>
 </tr>
 <tr>
 <td>C</td>
 <td>D</td>
 </tr>
 </table>
 </td>
</tr>
<tr>
 <td>Esta celda contiene una lista
 <ul>
 <li>manzanas</li>
 <li>platanos</li>
 <li>naranjas</li>
 </ul>
 </td>
 <td>HOLA</td>
</tr>
</table>

Relleno de celda, cellpadding

Sin cellpadding:

<h4>Sin cellpadding:</h4>
<table border="1">
<tr>
 <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</tr>
</table>

Con cellpadding:

<h4>Con cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
 <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</tr>
</table>

Espaciado entre celdas, cellspacing

Sin cellspacing:

<h4>Sin cellspacing:</h4>
<table border="1">
<tr>
 <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</tr>
</table>

Con cellspacing:

<h4>Con cellspacing:</h4>
<table border="1"
cellspacing="10">
<tr>
 <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</tr>
</table>

El atributo frame en una tabla

Nota: Si no ves los bordes¡marcos alrededor de la tabla es que tu navegador no los soporta, no soporta el atributo “frame”

Con frame=”border”:

<h4>Con frame="border":</h4>
<table frame="border">
<tr>
 <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</tr>
</table>

Con frame=”box”:

<h4>Con frame="box":</h4>
<table frame="box">
<pre><tr>
 <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</tr>
</table></pre>

Con frame=”void”:

<h4>Con frame="void":</h4>
<table frame="void">
<tr>
<td>Primera</td>
 <td>Fila</td>
 </tr>
 <tr>
 <td>Segunda</td>
 <td>Fila</td>
</pre>
</tr>
</table>

Con frame=”above”:

<h4>Con frame="above":</h4>
<table frame="above">
<tr>
 <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</tr>
</table>

Con frame=”below”:

<h4>Con frame="below":</h4>
<table frame="below">
<tr>
<pre> <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</pre>
</tr>
</table>

Con frame=”hsides”:

<h4>Con frame="hsides":</h4>
<table frame="hsides">
<tr>
<pre> <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</pre>
</tr>
</table>

Con frame=”vsides”:

<h4>Con frame="vsides":</h4>
<table frame="vsides">
<tr>
<pre> <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</pre>
</tr>
</table>

con frame=”lhs”:

<h4>con frame="lhs":</h4>
<table frame="lhs">
<tr>
<pre> <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</pre>
</tr>
</table>

Con frame=”rhs”:

<h4>Con frame="rhs":</h4>
<table frame="rhs">
<tr>
<pre> <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</pre>
</tr>
</table>