HTML Taboas

Etiquetas de estrutura de datos en filas e columnas

Unha taboa HTML definese coa <table>etiqueta. Cada fila da taboa definese coa <tr>etiqueta. Un encabezado da taboa definese coa <th>etiqueta. Por defecto, encabezados da taboa están en negrita e centrado. Os datos / celda da taboa definense coa <td> etiqueta e poden conter todo tipo de elementos HTML; texto, imaxes, listas, outras taboas, etc...

Etiqueta	Descrición
<table>	Define unha taboa
<th>	Define unha celda de encabezado nunha taboa
<tr>	Define fila nunha taboa
<td>	Define unha celda nunha taboa
<caption>	Define un título de taboa
<colgroup>	Especifica un grupo dunha ou máis columnas nunha taboa para formatear
<col>	Especifica as propiedades de columna para cada columna dentro dun elemento `<colgroup>`
<thead>	Agrupa o contido do encabezado nunha taboa.
<tbody>	Agrupa o contido do corpo nunha taboa.
<tfoot>	Agrupa o contido do pe de páxina nunha táboa.

Nota: A etiqueta <caption> define un título da tábao e debe insertarse inmediatamente despois da <table> etiqueta. Só se pode especificar unha lenda (título) por taboa.

O atributo scope

O atributo scope especifica se unha celda de encabezado é unha cabeceira dunha columna, fila ou grupo de columnas ou filas. O atributo scope non ten ningún efecto visual nos navegadores web normais, pero pode ser utilizado polos lectores de pantalla.

Encabezado Superior
Título	Título	Título
texto	texto	texto
texto	texto	texto

Encabezado esquerda
Título	texto	texto
Título	texto	texto
Título	texto	texto

Encabezado Ambos
Título	Título	Título
Título	texto	texto
Título	texto	texto

Sen Encabezado
texto	texto	texto
texto	texto	texto
texto	texto	texto

O atributo colspan e rowspan

O atributo colspan define O número de columnas dunha celda que debe ocupar ó espandirense as celdas, é o atributo rowspan que especifica o número de filas dunha celda que debe ocupar. Sólo se escifica O atributo nas etiquetas <th> e <td>.

Encabezado Superior
Título	Título	Título
texto
texto	texto	texto

Encabezado Esquerda
Título	texto	texto
Título		texto
Título		texto

Encabezado Ambos
Título	Título
Título	texto	texto
Título	texto	texto

Sen Encabezado
texto
texto	texto	texto
	texto

A etiqueta colgroup e col

A etiqueta <colgroup> especifica un grupo dunha ou máis columnas nunha taboa para a aplicación de estilos CSS para columnas completas, en lugar de repetir os estilos para cada celda, e para cada fila. Para definir propiedades diferentes a unha columna dentro dun <colgroup>, utilizase a etiqueta <col> dentro da etiqueta <colgroup> xunto có atributo span para nomear cantas columnas se deben agrupar.

Encabezado Superior
Título	Título	Título	Título
texto	texto	texto	texto
texto	texto	texto	texto

Encabezado Esquerda
Título	texto	texto	texto
Título	texto	texto	texto
Título	texto	texto	texto

Sin Encabezado
texto	texto	texto	texto
texto	texto	texto	texto
texto	texto	texto	texto

Agrupación por filas

HTML provee tres elementos que poden axudar ós autores a organizar a información presentada nunha taboa. Éstes son: thead, para agrupar as filas que presentan información de encabezado; tfoot para conter ás filas que representan un pe ó resumen; y tbody, para representar un bloque de filas que consiste nin corpo de datos.

Encabezado Superior
Título	Título	Título	Título
texto	texto	texto	texto
texto	texto	texto	texto
texto	texto	texto	texto

Encabezado Esquerda
Título	texto	texto	texto
Título	texto	texto	texto
Título	texto	texto	texto
Título	texto	texto	texto

Sin Encabezado
texto	texto	texto	texto
texto	texto	texto	texto
texto	texto	texto	texto
texto	texto	texto	texto

Nota: As etiquetas <thead> <tbody> <tfoot> deben ser utilizadas no seguinte contexto: Como un fillo dun elemento <table>, despois de calquera <caption>, y <colgroup>, abarcando os elementos <tr>.

Podemos automatizar a creacion de filas e columnas se en Sublime text escribimos tr*3>td4

Isto o que faría seria crear 3 filas con 4 columnas

<table>

<caption> Lenda de taboa </caption>
<thead>	<tr rowspan="2">	<th scope="col" colspan="3">			<th scope="col" colspan="2">
<thead>	<tr rowspan="2">	<th> Título	<th> Título	<th> Título	<th> Título	<th> Título
<tbody>	<tr>	<td> texto	<td> texto	<td> texto	<td> texto	<td> texto
	<tr>	<td> texto	<td> texto	<td> texto	<td> texto	<td> texto
	<tr>	<td> texto	<td> texto	<td> texto	<td> texto	<td> texto
<footer>	<tr>	<td> texto	<td> texto	<td> texto	<td> texto	<td> texto