martes, noviembre 29, 2011

Tutorial de desarrollo web, Parte VIII: Tablas (2). Bordes CSS (2)

Previously, on The CubeBlog...
Parte I: Introducción
Parte II: Hola, mundo
Parte III: Estructurando el texto. Encabezados, párrafos y saltos de línea. Entidades
Parte IV: Hipervínculos e imágenes. Atributos. Rutas absolutas y relativas
Parte V: Introducción al CSS
Parte VI: Jerarquía en HTML. Herencia en CSS
Parte VII: Tablas (1). Bordes (1)

Por octava semana consecutiva estamos aquí de nuevo para continuar nuestro curso de desarrollo web, empezando, como siempre, dando las soluciones a los ejercicios de la semana pasada. La semana pasada empezamos a hablar sobre tablas en HTML y bordes en CSS, y hoy vamos a ampliar lo que sabemos.
Al final de la semana pasada, si hicimos la parte que necesitábamos del ejercicio, nuestra tabla debería haberse quedado con el siguiente aspecto:
Es posible que el lector le haya dejado otro tipo de borde distinto, pero la estructura de la tabla debería ser la anterior vista. Nuestro siguiente paso será poner un título a toda la tabla. Aunque podríamos hacer un "th" que ocupara toda la fila superior (<th colspan="3">), vamos a intentarlo de una manera más simple: la etiqueta <caption>. Esta etiqueta crea, como he dicho, un título para la tabla, aunque, en su mayoría, se mantiene fuera de la misma. De este modo, aunque le demos estilo a la tabla, la etiqueta "caption" no lo recibirá (salvo algunas excepciones). Por ello, aunque añadamos estas instrucciones de CSS:

table
{
border-style: solid;
border-width: 1px;
}


la tabla, una vez añadida la línea:

<caption>Tabla</caption>

al comienzo de la misma, ésta se verá así:
Como vemos, se han añadido bordes a los que ya teníamos debido a que le hemos puesto bordes a la etiqueta "table", pero aún así, la etiqueta "caption" aparece sin ningún borde, ya que está "fuera" de la tabla. Como curiosidad, aunque la etiqueta "caption" debe ir siempre al comienzo de la tabla (justo después de la etiqueta "table"), aunque la pongamos en otro lugar siempre se situará al comienzo. Eso sí, colocarla en otro lugar puede dar pie a que se descoloque nuestra tabla, así que se recomienda encarecidamente que se respete el lugar.
Las siguientes etiquetas que nos pueden interesar en las tablas son las etiquetas <colgroup> y <col>. Estas etiquetas sirven para agrupar varias columnas para darles un estilo determinado. Deben ir siempre después del "caption" (si existiera) y antes del primer "tr". Por ejemplo, vamos a agrupar las columnas de este modo: la primera columna tendrá un fondo amarillo, y las otras dos columnas tendrán fondo rojo. ¿Cómo hacerlo? De esta manera:

<colgroup>
<col span="1" style="background-color: yellow"/>
<col span="2" style="background-color: red"/>
</colgroup>

El resultado de este código sería:
Como podemos ver en el código, el "colgroup" engloba los "cols", los cuales, en su atributo "span" indicarán la cantidad de columnas que incluirán, mientras que su atributo "style" (el cual no siempre será necesario, puede que sólo lo queramos para indicar un número de columnas interemedias a las que no se le aplicará ningún estilo concreto) tendrá incluído el estilo que se le quiera aplicar. Además, darnos cuenta de que "col" es una de esas etiquetas que se cierra a sí misma.
Las siguientes etiquetas sobre las que hablaremos serán los encabezados, cuerpos y pies de tabla: <thead>, <tbody> y <tfoot>. Estas tres etiquetas no tienen mucho misterio: deben ponerse antes del "tr" que comience la supuesta "parte" de nuestra tabla y cerrarse justo después del cerrado del "tr" donde acabe dicha parte. Por ejemplo, el encabezado de nuestra tabla es, evidentemente, la primera línea, de manera que esa línea se podría escribir así:

<thead>
<tr>
<th>TH'S</th>
<th>1</th>
<th>2</th>
</tr>
</thead>

El resto del documento podría haberse englobado dentro de un "tbody" y en nuestra tabla no tenemos ningún pie de tabla, pero en caso de tener una línea de "resultados" o algo similar, podríamos haberla incluido. De todas maneras, el "tbody" y "tfoot" se colocan exactamente igual que el "thead" en la tabla: se abren antes del "tr" de apertura de la primera línea que queramos englobar, y se cierran después del "tr" de cierre de la última línea a agrupar. Esto es útil sobre todo para dar estilos distintos dependiendo de la zona de la tabla que queramos tratar. Como anotación final sobre esto, el "thead" debe ir después de los "colgroup" (en caso de haberlos).
Y, de momento, es todo lo que necesitamos saber sobre las tablas (que no es todo lo que se puede saber, pero por ahora no necesitamos saber más), así que volveremos a hablar de los bordes. Ya la semana pasada hablábamos que, en CSS, habían como mínimo dos instrucciones distintas para los bordes, las "border-style" y la "border-width". Vimos también que podíamos usar un atributo "border" que podíamos usar como "border-style", sobre todo para evitar problemas en Chrome. Lo cierto es que existe otro atributo más de bordes, el conocido como "border-color", que, evidentemente, cambia el color del borde, pero lo más interesante que vamos a tratar hoy es el hecho de que podemos tratar cada uno de los extremos del borde independientemente o tratar todos los atributos del borde en un sólo atributo. ¿Complejo? Bueno, expliquémoslo detenidamente.
En primer lugar vamos a crear un nuevo documento "bordes.html" en el que escribiremos un párrafo que diga cualquier cosa para empezar a trabajar con este párrafo. Mi documento "bordes.html" es el siguiente:
Ya la semana pasada explicamos que todos (o casi todos, para no arriesgarme) los elementos HTML tienen bordes, de modo que por eso podemos coger una etiqueta "p" y aplicarle bordes. Como ya conocemos los tres posibles atributos que pueden acompañar a "border", vamos a aplicárselo a este "p" en la etiqueta "style", de esta manera:

p
{
border-style: solid;
border-width: 2px;
border-color: blue;
}

Veremos que nuestro documento, con este código, debería quedar más o menos así:
Lo observamos: un borde sólido, como vimos la semana pasada, de 2 píxeles de anchura y de color azul. Perfecto, ha funcionado perfecto. Pero, ¿y si yo quiero cambiarlo y que en la parte inferior el estilo sea punteado, porque me ha entrado la tontería de quererlo así? Pues, señores, eso con CSS es posible, sólo tendremos que añadir una línea:


p
{
border-style: solid;
border-width: 2px;
border-color: blue;
border-bottom-style: dotted;
}

Y, con esa línea, nuestro documento quedará...
¡...punteado por debajo! Como véis, no ha sido tan duro. Tal como explicaba antes, cualquier característica de los bordes, se puede aplicar a cada uno de los cuatro extremos del borde con las palabras "top", "left", "right" o "bottom". Por ejemplo:

border-right-color: red;


border-top-width: 5px;


border-left-style: inset;

Todas las combinaciones de los cuatro extremos con las tres características son válidas.
Aunque sólo con estos comandos ya podríamos hacer cualquier virguería que queramos, a lo mejor nos parece que podemos llenar nuestro documento de demasiadas líneas de código, de modo que CSS también nos da una solución a esto. De este modo, esta parte final de este capítulo de este tutorial puede ser bastante engorrosa, pero no os preocupéis, si lo habéis entendido hasta ahora, esta última parte podéis incluso ignorarla, ya que no afectará en nada al aspecto del documento, sólo a vuestra organización a la hora de escribir código.
Hasta ahora hemos visto que podemos ir añadiendo palabras a la instrucción "border" para ser más específico en aquello que queramos modificar en nuestro documento. Pero, ¿significa que con la palabra "border" original no podíamos hacer todo eso? Claro que podíamos. O al menos en su gran parte. Y ahora vamos a ver cómo hacerlo.
Para entenderlo mejor, iremos desde lo más específico a lo más genérico. Lo más específico es lo último que hemos visto, instrucciones como "border-right-color" o "border-bottom-width" están diciendo exactamente qué atributo de qué parte de nuestro borde queremos modificar. Sin embargo, ahora vamos a cambiar cada atributo en los cuatro extremos en una sola declaración. ¿Vamos allá? ¡Vamos allá!
Por poner un ejemplo, la instrucción "border-color". Hasta ahora hemos visto que, si le introducimos un color, el borde entero se pintará de dicho color, y necesitaremos una instrucción de color de un extremo específico para modificar alguno de los colores. Sin embargo, la instrucción "border-color" es mucho más potente que esto: podemos ponerle uno, dos, tres o incluso cuatro colores. ¿Cómo lo identifica el navegador? De la siguiente manera:

border-color: blue; Los cuatro bordes son azules.
border-color: blue red; Los bordes superior e inferior son azules mientras que los izquierdo y derecho son rojos.
border-color: blue red yellow; El borde superior es azul, los bordes derecho e izquierdo son rojos y el borde inferior es amarillo.
border-color: blue red yellow black; El borde superior es azul, el borde derecho es rojo, el borde inferior es amarillo y el borde izquierdo es negro.

Esto será difícil aprendérselo de memoria, aunque será útil darse cuenta de que en la última instrucción se aplica en el sentido de las agujas del reloj. Recordad que esto es válido tanto para "border-color" como para "border-style" y "border-width", cada uno con el tipo de valor que le corresponde.
En segundo lugar, también se le pueden dar los tres valores de golpe a uno de los lados, usando las instrucciones "border-right", "border-left", "border-bottom" y "border-top". Para esto, sólo necesitaremos darle cada uno de los tres valores, en cualquier orden. Por ejemplo:

border-bottom: blue 1px solid;


border-top: 2px dashed;


border-left: inset red;

Como vemos, da igual que obviemos alguno de los tipos o que los pongamos en distintos órdenes, él los leerá de todas maneras. Eso sí, recordemos que el valor por defecto de "border-style" es "none", por lo cual, si no le especificamos un estilo, aunque le pongamos color y ancho, no aparecerá.
Finalmente, una instrucción que en muchas ocasiones nos será útil, pero que no nos permitirá ser tan específicos como hasta ahora, es la ya mencionada instrucción "border". Al igual que los "border-top", "border-left", "border-right" y "border-bottom", la etiqueta "border" acepta que se le ponga uno, dos o los tres valores de estilo. Desgraciadamente, la etiqueta "border" nos obligará a usar atributos genéricos, no podremos darle valores para cada uno de los cuatro extremos, sino que serán etiquetas de este tipo:

border: blue 1px solid;


border: 2px dashed;


border: inset red;

Una vez más, recordar que el "style" de "border" está puesto por defecto a "none", con sus consecuencias ya mencionadas.
Y esto era la etiqueta "border" hasta CSS2, pero el CSS3 ha incluido instrucciones como "border-radius" o "border-image", de las cuales hablaremos dentro de algún tiempo, aunque antes seguiremos trabajando con lo básico del HTML y el CSS.

EJERCICIO


Esta semana rescataremos una vez más el ejercicio de "compra" y "venta". En el "index.html" incluiremos un título a la tabla que incluimos la semana pasada que diga "Contenido". Mientras tanto, en la tabla que pusimos en "faq.html" dividiremos las celdas que sirvan de encabezado y las que sirvan de cuerpo de la tabla. Finalmente, aplicaremos bordes en ambas tablas, mientras más específicos, mejor.

Y, esperando haberme hecho entender esta semana también, me despido hasta la semana que viene (aunque nunca es verdad ya que durante toda la semana estoy siempre escribiendo posts de otros temas). ¡Hasta la próxima!

No hay comentarios: