Como Poner Color a Una Tabla en Html
i. Introducci�n
Uno de los objetos yard�s utilizados en la web, tanto para mostrar datos como para ajustar el dise�o de la hoja son las tablas. En esta unidad aprenderemos las etiquetas necesarias para hacerlas.
ii. Tablas
Una tabla es una serie de celdas distribuidas en filas y columnas. Cada una de esas celdas se comporta casi como una p�gina web en peque�o. En su interior podemos insertar desde un simple n�mero hasta las series m�s largas de informaci�n o elementos multimedia que se nos ocurran.
Como suced�a con las listas, HTML due south�lo cuenta con etiquetas capaces de definir la estructura completa de la tabla, pero no su apariencia; los colores, anchuras de l�nea, fondos y otros aspectos se dejan para los estilos CSS.
Una tabla m�nima se dise�a con tres etiquetas y sus respectivos cierres:
-
<tabular array>
para definir el comienzo de la tabla. A la tabla le podemos a�adir el par�metro border=”ane” para indicar si la tabla tendr� united nations borde. -
<tr>
para indicar el comienzo de una fila. -
<td>
para el comienzo de una celda.
Veamos un ejemplo de tabla:
<h1>Tardes ocupadas</h1>
<table>
<tr>
<td>Lunes</td>
<td>Martes</td>
<td>Mi�rcoles</td>
<td>Jueves</td>
<td>Viernes</td>
</tr>
<tr>
<td>Lengua</td>
<td> </td>
<td>Matem�ticas</td>
<td>Thousand�sica</td>
<td> </td>
</tr>
</table>
Crear tablas a mano es laborioso, aunque es un buen ejercicio para entender c�mo funcionan.
3. Tablas irregulares
Cada celda de una tabla puede contar con dos par�metros, para que la celda se extienda yard�s all� de lo normal:
- colspan: hace que la celda se extienda hacia la derecha, tantas celdas como se indique en su valor.
- rowspan: la celda se extender� hacia abajo, tantas filas como se indique.
Ve�moslo con united nations ejemplo sencillo. La tabla de la imagen es completamente regular.
<table width="50%" edge="i" >
<tr mode="background-color: rgb(102, 255, 153);">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Hemos a�adido el colour verde para que se vea mejor el efecto con el c�digo
way=”background-colour: rgb(102, 255, 153);”. Si quisieramos que southward�lo una celda cambiara de color se lo pondr�amos a la etiqueta <td> de la celda. Otra formato para definir el color ser�a
style=”groundwork-color: red;”.
La tabla tiene cuatro columnas, as� que, para que la primera fila se componga de una sola celda, debemos indicarle que �sta va a superponerse sobre las otras cuatro. Pasar�amos de una primera fila con esta apariencia:
<tr style="background-color: rgb(102, 255, 153);">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
A esta otra y el
<tr style="background-color: rgb(102, 255, 153);">
<td colspan="iv"> </td>
</tr>
El resultado se muestra en la imagen:
Hemos eliminado las otras tres filas, para evitar que aparezcan en la parte derecha, descuadrando la tabla. Si las hubi�ramos dejado el resultado ser�a el siguiente:
<tr mode="groundwork-color: rgb(102, 255, 153);">
<td colspan="4"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
En el siguiente ejemplo hemos aplicado el valor rowspan a las tres primeras celdas de la izquierda. El c�digo HTML completo es el siguiente:
<table width="50%" border="1" >
<tr style="background-color: rgb(102, 255, 153);">
<td rowspan="3"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tabular array>
Y as� se ve en el navegador.
Como podemos observar la tabla se ha descuadrado ya que la �ltima celda de las dos �ltimas filas se ha desplazado a la derecha al a�adir con rowspan la celda superior. Para solucionarlo deberemos hacer lo mismo que hemos hecho en el caso anterior, eliminar las celdas sobrantes:
<table width="50%" border="1" >
<tr style="background-colour: rgb(102, 255, 153);">
<td rowspan="3"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Y as� se ve en el navegador:
Como Poner Color a Una Tabla en Html
Source: https://iesandresbojollo.es/tiyc/html/6-Tablas.html
