Despre HTML table. Exemplu CSS. Calendar

Nu stiu cum altii dar eu de la <table> am un pic de frica :) Nu atunci cind il folosesc in mod traditional pentru reprezentarea unor date de exemplu, dar atunci cind este nevoie de un tabel complex cu multe rinduri,coloane, celule care nu sunt simetrice etc. Atunci din cauza numarului mare de tag-uri <tr>, <td> e un pic dificil de descurcat codul. Din fericire cei de la W3C au venit in ajutorul nostru cu un set de taguri si atribute ajutatoare.
Tag-ul <caption> si atributul summary sunt folosite in head-ul tabelelor, nu sunt obligatorii dar sunt de mare ajutor uneori, eu le-am folosit in exemplul ce urmeaza pentru a arata luna curenta in cadrul calendarului.
Alte taguri sunt <thead>, <tbody> si <tfoot> la fel nu sunt obligatorii dar ajuta mult la divizarea tabelului in cap, corp si subsol din punct de vedere logic. E posibil de folosit doar o singura data thead si tfoot iar tbody de cite ori doriti.
Folosind <tr> putem organiza formatarea rindurilor dintr-un tabel, dar de multe ori e nevoie de formatat anumite coloane, HTML ne pune la dispozitie doua taguri: <colgroup> si <col>, din pacate nu toate browserele "inteleg" aceste taguri.
Pentru a vedea intr-un exemplu practic cum pot fi implementate aceste taguri, mai jos o sa va arat un exemplu de calendar dintr-un tutorial.
Codul HTML
 <table class="calendar" summary="Calendar Date Picker">
        <caption>
            <a href="#" rel="prev">&lt;</a> Septembrie 2010
            <a href="#" rel="next">&gt;</a>
        </caption>
        <colgroup>
            <col id="lun"/>
            <col id="mar"/>
            <col id="mie"/>
            <col id="joi"/>
            <col id="vin"/>
            <col id="sim"/>
            <col id="dum"/>
        </colgroup>
        <thead>
            <tr>
                <th scope="col">Lun</th>
                <th scope="col">Mar</th>
                <th scope="col">Mie</th>
                <th scope="col">Joi</th>
                <th scope="col">Vin</th>
                <th scope="col">Sim</th>
                <th scope="col">Dum</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="null">30</td>
                <td class="null">31</td>
                <td><a href="#">1</a></td>
                <td><a href="#">2</a></td>
                <td><a href="#">3</a></td>
                <td><a href="#">4</a></td>
                <td><a href="#">5</a></td>
            </tr>
            <tr>
                <td><a href="#">6</a></td>
                <td><a href="#">7</a></td>
                <td><a href="#">8</a></td>
                <td><a href="#">9</a></td>
                <td class="selected"><a href="#">10</a></td>
                <td><a href="#">11</a></td>
                <td><a href="#">12</a></td>
            </tr>
            <tr>
                <td><a href="#">13</a></td>
                <td><a href="#">14</a></td>
                <td><a href="#">15</a></td>
                <td><a href="#">16</a></td>
                <td><a href="#">17</a></td>
                <td><a href="#">18</a></td>
                <td><a href="#">19</a></td>
            </tr>
            <tr>
                <td><a href="#">20</a></td>
                <td><a href="#">21</a></td>
                <td><a href="#">22</a></td>
                <td><a href="#">23</a></td>
                <td><a href="#">24</a></td>
                <td><a href="#">25</a></td>
                <td><a href="#">26</a></td>
            </tr>
            <tr>
                <td><a href="#">27</a></td>
                <td><a href="#">28</a></td>
                <td><a href="#">29</a></td>
                <td><a href="#">30</a></td>
                <td class="null">1</td>
                <td class="null">2</td>
                <td class="null">3</td>
            </tr>
        </tbody>
    </table>


Codul CSS
table.calendar{
    border-collapse:separate;
    border-spacing:0;
    border:0;
    text-align:center;
    color:#333;
}
.calendar th, .calendar td{
    margin:0;
    padding:0;
}
.calendar caption{
    font-size:1.25em;
    padding-top:0.692em;
    padding-bottom:0.692em;
    background-color:#d4dde6;
}
.calendar caption[rel="prev"]{
    float:left;
    margin-left:0.2em;
}
.calendar caption[rel="next"]{
    float:right;
    margin-right:0.2em;
}
.calendar caption a{
     color:#333;
     text-decoration:none;
     font-weight:bold;
}
.calendar caption a:hover,
.calendar caption a:active,
.calendar caption a:focus{
    background-color:#6d8ab7;
  
}
.calendar thead th{
    background-color:#d4dde6;
    border-bottom:solid 1px #a9bacb;
    font-size:0.875em;
}
.calendar tbody {
    color:#a4a4a4;
    text-shadow: 1px 1px 1px white;
    background-color:#d0d9e2;
}
.calendar tbody td{
    border-top:solid 1px #e0e0e1;
    border-right:solid 1px #9f9fa1;
    border-bottom:solid 1px #acacad;
    border-left:solid 1px #dfdfe0;
}
.calendar tbody a{
    display:block;
    text-decoration:none;
    color:#333;
    background-color:#c0c8d2;
    font-weight:bold;
    padding:0.385em 0.692em 0.308em 0.692em;
}
.calendar tbody a:hover,
.calendar tbody a:focus,
.calendar tbody a:active,
.calendar tbody .selected a:link,
.calendar tbody .selected a:visited,
.calendar tbody .selected a:hover,
.calendar tbody .selected a:focus,
.calendar tbody .selected a:active{
    background-color:#6d8ab7;
    color:white;
    text-shadow: 1px 1px 1px #22456b;
}
.calendar tboby td:hover,
.calendar tbody td.selected{
  border-top: 1px solid #2a3647;
  border-right: 1px solid #465977;
  border-bottom: 1px solid #576e92;
  border-left: 1px solid #466080;
}

Codul CSS cit si HTML este un pic mai complicat decit in exemplele precedente, dar daca o sa-l aplicati in practica o sa aveti un Calendar Date Picker de toata frumusetea :)
Iata ce mi s-a primit mie:

Un comentariu:

  1. Prea multa munca... nu merita ... sunt foarte multe site-uri care oferă deja un calendar gata făcut (poți alege din cele n stiluri unu mai fabulos decât precedentul).... Oricum felicitări pentru munca depusa !
    Ps: lipsește jQ !

    RăspundețiȘtergere