LAS ETIQUETAS BÁSICAS
Una tabla puede ser sencilla
o compleja, dependiendo de nuestro objetivo y la cantidad de etiquetas o
atributos a utilizar. Ahora veamos las etiquetas básicas y sencillas
.
.
Agrupando columnas de una tabla
Las tablas, al definirse en el código siguiendo una
estructura horizontal, hacen complejo el aplicar o realizar una serie de
cambios a una columna. Existe una serie de etiquetas para agrupar o seleccionar
columnas y así poder realizar tareas sobre ellas.
Para ello, utilizaremos las dos siguientes etiquetas:
El atributo de la etiqueta <col> es llamado span al numero de columna adyacente.(style:)
(<col span=2 style="background:yellow">)
Vemos un ejemplo:
Realiza el siguiente ejercicio 1: agrupar tabla
- Aplica la etiqueta tabla y sus atributos
DESARROLLO 1:
<HTML>
<HEAD>
<TITLE> HORARIO
</TITLE></HEAD>
<BODY>
</TABLE BORDER=1 BORDERCOLOR="PURPLE">
<TR>
<TD>Lunes</TD>
<TD>Martes</TD>
<TD>Miercoles</TD>
<TD>Jueves</TD>
<TD>Viernes</TD>
</TR>
<TR>
<TD>Mates</TD>
<TD>Dibujo</TD>
<TD>Historia</TD>
<TD>Mates</TD>
<TD>Historia</TD>
</TR>
<TR>
<TD>Fisica</TD>
<TD>Mates</TD>
<TD>Dibujo</TD>
<TD>Fisica</TD>
<TD>Dibujo</TD>
</TR>
<TR>
<TD>Descanso</TD>
<TD>Descanso</TD>
<TD>Descanso</TD>
<TD>Descanso</TD>
<TD>Descanso</TD>
</TR>
<TR>
<TD>Historia</TD>
<TD>Gimnasia</TD>
<TD>Futbolin</TD>
<TD>Gimnasia</TD>
<TD>Mates</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Realiza el siguiente ejercicio 2: agrupar tabla
- Aplica la etiqueta tabla y sus atributos
- Aplicar color a cada columna, como se muestra en la imagen.
DESARROLLO 2:
<HTML>
<HEAD>
<TITLE> HORARIO DE PELÍCULAS
</TITLE></HEAD>
<BODY>
</TABLE BORDER=1 BORDERCOLOR="PURPLE">
<TR>
<TD>PELICULA</TD>
<TD>CINE</TD>
<TD>GENERO</TD>
<TD>PRECIO</TD>
<TD>LUGAR</TD>
</TR>
<TR>
<TD>El mago de Oz</TD>
<TD>Metro</TD>
<TD>Fantasia</TD>
<TD>S/. 20.00</TD>
<TD>Los Olivos</TD>
</TR>
<TR>
<TD>King Kong</TD>
<TD>Cine Planet</TD>
<TD>Acción</TD>
<TD>S/.18.00</TD>
<TD>Iquique 315, Breña 15082</TD>
</TR>
<TR>
<TD>El Padrino</TD>
<TD>CINE MARK PERÚ</TD>
<TD>ACCIÓN</TD>
<TD>S/.15.00</TD>
<TD>Mega Plaza Independencia </TD>
</TR>
<COLGROUP>
<TD STYLE="BACKGROUND:YELLOW">
<TD STYLE="BACKGROUND:BLUE">
<TD STYLE="BACKGROUND:GREEN">
<TD SPAN=2 STYLE="BACKGROUND:LIGHT BLUE">
</COLGROUP>
</TABLE>
</BODY>
</HTML>
<HEAD>
<TITLE> HORARIO DE PELÍCULAS
</TITLE></HEAD>
<BODY>
</TABLE BORDER=1 BORDERCOLOR="PURPLE">
<TR>
<TD>PELICULA</TD>
<TD>CINE</TD>
<TD>GENERO</TD>
<TD>PRECIO</TD>
<TD>LUGAR</TD>
</TR>
<TR>
<TD>El mago de Oz</TD>
<TD>Metro</TD>
<TD>Fantasia</TD>
<TD>S/. 20.00</TD>
<TD>Los Olivos</TD>
</TR>
<TR>
<TD>King Kong</TD>
<TD>Cine Planet</TD>
<TD>Acción</TD>
<TD>S/.18.00</TD>
<TD>Iquique 315, Breña 15082</TD>
</TR>
<TR>
<TD>El Padrino</TD>
<TD>CINE MARK PERÚ</TD>
<TD>ACCIÓN</TD>
<TD>S/.15.00</TD>
<TD>Mega Plaza Independencia </TD>
</TR>
<TR>
<TD>E.T. the Extra - Terrestrial</TD>
<TD>CINE STAR</TD>
<TD>FANTASIA</TD>
<TD>S/. 25.00</TD>
<TD>Av. Próceres SJL</TD>
</TR>
<TD STYLE="BACKGROUND:YELLOW">
<TD STYLE="BACKGROUND:BLUE">
<TD STYLE="BACKGROUND:GREEN">
<TD SPAN=2 STYLE="BACKGROUND:LIGHT BLUE">
</COLGROUP>
</TABLE>
</HTML>
0 comentarios:
Publicar un comentario