En este artículo, crearemos un calendario usando HTML y CSS. Primero, tenemos que saber un poco sobre HTML. Si alguien no sabe HTML y CSS, no podrá mejorar el calendario. El enfoque principal de este artículo es sobre las etiquetas HTML y la forma en que vamos a utilizar CSS.
Enfoque: Primero usaremos la etiqueta de la tabla, que se usará para crear la estructura del calendario. Esto nos dará una idea de cómo se crea el calendario usando HTML. Posteriormente aplicaremos alguna propiedad CSS para mejorar el diseño del calendario.
Creación de la estructura: en esta sección, crearemos primero la estructura del calendario usando la etiqueta <table>. Así que esto nos ayudará a obtener la estructura del calendario.
HTML
<!DOCTYPE html> <html> <body> <!-- Here we are using attributes like cellspacing and cellpadding --> <!-- The purpose of the cellpadding is the space that a user want between the border of cell and its contents--> <!-- cellspacing is used to specify the space between the cell and its contents --> <h2 align="center" style="color: orange;"> January 2021 </h2> <br /> <table bgcolor="lightgrey" align="center" cellspacing="21" cellpadding="21"> <!-- The tr tag is used to enter rows in the table --> <!-- It is used to give the heading to the table. We can give the heading to the top and bottom of the table --> <caption align="top"> <!-- Here we have used the attribute that is style and we have colored the sentence to make it better depending on the web page--> </caption> <!-- Here th stands for the heading of the table that comes in the first row--> <!-- The text in this table header tag will appear as bold and is center aligned--> <thead> <tr> <!-- Here we have applied inline style to make it more attractive--> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>sat</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td>1</td> <td>2</td> </tr> <tr></tr> <tr> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> </tr> <tr> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> <td>22</td> <td>23</td> </tr> <tr> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> </tr> <tr> <td>31</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table> </body> </html>
Producción:
Diseño CSS y sus atributos: Usaremos algunas propiedades CSS y atributos de la etiqueta de la tabla para diseñar el calendario. Los atributos que vamos a utilizar son el borde y el espaciado de celdas y el relleno de celdas . Aquí hemos usado una propiedad interesante de CSS que es border-collapse. El propósito del colapso de borde es hacer que todo el borde se colapse en un solo borde. Aquí también hemos utilizado el atributo de estilo en línea para que las fechas de febrero sean poco visibles.
Código CSS:
table {
border-collapse: collapse;
background: white;
color: black;
}
th, td {
font-weight: bold;
}
Atributos que usaremos en la etiqueta de la tabla:
<table bgcolor="lightgrey" align="center"
cellspacing="21" cellpadding="21">
Código final: Esta es la combinación de todos los códigos anteriores
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
background: white;
color: black;
}
th,
td {
font-weight: bold;
}
</style>
</head>
<body>
<!-- Here we are using attributes like
cellspacing and cellpadding -->
<!-- The purpose of the cellpadding is
the space that a user want between
the border of cell and its contents-->
<!-- cellspacing is used to specify the
space between the cell and its contents -->
<h2 align="center" style="color: orange;">
January 2021
</h2>
<br />
<table bgcolor="lightgrey" align="center"
cellspacing="21" cellpadding="21">
<!-- The tr tag is used to enter
rows in the table -->
<!-- It is used to give the heading to the
table. We can give the heading to the
top and bottom of the table -->
<caption align="top">
<!-- Here we have used the attribute
that is style and we have colored
the sentence to make it better
depending on the web page-->
</caption>
<!-- Here th stands for the heading of the
table that comes in the first row-->
<!-- The text in this table header tag will
appear as bold and is center aligned-->
<thead>
<tr>
<!-- Here we have applied inline style
to make it more attractive-->
<th style="color: white; background: purple;">
Sun</th>
<th style="color: white; background: purple;">
Mon</th>
<th style="color: white; background: purple;">
Tue</th>
<th style="color: white; background: purple;">
Wed</th>
<th style="color: white; background: purple;">
Thu</th>
<th style="color: white; background: purple;">
Fri</th>
<th style="color: white; background: purple;">
Sat</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
</tr>
<tr></tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por codingbeast12 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA