Web.HTML.Tablas.
Las tablas son elementos HTML muy útiles para presentar datos en forma de tablas, algo así como lo que hace Excel. También se puede usar para estructurar una página web, ubicar textos…etc.
Las tablas se agregan con la etiqueta <table>, cada fila con <tr> y cada celda con <td>, para darle un nombre a cada columna se usa <th> y para darle un nombre a la tabla se usa <caption>. Un ejemplo:
<!DOCTYPE html>
<html>
<body><table>
<caption>Personas</caption>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
</tr>
<tr>
<td>Ismael</td>
<td>Pérez</td>
<td>50</td>
</tr>
<tr>
<td>Lourdes</td>
<td>Maldonado</td>
<td>36</td>
</tr>
<tr>
<td>Pedro</td>
<td>Núñez</td>
<td>37</td>
</tr>
</table></body>
</html>
En este ejemplo existen 3 filas, es decir, 3 <tr>. A cada columna se lo ha asignado un nombre distinto con <th>. Y para finalizar se ha creado 3 celdas para cada fila, de forma que cada una contiene el nombre, apellido y edad.
Las tablas son más complejas y tienen muchísimas propiedades que se pueden usar para mejorar el diseño, pero eso será cuando se estudie CSS.
Añadir Bordes.
En el ejemplo anterior se hizo un tabla sin bordes, sólo se mostraban los datos. Ahora vamos a crear bordes en la tabla con la propiedad border:
<!DOCTYPE html>
<html>
<body><table border="1px">
<caption>Personas</caption>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
</tr>
<tr>
<td>Ismael</td>
<td>Pérez</td>
<td>50</td>
</tr>
<tr>
<td>Lourdes</td>
<td>Maldonado</td>
<td>36</td>
</tr>
<tr>
<td>Pedro</td>
<td>Núñez</td>
<td>37</td>
</tr>
</table></body>
</html>
Márgenes de las Celdas.
Es el espacio que hay entre el borde de la celda y su contenido y se agrega con la propiedad cellpadding:
<!DOCTYPE html>
<html>
<body><table border="1px" cellpadding="20px">
<caption>Personas</caption>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
</tr>
<tr>
<td>Ismael</td>
<td>Pérez</td>
<td>50</td>
</tr>
<tr>
<td>Lourdes</td>
<td>Maldonado</td>
<td>36</td>
</tr>
<tr>
<td>Pedro</td>
<td>Núñez</td>
<td>37</td>
</tr>
</table></body>
</html>
Espacios entre Celdas.
Es el espacio que se encuentra entre celda y celda y se agrega con la propiedad cellspacing:
<!DOCTYPE html>
<html>
<body><table border="1px" cellspacing="15px">
<caption>Personas</caption>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
</tr>
<tr>
<td>Ismael</td>
<td>Pérez</td>
<td>50</td>
</tr>
<tr>
<td>Lourdes</td>
<td>Maldonado</td>
<td>36</td>
</tr>
<tr>
<td>Pedro</td>
<td>Núñez</td>
<td>37</td>
</tr>
</table></body>
</html>
