Cómo hacer un calendario usando HTML (En 7 Pasos)

Por mara shannon
Cómo hacer un calendario usando HTML (En 7 Pasos)
Ciaran Griffin/Lifesize/Getty Images

Un calendario hecho en HTML puede ser una adición útil a tu sitio web, o un ejercicio práctico para formatear tablas. Hay muchas maneras de personalizar un calendario. Puedes hacer un gran calendario que contenga los eventos que aparecen en cada fecha; uno pequeño con enlaces a los acontecimientos diarios; o uno de fiestas y eventos que tenga texto codificado con colores o fondos. Con un poco de experiencia en la codificación HTML, puedes personalizar tu propio calendario.

Paso 1

Escribe "*" para crear tu tabla. Puedes aumentar el tamaño del borde del calendario remplazando "1" con un número mayor.

Paso 2

Fija el ancho de cada columna escribiendo: *. Remplaza "50" con el ancho deseado de tu columna y repite siete veces, una para cada columna. Este paso no es necesario, pero mantendrá las columnas de tu calendario todas iguales si agregas eventos u otro texto.

Paso 3

Crea la primera fila escribiendo: . Reemplaza "September 2010" con el mes y año correcto. El código "" significa "table row" (fila de la tabla) y "" significa "table header" (encabezado de la tabla), lo que significa que el mes y el año serán resaltados. El código "" significa que la fila se extenderá por todas las siete columnas (días de la semana) del calendario.

Paso 4

Haz una fila que muestre los días de la semana para encabezar cada columna del calendario: . Asegúrate de terminar con "" para finalizar la fila.

Paso 5

Mira la cantidad de días y el día de la semana en que empieza el mes y el año del calendario.

Paso 6

Haz una fila para la primera semana del calendario, usando "" (celdas de tabla normales), en vez de "" (celdas de encabezado). Deja casillas en blanco antes del día de comienzo. Por ejemplo, si el primero día del mes cae Lunes, la fila debe comenzar como: 12. Continúa hasta el sexto día y termina con "*". Remplaza "center" con "right" o "left" si quieres alinear los días de forma diferente.

Paso 7

Crea filas de tablas adicionales para todos los días del mes. Termina tu tabla con "*".