Tablas en HTML

Curso de HTML

6.  
16.  
17.  
23.  
32.  
34.  
36.  
37.  
38.  
40.  
45.  
46.  
47.  
52.  
54.  
56.  
59.  

Contactar con el profesor

<table border="1px">
	<tr>
		<td>La celda</td>
	</tr>
</table>
  • La etiqueta td (d de data) no formatea por defecto su contenido.
  • La etiqueta th (h de head), centra el contenido de la celda y lo pone en negrita. Es un atajo para poner encabezados.

Ejercicios

Ejercicio tabla

Ejercicios colspan rowspan

Los siguientes atributos se añaden a la celda, no a la fila:

  • colspan=”2″ : Inserta una celda vacía y la une a la celda a la que le hemos puesto el atributo.
  • rowspan=”2″: Inserta una celda vacía y la une a la celda a la que le hemos puesto el atributo.

Ejercicio Picasso

tbody, thead, tfoot

  • Usamos tbody cuando deseamos que una tabla tenga múltiples cuerpos.
  • tbody debe usarse junto con thead y tfoot.
<table border="1" >
	<thead>
		<tr>
			<th>Elementos</th><th>de</th><th>la</th><th>cabecera</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Y</th><th>elementos</th><th>del</th><th>pie</th>
		</tr>
	</tfoot>

	<tbody>
		<tr>
			<td>1</td><td>bla bla</td><td>blep</td><td>blep</td>
		</tr>
		<tr>
			<td>2</td><td>bla bla</td><td>bla</td><td>bla</td>
		</tr>
		<tr>
			<td>3</td><td>bura bura</td><td>bla</td><td>bura bura</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td>4</td><td>blep blep</td><td>Ok</td><td>Ok</td>
		</tr>
		<tr>
			<td>5</td><td>blip blip</td><td>Ok</td><td>Ok</td>
		</tr>
	</tbody>
</table>

Usando colgroup

<table border="1" >
	<caption>T&iacute;tulo de la tabla</caption>
		<colgroup ></colgroup>
		<colgroup></colgroup>
		<colgroup></colgroup>
		<colgroup style="background-color:green"></colgroup>

		<thead>
			<tr>
				<th>Elementos</th><th>de</th><th>la</th><th>cabecera</th>
			</tr>
		</thead>

		<tfoot>
			<tr>
				<th>Y</th><th>elementos</th><th>del</th><th>pie</th>
			</tr>
		</tfoot>

		<tbody>
			<tr>
				<td>1</td><td>bla bla</td>
				<td>blep</td><td>blep</td>
			</tr>
			<tr>
				<td>2</td><td>bla bla</td><td>bla</td><td>bla</td>
			</tr>
			<tr>
				<td>3</td><td>bura bura</td><td>bla</td><td>bura bura</td>
			</tr>
		</tbody>

		<tbody>
			<tr>
				<td>4</td><td>blep blep</td><td>Ok</td><td>Ok</td>
		</tr>
		<tr>
			<td>5</td><td>blip blip</td><td>Ok</td><td>Ok</td>
		</tr>
		</tbody>
</table>

Usando rules=”groups”

Usando rules group

Ejercicio

← Ejercicio etiquetas básicas de HTML
Hacer una newsletter con HTML →

Aviso Legal | Política de privacidad