Calendario con HTML ~ TECNOLOGIA FULL

como bien sabemos un calendario no es mas que un impreso de días del año ordenados por meses y semanas, haremos algo igual pero en Html con CSS.

Calendario con html y CSS

Este es el calendario que realizaremos hoy paso a paso, cada columna y fila.

recuerden que para trabajar con las tablas usaremos las etiquetas <table>, <td>, <th>,<tr>.

para crear una fila usaremos la etiqueta tr si queremos tener muchas columnas en una sola fila usaremos la etiqueta th o td.

explicaremos la diferencia entre th y td, pero antes de todo sepan que ambos hacen la misma función, la única diferencia esta en que th centraliza los atributos y las pone en negrita.

iremos creando nuestro calendario y mostrando como se va quedando.

calendario html con eventos y este es el primer evento paso a paso

el codigo del primer evento de calendario con html

El atributo Colspan permite unir celdas, hemos usado el 7 porque la semana va de lunes a Domingo hay siete espacios en el siguiente <th> ósea la etiqueta de las líneas se mostrara claramente.

calendario en html codigo, con su segundo evento

seguimos creando celdas y poner atributos con la etiqueta <th>

Seguimos con nuestro calendario y hemos añadido números aquí en este código podemos ver que hemos usado la etiqueta td y no th, como sabéis los dos ejecutan casi la misma funcion.

Continuamos con el código y seguimos incremento números dependiendo del mes en el que estamos

etiqueta td usado en nuestro calendario html

FIN del código, todo se ha quedado como lo hemos propuesto desde el inicio y el código completo del calendario que veníamos trabajando puedes conseguirlo aquí, obten codigo del calendario para web.

Código html de calendario

<html>
<head>
<meta charset="utf-8">
 <title> Calendrier tm</title>
<style>
    td,th{
        border:1px solid gray;
        border-calor:gray;
        
    }
    tr
    {
        border:4px solid black;
    }
    table
    {
        border:4px solid gray;
    }
    
</style>
</head>
<body><center>
<table width="500" border="1">
<caption>Calendrier 2014</caption>

<tr  height="50">
    <th width="50" rowspan="7">2 <br/> 0 <br/> 1 <br/> 4 </th>
    <th colspan="7">JUILLET</th>
    <th colspan="7">AOUT</th>
    <th colspan="7">SEPTEMBRE</th>
    <th width="100" >OCTOBRE</th>
    <th width="100">NOVEMBRE</th>
    <th width="100">DECEMBRE</th>
</tr>

<tr>
    <th>Lun</th>
    <th>Mar</th>
    <th>Mer</th>
    <th>Jeu</th>
    <th>Ven</th>
    <th>Sam</th>
    <th>Dim</th>
    
    <th>Lun</th>
    <th>Mar</th>
    <th>Mer</th>
    <th>Jeu</th>
    <th>Ven</th>
    <th>Sam</th>
    <th>Dim</th>
    
    <th>Lun</th>
    <th>Mar</th>
    <th>Mer</th>
    <th>Jeu</th>
    <th>Ven</th>
    <th>Sam</th>
    <th>Dim</th>
</tr>

<tr>
    <td>     </td>
    <td>1</td>
    <td>2</td>
    <td>3 </td>
    <td> 4</td>
    <td> 5 </td>
    <td> 6 </td>
    
    <td>     </td>
    <td>     </td>
    <td>      </td>
    <td>      </td>
    <td> 1  </td>
    <td> 2  </td>
    <td> 3  </td>
    
    <td>1   </td>
    <td> 2  </td>
    <td> 3   </td>
    <td> 4  </td>
    <td> 5  </td>
    <td>  6  </td>
    <td>  7  </td>
</tr>


<tr>
    <td>7   </td>
    <td> 8  </td>
    <td>  9  </td>
    <td>    10  </td>
    <td>     11  </td>
    <td>12     </td>
    <td>13      </td>
    
    <td>4   </td>
    <td> 5  </td>
    <td>  6   </td>
    <td>    7 </td>
    <td>     8 </td>
    <td>      9 </td>
    <td>     10 </td>
    
    <td>8   </td>
    <td> 9  </td>
    <td>  10  </td>
    <td> 11 </td>
    <td>12  </td>
    <td>13 </td>
    <td>14     </td>
</tr>


<tr>
    <td>14</td>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td> 20</td>
    
    <td>11  </td>
    <td> 12  </td>
    <td>  13   </td>
    <td>    14  </td>
    <td> 15  </td>
    <td>   16  </td>
    <td>     17  </td>
    
    <td>15   </td>
    <td> 16  </td>
    <td>    17 </td>
    <td> 18   </td>
    <td>  19    </td>
    <td>   20  </td>
    <td> 21</td>
    
</tr>


<tr>
    <td>21   </td>
    <td> 22  </td>
    <td> 23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td> 21 </td>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
    
</tr>


 <tr>
    <td>28</td>
    <td>29</td>
    <td>30</td>
    <td>31</td>
    <td>      </td>
    <td>       </td>
    <td>      </td>
    
    <td>25  </td>
    <td> 26  </td>
    <td>  27  </td>
    <td>    28 </td>
    <td>     29  </td>
    <td>      30 </td>
    <td>     31 </td>
    
    <td>29   </td>
    <td> 30   </td>
    <td>     </td>
    <td>     </td>
    <td>      </td>
    <td>       </td>
    <td>      </td>
</tr>
</table>

</center>
</body>
</html>
    
    

Veamos como funcionan las tablas desde cero tablas en html

TECNOLOGIA FULL

lunes, 15 de marzo de 2021