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
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:
| Nombre | Telefono | Telefono |
|---|
| Bill Gates | 555 77 854 | 555 77 855 |
<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:
| Nombre: | Bill Gates |
|---|
| Telefono: | 555 77 854 |
|---|
| Telefono: | 555 77 855 |
|---|
<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
Gastos mensuales| Mes | gastos |
|---|
| January | 100 € |
| February | 50 € |
<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:
| Nombre | Telefono |
|---|
| Bill Gates | 555 77 854 | 555 77 855 |
<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:
| Nombre: | Bill Gates |
|---|
| Telefono: | 555 77 854 |
|---|
| 555 77 855 |
<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
| Esto es un párrafoEsto es otro párrafo | Esta celda contiene una tabla: |
| Esta celda contiene una lista | HOLA |
<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>
