martes, noviembre 22, 2011

Tutorial de desarrollo web, Parte VII: Tablas (1). Bordes CSS (1)

Previously, on The CubeBlog...

Después de un par de entregas hablando del CSS, hoy, para alegría o tristeza de unos y otros, regresamos con el HTML a conocer nuevas etiquetas. Pero, antes de empezar con nuestro tutorial de esta semana, toca dejarles la resolución del ejercicio de la semana pasada. Y, dicho esto, empezamos nuestra explicación.
Hasta ahora hemos trabajado nuestros documentos HTML con una estructura bastante simple, de modo que cada vez que queríamos separar algo creábamos un nuevo párrafo, provocando en muchos casos que mucho espacio sea desaprovechado, además de dar una imagen bastante pobre de nuestro documento. Para ello vamos a introducir un nuevo concepto, que es el de las "tablas".
El concepto de tabla no es demasiado difícil de entender: una forma de estructurar datos bastante simple que se divide en líneas y columnas. Para incluir una tabla en nuestro documento tendremos que usar varias etiquetas distintas, las cuales empezaremos a describir aquí, aunque, por supuesto, lo mejor será hacerlo con un ejemplo, así que, para empezar, crearemos un documento llamado "tablas.html" y empezaremos a seguir los siguientes pasos:

  • Para empezar nuestro archivo, en el "body" incluiremos la etiqueta <table>. Esta etiqueta creará la tabla en nuestro documento, aunque, si guardamos ahora, podemos comprobar que no hay ningún cambio, ya que la tabla no tiene contenido. Por supuesto, no debemos de olvidarnos de crear su  correspondiente etiqueta de cerrado </table>.
  • A pesar de que podamos hacer la tabla de modo que el lector las lea en cualquier dirección, a la hora de introducirla en nuestro documento deberemos introducirla del mismo modo que leemos, es decir de izquierda a derecha y de arriba a abajo. O sea, que iremos escribiendo cada una de las filas en dicho sentido, por lo que usaremos la etiqueta <tr> ("tr" de table row, o lo que es lo mismo, "fila de tabla") para comenzar una fila y su etiqueta de cerrado </tr> para terminarla. Una vez más, aunque hayamos introducido este código, nuestra página web no detectará nada raro.
  • Ahora, por fin, empezaremos a meter datos. Cada uno de los recuadros que formen nuestra tabla recibirá el nombre de "celda", y se identificarán con la etiqueta <td> (table data o "dato de tabla"). Por ejemplo, vamos a hacer unas cuantas filas que tengan dos celdas cada una:

  • <table>
  • <tr>
  • <td>1x1</td>
  • <td>1x2</td>
  • </tr>
  • <tr>
  • <td>2x1</td>
  • <td>2x2</td>
  • </tr>
  • <tr>
  • <td>3x1</td>
  • <td>3x2</td>
  • </tr>
  • </table>

  • Una vez escrito este código, guardamos y veremos nuestra página:
  • Como vemos, el texto se ha dividido, tal como queríamos, en 2 líneas y 2 columnas. Pero, la verdad, de momento es una tabla bastante sosa.
  • Para empezar a darle vida a nuestra tabla usaremos otra etiqueta propia de las tablas, el <th> (table header o "cabecera de tabla"). La diferencia entre las etiquetas "td" y "th" es que las celdas que crea esta última son celdas "importantes" (cabeceras, como su nombre indica), y, como obsequio, los navegadores las interpretan poniendo el interior de dichas celdas en negrita y centradas por defecto. Para un ejemplo, vamos a modificar el código anterior así:

  • <table>
  • <tr>
  • <th>TH's</th>
  • <th>1</th>
  • <th>1</th>
  • </tr>
  • <tr>
  • <th>1</th>
  • <td>1x1</td>
  • <td>1x2</td>
  • </tr>
  • <tr>
  • <th>2</th>
  • <td>2x1</td>
  • <td>2x2</td>
  • </tr>
  • <tr>
  • <th>3</th>
  • <td>3x1</td>
  • <td>3x2</td>
  • </tr>
  • </table>

  • Una vez modificado nuestro código, actualizamos nuestra página y:
  • Ahora tenemos una página con cabeceras. Las cabeceras pueden estar sólo arriba o sólo a la izquierda (o incluso a la derecha o abajo, no hay ningún problema).
Aunque existen más etiquetas que se pueden usar dentro de "table", ahora mismo nos interesa más otro tema. Nos habremos dado cuenta de que la tabla está bastante (más que bastante, muy) sosa. Así que, para solucionar esto, podemos usar códigos CSS. Sólo con lo que ya sabemos hasta ahora podemos darle un aspecto bastante más vistoso sólo con darle un código como éste:

table
{
background-color: black;
}

th
{
background-color: blue;
color: white;
}

td
{
background-color: yellow;
}

Tal vez os preguntéis por qué he decidido decirle a la tabla que su fondo sea negro, si será tapado por los fondos azules y amarillos de los "th" y "td", pero todo tendrá una explicación cuando actualicemos el código, y aparezca esto:
Como véis, el color "negro" de la tabla asoma entre una celda y otra, dando la sensación de "borde". Sin embargo, y aunque es un método bastante curioso de hacer los bordes, una herramienta tan potente como es CSS nos ofrece muchas más maneras de hacer bordes, entre otras cosas con el atributo "border".
En primer lugar, nos desharemos de todo el código CSS que hemos introducido hasta ahora y volveremos a tener nuestra tabla a pelo, para ahora lanzarnos a meter nuevo código CSS. En primer lugar, introduciremos el siguiente código:

td, th
{
border: solid;
}

Actualizamos nuestra página y el resultado será:
Bien, para quien no lo haya comprendido, con este código le hemos ordenado a los bordes de "td" y "th" que se hagan visibles y de estilo "solid". Existen distintos valores que se le pueden aplicar en vez del "solid". Por ejemplo, de forma natural, tiene el valor "none" (o sea, "ninguno"). Otros posibles valores los vemos aquí abajo:
border: double;
border: dotted;
border: dashed;

Aunque, sin duda, los resultados más interesantes los tienen los valores "groove", "ridge", "inset" y "outset", así que probadlos y disfrutad.
Hasta este momento, todos los valores que le hemos dado al atributo "border" han sido de estilo. De hecho, podríamos haber sustituido el atribtuo "border" por el atributo "border-style" (de modo que quedaría, "border-style: solid;" por poner un ejemplo), pero así a pelo en Google Chrome no funciona (sin embargo, en otros navegadores he comprobado que sí). El caso es que la etiqueta "border" tiene varias subdivisiones, y otra de ellas es el tamaño del borde, que le podemos decir en píxeles.
Para seguir con el ejemplo, en nuestras últimas pantallas, los bordes son muy gruesos, así que vamos a modificarlos usando la etiqueta "border-width", de esta manera:

td, th
{
border-style: solid;
border-width: 1px;
}

Como anotación, esta vez sí he usado "border-style", ya que al combinarlo con "border-width", funciona sin problemas en todos los navegadores. Una vez introducido este código, actualizamos y:
Los bordes, tan gruesos en anteriores ejemplos, están mucho más estilizados en esta versión.
De los bordes seguiremos hablando en otra ocasión, ya que, como casi todas las instrucciones de CSS, tiene mucho que contar. Lo único que añadiré es que muchas etiquetas de HTML pueden tener bordes: las etiquetas "p", las etiquetas "a", las etiquetas "img"... Id haciendo pruebas si queréis.
Finalmente y volviendo al tema de las tablas, vamos a ver algunos atributos importantes en estas estructuras: el "rowspan" y el "colspan". En muchas ocasiones, querremos tener una celda que ocupe más de lo habitual, así que para ello "agruparemos" varias celdas en una haciendo uso de estos atributos. Por ejemplo, la celda en la que se encuentra el "1x1", ahora quiero que ocupe esa celda y la de abajo. Para hacer esto, voy a sustituir el código de esa celda por el siguiente:

<td rowspan="2">1x1</td>

En ese código he explicado al navegador que quiero que esa celda tenga un tamaño de celda de 2, o sea, que ocupe 2 celdas. Para evitar que esto me haga un desbarajuste con la organización de la tabla, lo mejor será borrar la celda "2x1" (aunque parezca que la "2x2" ocuparía su lugar entonces, al introducirse en ese hueco la "1x1", la "2x2" se rueda un puesto a la derecha, quedando la tabla aún consitente). El resultado sería éste:
No será muy difícil para el lector imaginar el resultado de usar "colspan". Les sugiero, como ejercicio, hacer que la celda "3x1" ocupe 2 columnas, eliminando la celda "3x2".
Para terminar, y como aclaración, aparte de los atributos de CSS que aprendimos en esta ocasión (que, como ya dije, se pueden aplicar también a otros elementos HTML fuera de los de este artículo), los elementos que hemos estudiado hasta ahora también se pueden aplicar a las tablas, y los "background-color" y los "color" funcionarán como hasta ahora. Sin embargo, el "text-align" no funcionará como lo hemos visto hasta ahora (en realidad, sí, pero con los conocimientos que tenemos hasta ahora, parecerá que no), sino que, si intentamos "alinear" una tabla, una fila o una celda, lo que lograremos es alinear el interior de cada celda, pero no sus contenedores. De hecho, alinear una tabla es bastante difícil (no valdrá con introducirla en un párrafo alineado, aunque pareciera la solución más lógica), por lo que de ello trataremos en otro momento.

EJERCICIO

Aparte de probar los distintos bordes y el "colspan", seguiremos con las páginas del último capítulo. En primer lugar, introduciremos los enlaces de la página "index.html" en una tabla que sólo tenga dos filas: en la primera habrán dos celdas con los enlaces a "compra.html" y "venta.html" y en la segunda habrá una única celda que deberá ocupar el mismo ancho que los anteriores, con el enlace a "faq.html". Además, a pesar de que deben de ser celdas simples (o sea, no encabezados), su contenido deberá estar alineado al centro. Finalmente, en el archivo "faq.html" deberemos introducir su contenido en una tabla cuya primera fila sean los encabezados "Preguntas" y "Respuestas" y cada fila contenga dos celdas, una con la pregunta y la otra con la respuesta (como ya supongo que fue obvio con explicar los encabezados).

Y aquí termina la séptima parte del tutorial HTML, donde hemos tocado dos temas y no hemos terminado ninguno, pero creo que así mejor. Estos conceptos son tan extensos que si intentamos dominarlos todos de golpe puede que acabemos por no entender nada, así que mejor vayamos poco a poco. Así que, a estudiar esta semana y, ¡hasta la próxima entrega!

No hay comentarios: