2dw1112


Tema: Web

Subtema: Tablas y plantillas (templates)

Una tabla es un medio de organizar datos en filas y columnas. En cada grupo de filas contiene a un grupo de celdas que pueden ser utilizadas para listar datos como listas, agendas, resultados y otros datos de una forma organizada y/o tabulada. En HTML se adopta como una forma de presentar información que no sería comprendida tan fácilmente de otra manera. HTML dispone de una gran variedad de etiquetas para crear tablas con sus atributos que se deben utilizar en una forma determinada.

 


Etiquetas básicas para tablas en HTML

  1. Las tablas son definidas por las etiquetas TABLE y su cierre.
    <table>
    …
    </table>

  2. Dentro de estas dos colocaremos las otras etiquetas de las tablas hasta llegar a las celdas. Y dentro de las celdas ya se podrá colocar textos e imágenes que será el contenido de la tabla.
  3. Las tablas son descritas por líneas de arriba a abajo y luego por columnas de izquierda a derecha. Cada una de estas líneas, llamada fila, es definida por otra etiqueta y su cierre: TR.
  4. Dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será definida por otra etiqueta: TD. Dentro de esta y su cierre será donde coloquemos el contenido.

Ejemplo: Estructura de tabla:

<table border=2 cellspacing=3 cellpadding=1 width="50%">
<tr>
<td bgcolor="#FFFF00"> Celda 1, linea 1</td>
<td> Celda 2, linea 1</td>
</tr>
<tr>
<td> Celda 1, linea 2</td>
<td> Celda 2, linea 2</td>
</tr>
</table>

El resultado:

Atributos para tablas, filas y celdas

Algunos son conocidos como width, height, align, etc.

1. Para las etiquetas TABLE.

  • cellspacing: es el espacio entre celdas de la tabla.
  • cellpadding: es el espacio entre el borde de la celda y su contenido. 
  • border: es el número de píxeles que tendrá el borde de la tabla. 
  • bordercolor: es el rbg que le vas a asignar al borde de la tabla.


2. Para las etiquetas "interiores" de una tabla, (TR y TD): Se puede usar cualquier tipo de etiqueta dentro de la etiqueta TD, y luego escribir su contenido. Las etiquetas situadas en el interior de la celda no modifican el resto del documento. Las etiquetas fuera de la celda no serán consideradas por ésta.


3. El formato de una celda se especifica a partir de etiquetas introducidas en su interior o mediante atributos colocados: Dentro de la etiqueta de celda TD y dentro de la etiqueta TR (válido para toda la línea).


Atributos para modificar una celda en determinada o toda una línea

  • align: Justifica el texto de la celda del como si fuese el de un párrafo.
  • valign: (Top) para elegir que el texto aparezca arriba, (Middle) en el centro o (Bottom) abajo de la celda.
  • bgcolor: Para color a la celda o línea elegida.
  • bordercolor: Define el color del borde.


Atributos asignados a una celda y no al conjunto de celdas de una línea

  • background: Fondo para la celda a partir de un enlace a una imagen.
  • height: Define altura de la celda en pixels o porcentaje. 
  • width: Define anchura de la celda en pixels o porcentaje. 
  • colspan: Expande celda horizontalmente.
  • rowspan: Expande celda verticalmente.


Las dimensiones de las celdas se definen de forma absoluta es decir en pixels o puntos de pantalla. También puede ser de una forma relativa, es decir por porcentajes referidos al tamaño total de la tabla.


Ejemplo:

<td width="50"> Esto presenta ancho de celda de 50 pixels,
<td width="50%"> Esto presenta ancho de celda al 50% del ancho de la tabla.
<td colspan="2"> Esto combina la celda con la celda derecha.
<td rowspan="2"> Esto combina la celda con la celda inferior.


Plantillas (templates)

El theme o template es un formato existente prediseñado para un sitio o página web, donde el usuario puede personalizar la información. Algunas suelen ser gratuitas, pero con funciones limitadas. Una plantilla proporciona una estructura definida, ahorra tiempo y crea páginas webs sin tener que estar manejando códigos complicados.

Ventajas de usar plantilla web

  • Fácil manipulación y edición. No se necesita tener mucho conocimiento de programación.
  • Es asequible y económico, en algunos casos son gratuitas.
  • Implementación en poco tiempo, no se debe diseñar a tiempo completo.

Desventajas de usar plantillas

  • Es limitada su personalización, suele ser difícil cambiar la posición de algunos elementos de diseño web. En algunos casos no se puede modificar.
  • No están optimizados y por ello afecta su rapidez de carga y del posicionamiento SEO.
  • No es la plantilla que necesito, muchas veces no está hecho a la medida, y lo barato sale caro.

Plataforma para adquirir una plantilla

Existen muchas plataformas o lugares donde se puedes visitar, explorar y revisar el catálogo de plantillas. Esto te permite ver, evaluar y adquirir la plantilla más indicada según su necesidad. Algunos lugares donde puedes encontrar plantillas web:

  1. Template Monster, posee más de 21 mil productos.
  2. ThemeForest – EnvatoMarket, posee más de 47 mil plantillas.
  3. Webflow, posee aproximadamente 100 modelos diferentes.
  4. Creativemarket, posee más de 5.500 plantillas de sitios web.


Par ampliar tus conocimientos puedes revisar los siguientes enlaces de apoyo:


TAREA:
Contesta las siguientes interrogantes:
• ¿Qué es y para qué sirve una tabla?
• ¿Cómo se utilizan las tablas?

PRACTICA
  • a) Si posees un computador en casa haz clic derecho sobre el archivo Prueba y escoge la opción Abrir con. Allí busca Bloc de Notas y aparecerá el código. Luego agrega al final el nuevo código del ejemplo (Estructura de tabla) de esta semana y guarda los cambios en tu Blog.

Si no posees un computador, prediseña una tabla con un contenido que desees y decóralo a tu gusto.

  • b) Dibuja una tabla y copia todas las etiquetas y explica para qué sirven. Ejemplo:

Etiqueta

Función

<table>

…

</table>

 

Define y cierra una tabla

tr

 

td

 
Importante recordar
La forma más útil y actual de dar forma a las celdas es a partir de las hojas de estilo en cascada


No hay comentarios:

Publicar un comentario

Publicaciones Populares

Con la tecnología de Blogger.

Publicaciones recientes

Cursos - Mario Cobo Barona 2020