Aunque las tablas cayó en desgracia cuando se trata de la construcción de la totalidad de las páginas web de disposiciones, que todavía funcionan bien para los calendarios de codificación en HTML. Calendarios mostrar datos tabulares en cierto modo, ya que se organizan en una cuadrícula de fechas con columnas llamadas, por ejemplo, los días de la semana. Algunos código CSS adicional tendrá una cuadrícula aburrido de los 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 fecha y eventos, también debe usar CSS para dar formato a las fechas de una manera que mantiene ambas piezas de información legible.
Instrucciones
Construir la tabla HTML
1
Crear una tabla para estructurar su calendario. Esta tabla requiere un encabezado con siete células, uno para cada día de la semana. También necesita otros seis filas de celdas de la tabla regulares. Copia y pega esto en tu página web utilizando el Bloc de notas o un editor de código:
<Table id = "calendario">
<Thead>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</ Thead>
</ 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 del cuerpo por debajo de la mesa "<thead>" tag:
<Tbody>
</ Tbody>
3
Copia el siguiente código y pegarlo entre "<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 las fechas para el calendario según el mes que desea mostrar. Recomendar a un calendario real y tener cuidado de no omitir o repetir una fecha. Envuelva cada fecha en "<span>" etiquetas para que pueda estilo de los números más tarde:
<Td> <span> 31 </ span> </ td>
5
Escriba sus eventos en las células que contienen sus fechas correspondientes. Los eventos deben salir de los "<span>" etiquetas pero dentro de los "<td>" etiquetas. Si la adición de más de un evento a una celda, 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 los "<style>" etiquetas en el código HTML, o añadirlos entre "<head>" etiquetas. Escriba su regla primer estilo, dirigido a toda la mesa, 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 agregar bordes a las tablas en las páginas web modernas.
7
El estilo de su cabecera de la tabla con un color de fuente y color de fondo:
calendario thead {
de color: #ffffff;
background-color: azul oscuro;
font-weight: bold;
}
Puede utilizar código hexadecimal o colores con nombre. Esta cabecera muestra texto en blanco sobre un fondo azul marino.
8
Dé el relleno, bordes, anchura y posición relativa de sus celdas de la tabla:
º calendario, calendario td {
padding: 20px;
frontera: 1px solid negro;
width: 100px;
position: relative;
}
Posicionamiento relativo le permite colocar los números de fecha en las esquinas de las celdas de la tabla después. No establezca una altura, porque eso va a restringir la cantidad de texto que puede agregar a cualquier fecha.
9
Crear los números usando relleno, un color de fondo y el posicionamiento absoluto:
td calendario lapso {
font-weight: bold;
position: absolute;
inferior: 0;
derecha: 0;
display: block;
padding: 5px;
background-color: #eeeeee;
}
Usted debe incluir "display: block" para hacer "<span>" etiquetas actúan como cajas de 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.