Tecnología

Inicio

Cómo construir un calendario de eventos de HTML

August 22

Cómo construir un calendario de eventos de HTML


Aunque las tablas cayó en desgracia cuando se trata de la construcción de la totalidad de los diseños de página web, que todavía funcionan bien para los calendarios de codificación en HTML. Calendario muestra los datos tabulares de una manera, ya que están organizados en una cuadrícula de fechas con columnas, por ejemplo, los días de la semana. Parte del código CSS adicional tendrá una rejilla aburrida de nombres y números entre semana y hacer que se vea más como un calendario. Desde calendarios de eventos necesitan espacios para ambos números de fechas y eventos, también se debe usar CSS para dar formato a las fechas de una manera que mantiene ambas piezas de información legible.

Instrucciones

Construir tabla HTML

1 Crear una tabla para estructurar su calendario. Esta tabla requiere un encabezado con siete células, una para cada día de la semana. También es necesario más de seis hileras de celdas de la tabla regulares. Copiar y pegar este a su página Web utilizando el Bloc de notas o un editor de código:

<Table id = "calendario">
<Thead>

&lt;th>Sunday&lt;/th>
&lt;th>Monday&lt;/th>
&lt;th>Tuesday&lt;/th>
&lt;th>Wednesday&lt;/th>
&lt;th>Thursday&lt;/th>
&lt;th>Friday&lt;/th>
&lt;th>Saturday&lt;/th>

</ Culata en T>
</ Table>

Este código será crear la tabla y la cabecera. La tabla utiliza un nombre de identificación de "calendario" en caso de que su página web utiliza tablas en otras páginas.

2 Añadir un par de etiquetas cuerpo de la tabla por debajo de la etiqueta "<thead>":

<Tbody>
</ Tbody>

3 Copia el siguiente código y pegarlo entre los "<tbody>" etiquetas seis veces:

<Tr>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
</ Tr>

Este código creará cada fila de siete células, por lo que cuando se agrega seis de ellos, su calendario tendrá todos los espacios fecha que necesita para cualquier mes del año.

4 Añadir fechas en su calendario dependiendo del mes que desea visualizar. Consulte a un calendario real y tener cuidado de no saltar o repetir una fecha. Envolver cada fecha en "<span>" etiquetas por lo que puede estilo de los números más adelante:

<Td> <span> 31 </ span> </ td>

5 Escribir sus eventos en las células que contienen sus fechas correspondientes. Los eventos deben salir de los "<span>" etiquetas, pero dentro de las etiquetas "<td>". Si la adición de más de un evento a una célula, envolver cada una en un par de "<p>" etiquetas:

<Td> <span> 31 </ span>
<P> Fiesta de Halloween! </ P>
<P> El último día para la presentación. </ P>
</ Td>

estilo Calendario

6 Busque la sección "<style>" etiquetas en el código HTML, o añadirlos entre los "<head>" etiquetas. Escribe su primera regla de estilo, dirigido a toda la tabla, entre los "<style>" etiquetas:

<Style type = "text / css">

calendario {

border: 1px solid black;

}
</ Style>

La frontera es opcional, pero esta es la forma correcta de añadir bordes a las tablas en las páginas web modernos.

7 El estilo de su cabecera de la tabla con un color de fuente y color de fondo:

thead calendario {

de color: #ffffff;
background-color: azul oscuro;
font-weight: bold;
}

Puede utilizar cualquiera de código hexadecimal o colores con nombre. Esta cabecera muestra texto en blanco sobre un fondo azul marino.

8 Dar relleno, las fronteras, la anchura y la posición relativa de sus celdas de la tabla:

º calendario, calendario td {

padding: 20px;
frontera: 1px solid negro;
Anchura: 100px;
position: relative;
}

El posicionamiento relativo le permite colocar los números de fecha en las esquinas de las celdas de la tabla más adelante. No establezca una altura, porque eso va a restringir la cantidad de texto que puede añadir a cualquier fecha.

9 Crear los números usando el relleno, un color de fondo y la posición absoluta:

lapso de calendario td {

font-weight: bold;
position: absolute;
parte inferior: 0;
derecha: 0;
bloqueo de pantalla;
padding: 5px;
background-color: #eeeeee;
}

Debe incluir "display: block" para hacer "<span>" etiquetas actúan como cajas en la página Web, de lo contrario no se les puede dar el acolchado. Este ejemplo de código crea un cuadro de color gris claro en la esquina inferior derecha de cada espacio de la fecha, que muestra el número de fecha.