<table> Inicio de tabla sin borde
<table border> Inicio de tabla con borde
<table border=1) Inicio de tabla con borde y bizel (el grosor del bizel es el que se identifica con 1, 2, 3, etc.
<caption> Inicio de título de tabla
</caption> Final de título de tabla
<tr> Inicio de fila
</tr> Final de fila
<th> Inicio de celda de cabecera
</th> Final de celda de cabecera
<td> Inicio de celda
</td> Final de celda
Con el atributo colspan en las etiquetas <td> o <th> se indica que esa celda debe ocupar 2 o más columnas, ejemplo: <td colspan=3> indica que la celda ocupará tres columnas.
Con el atributo rowspan en las etiquetas <td> o <th> se
indica que esa celda debe ocupar 2 o más filas, ejemplo: <td rowspan=2> indica que la celda ocupará dos filas.
Actividad en Clase
1. Ingresar a Bloc de notas y realizar el siguiente código para guardarlo con el nombre Prueba2.html y ejecutarlo para ver cómo actúan las etiquetas utilizadas:
<html>
<head><title>Tablas en HTML</title></head>
<body>
<table>
<tr>
<td>Dato celda</td>
<td>Dato celda</td>
<td>Dato celda</td>
</tr>
<tr>
<td>Dato celda</td>
<td>Dato celda</td>
<td>Dato celda</td>
</tr>
</table>
</body>
</html>
Al ejecutar debe verse la siguiente página con una pequeña tabla:
2. Modifique el código añadiendo el atributo border en la etiqueta <table>, debe quedar así: <table border> y guarde y observe el cambio en la página web.
Al ejecutar debe verse de la siguiente manera:
3. Ahora cambie el valor del atributo border asignadole un valor de 3, por ejemplo. Debe quedar así: <table border=3> y además cambie las etiquetas <td> de la primera fila de la tabla, por etiquetas <th>. Guarde y actualice la página web.
Al actualizar, la tabla debe quedar así:
4. Introduzca la etiqueta <captión> debajo de la etiqueta <table> para insertar un título de tabla, así: <caption>Tabla sencilla</caption> y después de la etiqueta </table> inserte una línea divisoria: <hr>. La tabla debe quedar así:
5. Copie todo el código de la tabla (no de la página web, solo de la tabla), desde <table> hasta </table>, para pegarlo en ese mismo código debajo de la línea divisoria y generar una segunda tabla para hacerle cambios. Si quiere guarde y verifique que ahora tenga 2 tablas en la página web.
6. Cambie el título de la segunda tabla por: Tabla con combinaciones (ya no debe decir Tabla sencilla) y genere otra fila de datos como se muestra que quedó la segunda tabla en la imagen siguiente:
7. En la última fila de la segunda tabla utilice el atributo colspan para combinar las dos últimas celdas. Aquí indico cómo debe quedar esa fila de celdas:
<tr>
<td>Dato celda</td>
<td colspan=2>Dato celda</td>
</tr>
Observe que desaparece una línea de código (una de <td>) ya que la segunda celda contiene el atributo colspan=2 indicándole que debe expandirse a dos celdas. Al guardar y actualizar, la segunda tabla debe quedar así:
8. Ahora acompañe el atributo colspan con otro atributo, el de alineación para que el dato quede centrado, así: <td colspan=2 align=center>Dato celda</td>. Los datos de las celdas se pueden alinear con el atributo align de acuerdo con las necesidades.
9. Trace otra línea divisora debajo de la segunda tabla para generar una tercera tabla que diseñará con el horario del curso (las filas correspondientes a DESCANSO y ALMUERZO deben tener combinación utilizando el atributo colspan. Aquí se muestra con una imagen cómo debe quedar y además debe llevar las materia correspondientes a cada hora según el curso:
10. Cuando termine, guarde y entregue para su evaluación.
Nota: Los estudiantes que no asistieron a esta clase deben guiarse por esta publicación pero además deben realizar otra tabla (fuera del horario), una tabla a libre elección pero que debe cumplir con este tamaño aproximadamente y con combinaciones de celda y uso de alineaciones. Ejemplo de tabla que pueden realizar:
Donde van las imágenes de bolitas de color, pueden ir los
nombres de los colores y no es necesario que vayan las imágenes de los
MP3, solo los nombres MP3 mini y MP3 grande.
Nota: Los estudiantes que no asistieron a esta clase deben guiarse por esta publicación pero además deben realizar otra tabla (fuera del horario), una tabla a libre elección pero que debe cumplir con este tamaño aproximadamente y con combinaciones de celda y uso de alineaciones. Ejemplo de tabla que pueden realizar:
No hay comentarios:
Publicar un comentario
Regístrate y realiza tu comentario