viernes, 20 de marzo de 2020

Prueba de tablas 3 -- Colores

Epezamos por coger una tabla (la de 3x3 sencilla del todo) de la entrada anterior:

Código:

<table border="1" cellpadding="5"><tbody>

<tr><td>C1,F1</td>
     <td>C2,F1</td>
     <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
     <td>C2,F2</td>
     <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
     <td>C2,F3</td>
     <td>C3,F3</td></tr>
</tbody></table>

Resultado:

C1,F1 C2,F1 C3,F1
C1,F2 C2,F2 C3,F2
C1,F3 C2,F3 C3,F3

-------------------------------
Cambio de color de la tabla entera:

En el encabezado de la tabla añadir el modificador adecuado:
<table bgcolor="grey" border="5" cellpadding="5"><tbody>

C1,F1 C2,F1 C3,F1
C1,F2 C2,F2 C3,F2
C1,F3 C2,F3 C3,F3

-----------------------------------
Donde pone "grey" se pueden poner muchos colores con etiquetas, o en hexadecimal:
bgcolor="#ff7f50"

C1,F1 C2,F1 C3,F1
C1,F2 C2,F2 C3,F2
C1,F3 C2,F3 C3,F3

¡Que cuando lo haces de esta segunda forma no se ve en el editor (redactar) pero sí en la versión publicada. De hecho esta tabla es naranja, cosa que no se ve editando, aparece blanca.
----------------------------------------------------
Y para elegir colores, está muy bien esta web:  https://htmlcolorcodes.com/
----------------------------------------------------

¿Y colores en cada celda o cada línea al menos?

Probemos a poner el modificador de color en este sitio:

<table border="1" cellpadding="5"><tbody>

<tr> bgcolor="grey" <td>C1,F1</td>
     <td>C2,F1</td>
     <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
     <td>C2,F2</td>
     <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
     <td>C2,F3</td>
     <td>C3,F3</td></tr>
</tbody></table>

El resultado es que no funciona.

Como funciona es metiendo el modificador dentro del corchete de la fila
<tr bgcolor="gold">

Veamos ahora:
<table border="1" cellpadding="5"><tbody>

<tr bgcolor="gold><td>C1,F1</td>
     <td>C2,F1</td>
     <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
     <td>C2,F2</td>
     <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
     <td>C2,F3</td>
     <td>C3,F3</td></tr>
</tbody></table>

Resultado:

C1,F1 C2,F1 C3,F1
C1,F2 C2,F2 C3,F2
C1,F3 C2,F3 C3,F3

Eso es!!

Supongo que hasta se podrá hacer en una celda solo:

<table border="1" cellpadding="5"><tbody>

<tr ><td>C1,F1</td>
     <td>C2,F1</td>
     <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
     <td>C2,F2</td>
     <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
     <td>C2,F3</td>
     <td bgcolor="gold >C3,F3</td></tr>
</tbody></table>

Resultado:

C1,F1 C2,F1 C3,F1
C1,F2 C2,F2 C3,F2
C1,F3 C2,F3 C3,F3

En efecto, ese es el mecanismo de colorear.


No hay comentarios:

Publicar un comentario