Changing Column Width

Ahora que has usado correctamente la semántica podrías querer cambiar la anchura de cada columna - ahora, cada columna es un 33% de ancho. Digamos que queremos que la primera columna sea el 40% de la tabla y las dos que quedan sean del 30% (ya que 40% + 30% +30% = 100%).

Para ello usamos el elemento <col> element. Este elemento hay que ubicarlo entre la etiqueta <table> y la etiqueta <thead> y usamos el atributo de estilo para definir el ancho de las columnas. El elemento <col> no necesita etiqueta de cierre y necesitas uno para cada columna de tu tabla. Veamos un ejemplo:

<table border="1" width="100%">
	<col style="width:40%">
	<col style="width:30%">
	<col style="width:30%">
	<thead>
	<tr>
		<th>Fruits</th>
		<th>Vitamin A</th>
		<th>Vitamin C</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th>Apples</th>
		<td>98 ui</td>
		<td>8.4 mg</td>
	</tr>
	<tr>
		<th>Oranges</th>
		<td>295 ui</td>
		<td>69.7 mg</td>
	</tr>
	<tr>
		<th>Bananas</th>
		<td>76 ui</td>
		<td>10.3 mg</td>
	</tr>
	</tbody>
</table>

De esta forma, puedes controlar la anchura de cada columna. He usado el atributo de estilo y el valor "width:40%" como ejemplo, pero lo ideal es que pongas esto en tu hoja de estilos, ya que tiene que ver totalmente con el aspecto, y no con la semántica.

Si usas tu hoja de estilos podrías crear tres clases donde definir la anchura de cada columna, y entonces tu etiquetado se parecerá a esto:

<table border="1">
	<col class="column-one">
	<col class="column-two">
	<col class="column-three">
	<thead>
	<tr>
		<th>Fruits</th>
		<th>Vitamin A</th>

Lo que has aprendido

• Toda tabla comienza y acaba con el elemento <table>
• Para unir celdas se usan los atributos colspan y rowspan .
• Una tabla se divide en cabecera (elemento <thead>) y cuerpo (el elemento <tbody> )
• Dentro de la cabecera y el cuerpo, la tabla se divide en filas mediante el elemento <tr>
• No se definen columnas en las tablas HTML, sino que en su lugar se utiliza el elemento <td> para definir individualmente cada celda de datos.
• Siempre que necesites definir una celda de la cabecera, utiliza el elemento <th> en lugar del elemento <td>.