REPASO DE TABLAS HTML

Transcripción

1 REPASO DE TABLAS HTML Las tablas HTML se dividen en filas y celdas. A la hora de dibujar tablas hay que hacerlo de arriba a abajo y de izquierda a derecha. Es decir, primero empezaremos dibujando la primera fila, con todas sus celdas de izquierda a derecha. Después seguiremos con la segunda fila, dibujando sus celdas también de izquierda a derecha, y así sucesivamente hasta terminar la tabla. A continuación se indica un resumen de las etiquetas necesarias para dibujar las tablas: <TABLE>: Se utiliza para definir una tabla. Es la primera etiqueta e indicará donde empieza la tabla. Deberá cerrarse con </TABLE> <TR>: Se utiliza para definir una fila de una tabla. Al terminar la fila, deberá cerrarse la etiqueta con </TR> <TD>: Se utiliza para definir una celda en una fila de una tabla. Dentro de esta etiqueta, escribiremos el contenido de la celda que se mostrará en la pantalla. Al terminar la celda, deberá cerrarse con </TD> <TH>: Es igual que el TD, pero indica que esta celda incluye un texto de encabezado en su contenido. El navegador mostrará el contenido de esta celda en negrita y centrado. <CAPTION>: Se utiliza para indicar el título de una tabla. Esta etiqueta es opcional, y si se incluye, se deberá hacer después de la etiqueta <TABLE>. Al terminar el título, deberemos cerrar la etiqueta con </CAPTION>. Uniones de celdas A la hora de dibujar tablas, puede ser útil unir dos o más celdas contiguas, ya sea en horizontal o vertical. Para ello se utilizan dos atributos: rowspan: Es un atributo de las etiquetas TD y TH. Se utiliza para unir celdas, e indica el número de celdas que se van a combinar en vertical. Es decir, una celda con el atributo rowspan, ocupará el espacio de varias celdas situadas en distintas filas. Ejemplo: <td rowspan= 2 > Indicaría que esta celda ocupará el espacio de dos celdas en vertical, es decir, situadas en distintas filas. colspan: Es un atributo de las etiquetas TD y TH. Se utiliza para unir celdas, e indica el número de celdas que se van a combinar en horizontal. Es decir, una celda con el atributo colspan, ocupará el espacio de varias celdas situadas en distintas columnas. Ejemplo: <td colspan= 2 > Indicaría que esta celda ocupará el espacio de dos celdas en horizontal, es decir, situadas en distintas columnas. Colores en las tablas Podemos utilizar estilos CSS para dar a nuestras tablas un toque de colorido. Recuerda que los estilos CSS se deben utilizar añadiendo a la etiqueta a la que se desean aplicar el atributo style. A continuación se indican los estilos más útiles para darle un mejor aspecto a las tablas: background-color. Se utiliza para indicar un color de fondo, ya sea de una celda concreta, de una fila, o de una tabla entera. Por ejemplo: <TD style= background-color: yellow >. Esto pintará de amarillo la celda. <TR style= background-color: yellow >. Esto pintará de amarillo la fila entera. <TABLE style= background-color: yellow >. Esto pintará de amarillo la tabla entera.

2 border-color. Se utiliza para indicar un color para el borde de la tabla. Por ejemplo: <TABLE style= border-color: red >. Esto pintará de color rojo el borde de la tabla. border-style. Se utiliza para indicar un estilo de borde a la tabla. Puede tomar los siguientes valores: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset De los valores indicados el más utilizado es solid, que indica un estilo de borde sencillo trazado con una línea continua uniforme. Ejemplo: <TABLE style= border-color: red; border-style: solid >. Esto pintará un borde sencillo a la tabla, y de color rojo. color. Se utiliza para indicar el color del texto. Se puede usar en casi cualquier elemento HTML. Ejemplos: <p style= color: red >. Esto indicará un párrafo con texto en color rojo. <TD style= color: red >. Esto indicará que el texto contenido en la celda tendrá color rojo. <TR style= color: red >. Esto indicará que el texto contenido en todas las celdas de la fila tendrá color rojo. <TABLE style= color: red >. Esto indicará que el texto contenido en todas las celdas de la tabla tendrá color rojo. IMPORTANTE: Siempre que queramos usar más de un estilo en el mismo elemento HTML, los separaremos usando un punto y coma. Ejemplo: <TABLE style= border-color: #637292; border-style: solid > A la hora de indicar los colores podemos hacerlo de dos maneras: Indicando el color en inglés. Tiene la ventaja de que es fácil de recordar, pero el número de colores que podemos indicar es muy limitado. Ejemplos: <TD style= background-color: red > <TD style= background-color: yellow > <TD style= background-color: pink > Indicando el código HTML de color. Los colores en HTML se indican con un código de 6 caracteres, precedidos por el carácter #. Tiene la ventaja de poder indicar un gran número de colores, pero por contra, necesitamos una herramienta que nos facilite el código de color que se corresponda al color que queremos usar. Ejemplos: <TD style= background-color: #FF0000 >. Este sería un color rojo <TD style= background-color: #FFFF00 >. Este sería un amarillo <TD style= background-color: #FF00FF >. Este sería un rosa. En esta página web podemos averiguar los códigos de colores HTML:

3 <caption>ejemplo 1</caption> <caption>ejemplo 2</caption> <caption>ejemplo 3</caption> <caption>ejemplo 4</caption>

4 <caption>ejemplo 5</caption> <td colspan="2">uno</td> <caption>ejemplo 6</caption> <td colspan="2">tres</td> <caption>ejemplo 7</caption> <td rowspan="2">uno</td> <caption>ejemplo 8</caption> <td rowspan="2">dos</td> <caption>ejemplo 9</caption> <td colspan="2">tres</td>

5 <caption>ejemplo 10</caption> <td colspan="3">cuatro</td> <caption>ejemplo 11</caption> <td rowspan="3">dos</td> <caption>ejemplo 13</caption> <td colspan="2">dos</td> <td rowspan="2">tres</td> <table border="1" style="background-color:yellow"> <caption>ejemplo 14: Tabla con color de fondo</caption>

6 <td colspan="2">dos</td> <td rowspan="2">tres</td> <caption>ejemplo 14: Tabla con filas de colores</caption> <tr style="background-color: yellow"> <td colspan="2">dos</td> <tr style="background-color: red"> <td rowspan="2">tres</td> <tr style="background-color:grey"> <caption>ejemplo 15: Tabla con celdas de colores</caption> <td style="background-color:grey">uno</td> <td colspan="2" style="background-color:green">dos</td> <td rowspan="2" style="backgroundcolor:purple">tres</td> <td style="background-color:pink">cuatro</td> <td style="background-color:yellow">cinco</td> <td style="background-color:blue">seis</td> <td style="background-color:red">siete</td> <caption>notas</caption> <th>alumno</th> <th>ej 1</th> <th>ej 2</th> <td>juan</td> <td>6</td>

7 <td>8</td> <td>pedro</td> <td>manuel</td> <td>3</td> <td>5</td> <table border="1" style="border:solid; border-color:#f51313"> <tr style="background-color:#7f096f"> <th colspan="4" style="color:#ffffff">notas</th> <tr style="background-color:#f3d083"> <th rowspan="2">alumnos</th> <th colspan="3">tercera evaluación</th> <tr style="background-color:#d7a4eb"> <th>matemáticas</th> <th>valenciano</th> <th>informática</th> <tr style="background-color:#bae0f7"> <td>sonia</td> <td>8</td> <td>manuel</td> <td style="color:#ff0000">3</td> <tr style="background-color:#bae0f7"> <td>pablo</td> <td>6</td> <td style="color:#ff0000">3</td> <td>5</td> <td>óscar</td> <td style="color:#ff0000">2</td> <td>6</td> <tr style="background-color:#bae0f7"> <td>fátima</td> <td>8</td> <td>5</td>