Calendário

Nesse tutorial eu vou ensinar como fazer um calendário de HTML com tabela \o/! Seria bom se antes de ler esse tutorial você lesse o de Como Fazer uma Tabela ;).

Abra o editor de HTML que você usa ( ou o bloco de notas se você não usa nenhum. Eu uso o Dreamweaver da Macromedia <3 ) e crie um novo arquivo. No código, escreva:

<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>


Cada <tr></tr> representa uma linha no seu calendário, e cada <td></td> vai fazer uma nova coluna nessa linha do <tr>.Como as semanas tem ( ou pelo menos costumam *-*" ) ter 7 dias, vamos precisar de 7 <td>'s! Agora copie o código desde o <tr> até o </tr> e cole +-5/6 vezes, isso vai depender o mês e do número de dias dele. Lembre-se de que a 1ª linha vai ficar para os dias da semana.Não se assuste com o tamanho do código! O meu ficou assim ( calendário do mês de Junho de 2006 ):

<table>
<tr>
<td>D</td>
<td>S</td>
<td>T</td>
<td>Q</td>
<td>Q</td>
<td>S</td>
<td>S</td>
</tr>

<tr>
<td> </td>
<td> </td>
<td> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>

<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>

<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>

<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>

<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td> </td>
<td> </td>
</tr>

</table>

Eu já coloquei os dias do mês, é só ver em que dia da semana o 1º dia do mês cai e começar a contar por ali.

Esse calendário vai ficar assim:
D S T Q Q S S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30

Se você gostou do jeito que ele ficou assim pode parar o tutorial por aqui, mas abaixo vão algumas dicas de umas incrementadas que você pode dar:

•Calendário sem borda
Fica assim:
D S T Q Q S S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
Para o seu calendário ficar assim, troque a tag <table> por:

<table border="0">


•Calendário com borda
Fica assim:
D S T Q Q S S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
Para o seu calendário ficar assim, troque a tag <table> por:

<table border="1" bordercolor="#código da cor ">

Se você quiser uma borda só em volda do calendário, mas não nos dias, faça assim:

<table border="1" cellspacing="0" bordercolor="#código da cor ">


E troque o código dos <td>'s por:

<td style="border:0px">


D S T Q Q S S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30

•Deixar os dias da semana em negrito
Da uma diferenciada neles e fica bem legal. Exemplo:
D S T Q Q S S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
Um código mais rápido que que por <b></b> em todos os dias é trocar a 1ª tag <tr> por:

<tr style="font-weight:bold">


•Calendário listrado
Fica uma gracinha fazer uma coluna sim uma não com uma cor de fundo! A minha dica para isso é usar uma class de CSS, porque aí é só mudar em uma linha o código da cor quando você mudar de layout, porque se não você terá que trocar em vários lugares, fica bem trabalhoso!
D S T Q Q S S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
Para deixar os números e o background de cada <td> juntinhos, eu mudei a tag <table> para essa:

<table cellspacing="0">

E os meus <td>'s que ficaram diferentes ficaram com o código assim:

<td bgcolor="#666666" style="color:#FFFFFF">26</td>


Para marcar um dia no calendário, como o dia 3, pro exemplo, troque essa tag no código:

<td>3</td>

por essa:

<td title="O QUE VAI ACONTECER NESSE DIA"><b>3</b></td>

Se você quiser por uma imagem no calendário o código do dia fica assim:

<td><img src="ENDEREÇO DA IMG" title="O QUE VAI ACONTECER NESSE DIA" /></td>


•Calendário com o mês em cima
JUNHO
D S T Q Q S S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
É só acrescentar essa linha ao código da sua tabela, entre as tags <table> e <tr>:

<caption>JUNHO</caption>


Se esse tutorial te ajudar, não esqueça de linkar (:
Tutorial por Vevis - Winter-Dream.com . Não copie sem autorização Dúvidas?