PDF de programación - Características avanzadas de HTML y CSS

Características avanzadas de HTML y CSS. 1 de 47

Características avanzadas de HTML y CSS



Características avanzadas


En esta etapa, que ya somos capaces de crear sin problemas un sitio web sencillo. Vamos a

descubrir nuevas características de HTML y CSS, que pueden considerarse un poco más

avanzadas (y por lo tanto más complejas).

Tablas

Esenciales para la organización de la información, las tablas son un poco difíciles de construir

en HTML. En efecto, tendrás que incorporar nuevas etiquetas HTML en un orden específico.


Vamos a comenzar por la construcción de cuadros básicos, entonces los complicaremos con:
fusión de celdas, división de celdas en varias secciones... También descubriremos las


propiedades de CSS relacionadas con tablas, que nos permiten personalizar su apariencia.

- Tabla simple

La primera etiqueta es <table> </ table>. Es esta etiqueta la que se usa para indicar el principio
y el fin de una tabla. Esta etiqueta es de bloque, por lo que debe ser colocada fuera de un


párrafo.

Código HTML



<p>Este es un párrafo previo a la tabla.</p>
<table>
<!-- Aquí se escribirá el contenido de la tabla-->
</table>
<p>Este es un párrafo al final de la tabla.</p>


¿Y que se escribe dentro de la tabla?

Entonces prepárate para experimentar una avalancha de nuevas etiquetas. Para iniciarla sin


problemas, hay dos nuevas etiquetas muy importantes:



<tr> </tr>: indica el comienzo y el final de una línea de la tabla;
<td> </td>: indica el inicio y el final de los contenidos de una celda.


En HTML, un cuadro se construye línea por línea. En cada fila (<tr>), se muestra el contenido
de las celdas individuales (<td>).



________________________________________________________________

Rafael Menéndez-Barzanallana Asensio, Departamento Informática y Sistemas. UMU



Características avanzadas de HTML y CSS. 2 de 47


Básicamente, una tabla se construye como en la siguiente figura:



Por ejemplo, si quiero hacer una tabla con dos filas, con tres celdas por línea (por lo tanto tres
columnas), tendrías que escribir lo siguiente:

Código: HTML



<table>
<tr>

<td>Carmen</td>
<td>33 años</td>
<td>España</td>

</tr>
<tr>

<td>Miguel</td>
<td>26 años</td>
<td>Estados Unidos</td>

</tr>
</table>


El resultado sería el siguiente:


Carmen
Miguel

33 Años
26 Años

España
Estados Unidos



Una tabla sin CSS parece vacía. Y sólo tienes que añadir los bordes, es muy simple, ya

conoces el código CSS correspondiente.

Código CSS



td / * Todas las celdas de la tabla ... * /
{
border: 1px solid negro; / * tienen un borde de 1 píxel * /
}



________________________________________________________________

Rafael Menéndez-Barzanallana Asensio, Departamento Informática y Sistemas. UMU

Características avanzadas de HTML y CSS. 3 de 47



y resultaría con bordes la tabla mostrada previamente.

La presentación todavía no es tan “perfecta” como lo deseas. En efecto, nos gustaría que sólo


aparezca un borde entre dos celdas, lo que no es el caso que resulta. Afortunadamente, hay
una propiedad CSS específica para las tablas, ​border-collapse​, que significa "juntar los


bordes entre ellos ".

Esta propiedad puede tener dos valores:



collapse:​ los bordes se pegan entre ellos, este es el efecto que estamos buscando;
separate​: los bordes están separados (por defecto)


Código CSS:


table
{
border-collapse: collapse; /* Los bordes de la tabla aparecen juntos */
}
td
{
border: 1px solid black;
}



Siendo el resultado una tabla como la primera mostrada en este capítulo.

- Línea de cabecera de las tablas

Ahora que hemos conseguido lo que queríamos, vamos a añadir la línea en el encabezado de

la tabla. En el ejemplo, las cabeceras son "Nombre","Edad" y "País".

La línea de cabecera se crea con la etiqueta <tr> como se ha hecho hasta ahora, pero las
celdas que contiene, esta vez están enmarcadas por la etiqueta <th> y no la <td>

Código HTML



<table>
<tr>

<th>Nombre</th>
<th>Edad</th>
<th>País</th>

</tr>

<tr>

________________________________________________________________

Rafael Menéndez-Barzanallana Asensio, Departamento Informática y Sistemas. UMU



Características avanzadas de HTML y CSS. 4 de 47

<td>Carmen</td>
<td>33 años</td>
<td>España</td>

</tr>
<tr>

<td>Miguel</td>
<td>26 años</td>
<td>Estados Unidos</td>

</tr>
</table>


El encabezado de la fila es muy fácil de reconocer por dos razones:


- las celdas etiquetadas con <th> en lugar del <td> usual;
- es la primera línea de la tabla (es una tontería, pero debe especificarse).


Como el nombre de las celdas es un poco diferente en la cabecera, en necesario pensar en el
CSS para decirle que se aplica borde en las celdas normales y la cabecera.



Código CSS



table
{
border-collapse: collapse;
}
td, th /* Poner borde en td y th */
{
border: 1px solid black;
}



Como puedes ver en la figura siguiente, el navegador pone en negrita el texto de la celda de


cabecera. Esto es lo que suelen hacer de forma general los navegadores, pero si lo deseas,
puedes cambiar esto a golpe de CSS: cambiar el color de fondo de las celdas de cabecera,

fuente, borde, etc.



- Título de la tabla



________________________________________________________________

Rafael Menéndez-Barzanallana Asensio, Departamento Informática y Sistemas. UMU



Características avanzadas de HTML y CSS. 5 de 47



todas las tablas deben tener un título. El



Normalmente,

título permite al visitante saber


rápidamente el contenido de la tabla. Nuestro ejemplo se compone de una lista de personas, sí,

pero ¿y qué? ¿qué significa eso? Sin título, estamos un poco perdidos. Afortunadamente,

existe la etiqueta <caption>.

Esta etiqueta se coloca al principio de la tabla, justo antes de la cabecera. Es ella quien tiene el
título de la tabla (figura siguiente):

Código HTML



<table>
<caption>Pasajeros del vuelo Murcia-Madrid</caption>
<tr>

<th>Nombre</th>
<th>Edad</th>
<th>País</th>

<td>Carmen</td>
<td>33 años</td>
<td>España</td>

</tr>

<tr>

</tr>
<tr>

<td>Miguel</td>
<td>26 años</td>
<td>Estados Unidos</td>

</tr>
</table>



Ten en cuenta que puedes cambiar la posición del título con la propiedad CSS ​caption-side
que puede tomar cuatro valores:



top​: el título se coloca encima de la tabla (por defecto);
botton​: el título se coloca por debajo de la tabla.


Tablas estructuradas

Aprendimos a construir pequeñas tablas simples. Estas tablas pequeñas son suficientes en la

mayoría de los casos, pero no sé qué necesidades tienes de hacer tablas más complejas.

Vamos a explorar dos técnicas específicas:

Para tablas grandes, es posible dividirlas en tres partes:



________________________________________________________________

Rafael Menéndez-Barzanallana Asensio, Departamento Informática y Sistemas. UMU



Características avanzadas de HTML y CSS. 6 de 47



- Cabecera;
- Cuerpo de la tabla;
- Pie.


Para algunas celdas, puede ser que tengas que fusionar celdas adjuntas.

- Dividir una tabla de gran tamaño

Si la tabla es lo suficientemente grande, vas a hacer bien en dividirla en varias partes. Para
ello, existen etiquetas HTML que definen las tres "zonas" de la tabla:



- encabezado (arriba): se define con las etiquetas <thead> y </ thead>;
- cuerpo (centro): se define con las etiquetas <tbody> y </ tbody>;
- pie (abajo): se define con las etiquetas <tfoot> y </ tfoot>.



¿Qué poner en el pie de la tabla? En general, si se trata de una tabla larga, copiarás las celdas

del encabezado. Esto permite ver, incluso desde la parte inferior de la tabla, a que se refiere

cada columna. Esquemáticamente, una tabla de tres partes se muestra como:



Es un poco confuso, pero es aconsejable escribir las etiquetas en el siguiente orden:



1. <thead>
2. <tfoot>
3. <tbody>



En el código, lo que aparece primero es la parte superior, y la parte inferior, y, finalmente, la

parte principal (<tbody>). El navegador se encargará de mostrar cada elemento en el lugar

correcto, no te preocupes.

Por lo tanto se ha de escribir el código para crear la tabla en tres partes:



<table>

________________________________________________________________

Rafael Menéndez-Barzanallana Asensio, Departamento Informática y Sistemas. UMU



Características avanzadas de HTML y CSS. 7 de 47

<caption>Pasajeros del vuelo Madrid-Murcia</caption>
<thead> <!-- Encabezado de la t