Html

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

13 febrero, 2011

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:

100 200 300
400 500 600
<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:

100 200 300
400 500 600
<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:

A B
C D
Esta celda contiene una lista

  • manzanas
  • platanos
  • naranjas
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:

Primera Fila
Segunda Fila
<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:

Primera Fila
Segunda Fila
<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:

Primera Fila
Segunda Fila
<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:

Primera Fila
Segunda Fila
<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”:

Primera Fila
Segunda Fila
<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”:

Primera Fila
Segunda Fila
<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”:

Primera Fila
Segunda Fila
<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”:

Primera Fila
Segunda Fila
<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”:

Primera Fila
Segunda Fila
<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”:

Primera Fila
Segunda Fila
<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”:

Primera Fila
Segunda Fila
<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”:

Primera Fila
Segunda Fila
<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”:

Primera Fila
Segunda Fila
<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>

También podría gustarte

1 Comentario

Dejar un Comentario