Curso de html. Crear una tabla en Html.
El uso de tablas en una página web es algo muy común. Antes de la aparición del elemento div, las tablas tenian un papel predominante, ya que la estructura de las páginas web se creaba mediante tablas, que ayudaban enormemente a situar cada una de las partes que componian las páginas web.
Para crear una tabla en html tenemos que utilizar la etiqueta <table> combinada con las etiquetas <tr> y <td>. Su síntexis seria como sigue:
<table border=»1″>
<tr>
<td>fila1-columna-A</td><td>fila1-columna-B</td><td>fila1-columna-C</td>
</tr>
<tr>
<td>fila2-columna-A</td><td>fila2-columna-B </td><td>fila2-columna-C </td>
</tr>
</table>
Como podeis ver, hemos añadido un atributo «border» a la etiqueta<table>, esto se hace para crear un borde en la tabla y que tenga mas apariencia de tabla. El ancho que tendría ese borde se declara entre el encomillado del atributo border. En este caso hemos creado un borde de 1px o 1 pixel. No hace falta poner la abreviatura de píxel, ya veremos que en css es obligatorio ponerlo a excepción del 0px que puede ponerse asi: 0 sin el indicativo de px. Si quisiésemos crear un borde para nuestra tabla de mayor anchura, tan solo tendriamos que cambiar el «1» por un numero mayor.
Actualizado: 04/10/2014
Html5, no permite la utilización en las tablas del atributo border=»» en el código html, el borde habrá que aplicarlo utilizando Css.
Las etiquetas <tr></tr> delimitan cada fila de nuestra tabla y con la etiqueta <td></td> indicamos el contenido que habrá; en cada columna de la fila creada por la etiqueta <tr>. Como puede parecer un poco lioso, lo mejor es ver un ejemplo práctico.
Supongamos que queremos crear una tabla muy sencilla con tres columnas y dos filas, que va a tratar de una especie de dieta que llevamos. En la columna primera empezando por la izquierda, situaremos lo que comemos en el desayuno, en la segunda columna por la izquierda, pondremos lo que comemos en el almuerzo y en la tercera columna lo que comemos en la cena. En la primera fila pondremos Desayuno, merienda y cena. En la segunda fila los alimentos de nuestra dieta distribuidos en cada horario de comidas.
Nuestra tabla quedaria así:
<table border=»1″>
<tr>
<td>Desayuno<td><td>Almuerzo<td><td>Cena<td>
</tr>
<tr>
<td>Cafe<td><td>Verduras cocidas<td><td>Fruta y un yogur<td>
</tr>
</table>
Aunque es una dieta un poco salvaje, vale como ejemplo para ver el funcionamiento de estas etiquetas. El etiquetado y contenido anterior se mostraria en el navegador de la siguiente forma:
| Desayuno | Almuerzo | Cena |
| Cafe | Verduras cocidas | Fruta y un yogur |
Tal y como presenta la tabla el navegador deja mucho que desear. podriamos aplicar atributos, para establecer margenes y espaciado,centrar el texto en las columnas y filas. Aparte podemos cambiar el tipo y color del borde,poner un color de fondo a la tabla, etc. Veremos como poder hacer esto en el curso de css. Los nombres de atributos que se aplican en css, son muy parecidos (en algunos casos iguales) a los que se aplican en html por eso me parece mejor que directamente lo aprendais en css, ya que ganaremos tiempo y a fin de cuentas acabareis realizando todo el control con css, salvo en algunas ocasiones que no nos quede otra alternativa, que aplicar el código directamente en la plantilla de html.
Queria reseñar que no estoy poniendo todas las etiquetas que conforman cualquier página web (
1 | <html>,<head> |
, etc), para clarificar más los ejemplos, pero se da por hecho que sabeis que estoy actuando dentro del cuerpo de la página web, entre las etiquetas <body>…</body>.
No obstante sin que sirva de precedente, ni costumbre, podeis probar cualquiera de estos ejemplos, tal cual están escritos, utilizando un editor sin formato, por ejemplo el bloc de notas de windows y guardando el archivo con la extensión .html, al abrirlo en un navegador los podreis ver, sin necesidad de poner el resto de etiquetas básicas que tiene cualquier página web.