Tutorial HTML5 : 9 Las tablas

Entrada más reciente Entrada antigua

Hola que tal y que gusto que estés aquí en esta ocasión vamos a hablar de las tablas pero de las de picar ni de madera si no esas que nos ayuda a tabular y a manejar bien datos y distinguir entre ellos

Así que comencemos  :)


Antes de empezar hay que tener bien claro en cómo se divide una tabla y la gran parte  y no por decir todas están formadas de columnas y filas 

Las columnas (verticales): son las que llevan un tipo de dato específico por ejemplo el nombre y que otra columna lleva el apellido de una persona otra columna lleva el RFC de la persona y así hasta lo que se necesite identificar de ella

Las filas (horizontales): son los registros y que cada fila representa un registro 
Para hacer tablas en html5 es muy sencillo y primero vamos a ver las sencillas después sus atributos y por ultimo las tablas semánticas

Tablas sencillas

Compuestas de la siguiente manera

	<table border='1'>
		<tr>
			<th>Titulo 1</th>
			<th>Titulo 2</th>
		</tr>
		<tr>
			<td>Contenido 1</td>
			<td>Contenido 2</td>
		</tr>
	</table>

Observamos que no es nada complicado y que nos muestra:

Table: etiqueta que indica el inicio de una tabla y que lleva la mayoría de casos el atributo border con valor uno para que muestre un borde

	<table border='1'>
	
	</table>

Tr: etiqueta que indica un registro o fila de la tabla

	<table border='1'>
		<tr>

		</tr>
	</table>

Th: etiqueta  que da como cabeceras de los diferentes tipos de datos de nuestra tabla 

	<table border='1'>
		<tr>
			<th></th>
		</tr>
	</table>

Td: etiqueta que va guardando en cada celda un registro

	<table border='1'>
		<tr>
			<th></th>
		</tr>
		<tr>
			<td></td>
		</tr>
	</table>

Esta es la sencilla así que continuemos con

Tablas Semánticas

Estas tablas se dice que ayudan al posicionamiento web pero eso era antes ahora google toma más importante el contenido original más que las tablas semánticas pero de todos modos no está de más saber cómo son

	<table border='1'>
		<caption>titulo de la tabla</caption>
		<thead>
			<tr>
				<th>Cabecera 1</th>
				<th>Cabecera 2</th>
				<th>Cabecera 3</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td>Contenido 1.1</td>
				<td>Contenido 2.2</td>
				<td>Contenido 3.3</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<td>Contenido 1</td>
				<td>Contenido 2</td>
				<td>Contenido 3</td>
			</tr>
		</tbody>
	</table>

Y veamos para que sirven estas etiquetas

Caption: etiqueta que indica el título de la tabla

	<table border='1'>
		<caption>titulo de la tabla</caption>
	</table>

Thead: etiqueta de contenido de cabecera

	<table border='1'>
		<caption>titulo de la tabla</caption>
		<thead>
			<tr></tr>
		</thead>
	</table>

Tbody: etiqueta indica el contenido de la tabla

	<table border='1'>
		<caption>titulo de la tabla</caption>
		<thead>
			<tr></tr>
		</thead>
		<tbody>
			<tr></tr>
		</tbody>
	</table>

Tfoot: etiqueta que indica el contenido del pie de la tabla

	<table border='1'>
		<caption>titulo de la tabla</caption>
		<thead>
			<tr></tr>
		</thead>
		<tfoot>
			<tr></tr>
		</tfoot>
		<tbody>
			<tr></tr>
		</tbody>
	</table>

Y  bueno no todo queda aquí así que veamos sus atributos:


Como podemos observar hay varias para Table:

Width: indica el ancho de la tabla, los valores pueden ser px o porcentajes
Border: indica el borde de la tabla por defecto es 0,pixeles
Frame: indica que lado va a tener borde, los valores pueden ser void, above,below,hside,lhs,vside,box,border
Rules: indica que lados de los bordes de los interiores son visibles , valores son nonde, all, rows, cols, groups, 
Cellspacing: indica espacio que debe existir entre las celdas de la tabla, los valores son número que se interpretan en px
Cellpadding: indica espacio que hay en el interior de cada celda de la tabla, los valores se interpretan en px o en %

Estos son para table ahora veamos

Atributos para tbody, thead, tfoot

Valign : indica el alineamiento vertical del contenido de las celdas, los valores son top, middle, bottom , baseline
Align: indica el alineamiento horizontal de las celdas, valores son left,center,right, justify

Continuamos con:

Atributos en  tr :

Es lo mismo que en table y tbody en cuanto a align y valign

Atributos para td y th

Aquí tenemos varias así que veámoslas
Colspan: indica la fusión o unión de celdas horizontalmente, valores son el número de celdas que se piensa tocar
Rowspan: indica la fusión o unión de celdas verticalmente, valores son el número de las celdas que se piensa tocar
Y también tenemos los atributos align y valign

Y bueno eso es todo así que espero sea muy útil y si me falto algo haz de avisarme para crear muy buenos tutoriales y de calidad para que sea un legado esto así que saludos y los veo en la otra que vamos a ver lo que es son los formularios así que 

Saludos : )