Html

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

13 febrero, 2011
html

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