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:
| 100 | 200 | 300 |
| 400 | 500 | 600 |
[html]
<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>
[/html]
Esta otra tabla tampoco tiene bordes:
| 100 | 200 | 300 |
| 400 | 500 | 600 |
[html]
<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>
[/html]
Tabla con encabezados
Encabezados en las tablas:
| Nombre | Telefono | Telefono |
|---|---|---|
| Bill Gates | 555 77 854 | 555 77 855 |
[html]
<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>
[/html]
Encabezados verticales:
| Nombre: | Bill Gates |
|---|---|
| Telefono: | 555 77 854 |
| Telefono: | 555 77 855 |
[html]
<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>
[/html]
Tabla con un título, caption
| Mes | gastos |
|---|---|
| January | 100 € |
| February | 50 € |
[html]
<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>
[/html]
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 |
[html]
<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>
[/html]
Celdas que ocupan dos filas:
| Nombre: | Bill Gates |
|---|---|
| Telefono: | 555 77 854 |
| 555 77 855 |
[html]
<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>
[/html]
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 |
[html]
<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>
[/html]
Relleno de celda, cellpadding
Sin cellpadding:
| Primera | Fila |
| Segunda | Fila |
[html]
<h4>Sin cellpadding:</h4>
<table border="1">
<tr>
<td>Primera</td>
<td>Fila</td>
</tr>
<tr>
<td>Segunda</td>
<td>Fila</td>
</tr>
</table>
[/html]
Con cellpadding:
| Primera | Fila |
| Segunda | Fila |
[html]
<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>
[/html]
Espaciado entre celdas, cellspacing
Sin cellspacing:
| Primera | Fila |
| Segunda | Fila |
[html]
<h4>Sin cellspacing:</h4>
<table border="1">
<tr>
<td>Primera</td>
<td>Fila</td>
</tr>
<tr>
<td>Segunda</td>
<td>Fila</td>
</tr>
</table>
[/html]
Con cellspacing:
| Primera | Fila |
| Segunda | Fila |
[html]
<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>
[/html]
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»:
| Primera | Fila |
| Segunda | Fila |
[html]
<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>
[/html]
Con frame=»box»:
| Primera | Fila |
| Segunda | Fila |
[html]
<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>
[/html]
Con frame=»void»:
| Primera | Fila |
| Segunda | Fila |
[html]
<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>
[/html]
Con frame=»above»:
| Primera | Fila |
| Segunda | Fila |
[html]
<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>
[/html]
Con frame=»below»:
| Primera | Fila |
| Segunda | Fila |
[html]
<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>
[/html]
Con frame=»hsides»:
| Primera | Fila |
| Segunda | Fila |
[html]
<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>
[/html]
Con frame=»vsides»:
| Primera | Fila |
| Segunda | Fila |
[html]
<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>
[/html]
con frame=»lhs»:
| Primera | Fila |
| Segunda | Fila |
[html]
<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>
[/html]
Con frame=»rhs»:
| Primera | Fila |
| Segunda | Fila |
[html]
<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>
[/html]
