Tablas en HTML

Curso de HTML

30.  
31.  
33.  
35.  
48.  

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

<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»

Ver código fuente

Ejercicio

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.