Contenido
- Crea una tabla en HTML
- Paso 1
- Paso 2
- Paso 3
- Paso 4
- Paso 5
- Personaliza el calendario
- Paso 1
- Paso 2
- thead calendar {
- Paso 3
- el calendario,
- td calendar {
- Paso 4
- td span calendar {
Aunque las tablas han caído en desgracia cuando se trata de crear diseños de páginas web, todavía funcionan bien para codificar calendarios HTML. Los calendarios muestran datos tabulares de una manera, una vez que están organizados en una cuadrícula de fechas con columnas nombradas, por ejemplo, con los días de la semana. El código CSS adicional hará que una cuadrícula tediosa con nombres y números se parezca más a un calendario. Dado que los eventos en un calendario necesitan espacio, tanto para el número de fechas como para los eventos, también será necesario usar CSS para formatear las fechas de una manera que mantenga ambas piezas de información legibles.
Crea una tabla en HTML
Paso 1
Crea una tabla para estructurar el calendario. Esta tabla requiere un encabezado con siete celdas, una para cada día de la semana. También es necesario crear seis filas de celdas de tabla regulares. Copie y pegue el extracto en una página web con la ayuda del Bloc de notas o un editor de código.
| domingo | Lunes | Martes | Miércoles | Jueves | Viernes | sábado |
|---|
Este código creará la tabla y el título. La tabla utiliza un nombre de identificación llamado "calendario" en caso de que el sitio web utilice tablas en otras páginas.
Paso 2
Agregue un par de etiquetas corporales debajo de la etiqueta "":
Paso 3
Copie el siguiente código y péguelo entre "
" seis veces:Este código creará cada fila con siete celdas, de modo que al agregar seis de ellas, el calendario tendrá todos los espacios de datos que necesita para todos los meses del año.
Paso 4
Agregue fechas al calendario según el mes que desea mostrar. Consulta un calendario real y ten cuidado de no saltarte ni repetir una fecha. Incluya cada fecha con las etiquetas "" para que pueda personalizar los números más tarde:
Paso 5
Tenga en cuenta los eventos en las celdas que contienen fechas relevantes. Los eventos deben estar fuera de las etiquetas "" pero dentro de "
’:
¡Fiesta de Halloween!
Último día de inscripción.
Personaliza el calendario
Paso 1
Busque el "
El esquema es opcional, pero esta es la forma más apropiada de agregar bordes a las tablas en las páginas web actuales.
Paso 2
Personaliza el título de la tabla con un color para las letras y otro para el fondo:
thead calendar {
color: #ffffff; color de fondo: azul oscuro; font-weight: negrita; }
Es posible utilizar código hexadecimal o el nombre de los colores. Este título mostrará texto blanco sobre un fondo azul marino.
Paso 3
Relleno, bordes, ancho y posición en relación con las celdas de la tabla:
el calendario,
td calendar {
relleno: 20px; borde: 1px negro sólido; ancho: 100px; posición: relativa; }
La ubicación relativa permite al programador colocar fechas en forma de números en las esquinas de las celdas de la tabla más adelante. No establezca una altura, ya que esto restringirá la cantidad de texto que puede agregar a cualquier fecha.
Paso 4
Crea los números usando el relleno, el color de fondo y el posicionamiento absoluto:
td span calendar {
font-weight: negrita; posición: absoluta; abajo: 0; derecha: 0; bloqueo de pantalla; relleno: 5px; color de fondo: #eeeeee; }
Debe incluir "display: block" para que las etiquetas "" actúen como cuadros en la página web, de lo contrario no podrá completarlas. Este código de muestra crea un cuadro gris tenue en la esquina inferior izquierda de cada espacio de fecha, mostrando el número de fecha.