Inicio
Software
Programación
HTML Programación - PHP (ini) Programación - PHP POO Programación - PHP / HTML SQL Java
Hardware
Desarrollos
Quién soy Mapa del sitio

HTML - 13ra Entrega Tablas

Imprimir
Categoría: HTML
Escrito por Ch4rl1X Visitas: 1253

Volviendo con algo de HTML nuevamente, no nos vamos a olvidar de las tan mencionadas tablas.
Como casi cualquier persona del siglo 21 debería conocer, las tablas están formadas por filas y columnas. HTML ofrece una amplia gama para su configuración. Vamos a ver algunos ejemplos.

Para crear una tabla usamos la etiqueta <table>, para crear las filas usamos la etiqueta <tr> y <td> para las columnas, también tenemos diferentes atributos para aplicar por ejemplo colspan que nos permite crear y unir filas sobre columnas.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tablas 1</title>
</head>

<body>
<table border="1">
<caption>Ejemplo de celda multicolumna</caption>
   <tr>
       <th>Nombre Completo</th>
	   <td></td>
	   <td></td>
   </tr>
   <tr>
       <th>Nombre</th>
	   <th>Apellidos</th>
	   <th>Edad</th>
   </tr>
   <tr>
       <td>Ch4rl1X</td>
	   <td>DDD</td>
	   <td>54</td>
   </tr>
</table>
</body>
</html>

Resultado -> Click Aquí.

Utilizamos la etiqueta <caption> para crear el título de nuestra tabla, se crea la tabla con <table>, luego con <tr> creamos la primer fila y en su contenido las columnas con <td>.

Como se ve a esta altura su funcionamiento y uso no es complejo, veamos los siguientes ejemplos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tablas Color</title>
</head>

<body>

<table border="1" aling="center" bgcolor="#0000FF" bordercolor="#FF0000" cellpadding="10" cellspacing="10" width="500" height="350">
<caption>Ejemplo de celdas multifila y multicolumna</caption>
     <tr>
	     <th colspan="2">Nombre Completo</th>
		 <th rowspan="2">Edad</th>
	 </tr>
	 <tr>
	     <th>Nombre</th>
		 <th>Apellido</th>	 
	 </tr>
	 <tr>
	     <td>Ch4RL1x</td>
		 <td>DDD</td>
		 <td>56</td>
	 </tr>
</table>

</body>
</html>

Resultado -> Click Aquí.

Vimos en el anterior que, para ocupar un valor de la columna que no estaba relleno usabamos el atributo colspan, para las filas usamos rowspan, como se ve en el anterior.

A nivel organizacional podemos usar etiquetas que organicen nuestras tablas, no se utiliza tanto pero es necesario que lo sepamos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tablas multidimensionales</title>
</head>

<body>

<table border="1" summary="Esta tabla contiene la cantidad de medallas que tienen los equipos de fútbol">
<caption>Cantidad de medallas de equipos de fútbol</caption>
<thead>
        <tr>
		     <td></td>
		     <th id="mo">Medallas de Oro</th>
		     <th id="mp">Medallas de Plata</th>
		     <th id="mb">Medallas de Bronce</th>
		</tr>
</thead>
<tfoot>
        <tr>
		     <td colspan="4">(*) Medallas pendientes de revisar</td
		></tr>

</tfoot>
<tbody>
        <tr>
		     <th id="e1">River</th>
			 <td headers="mo e1">22</td>
			 <td headers="mp e1">17</td>
			 <td headers="mb e1">23</td>
		</tr>
		<tr>
		     <th id="e2">Boca</th>
			 <td headers="mo e2">20</td>
			 <td headers="mp e2">15</td>
			 <td headers="mb e2">20</td>
		</tr>
		<tr>
		     <th id="e3">Independiente</th>
			 <td headers="mo e3">18</td>
			 <td headers="mp e3">13</td>
			 <td headers="mb e3">15</td>
		</tr>
</tbody>
</table>

</body>
</html>

Resultado -> Click Aquí.

Como se puede apreciar a diferencia de la anteriores tenemos las etiquetas <thead>, <tbody> y <tfoot>. Y se le agrega el atributo header a las columnas para una mejor identificación.

Dependiendo el proyecto vamos a tener más o menos complejidad en la creación de nuestras columnas, por éso a practicar y variar los ejemplos que les propongo.

Espero que sirva, saludos, Ch4rl1X!