com fer taules HTML amb les cantonades rodones? / 14 juny 2010

com fer taules HTML amb les cantonades rodones?

Vet aquí una solució que fa us de la propietat background de les etiquetes TD.

<table cellspacing="0px" cellpadding="0px" >
    <tr>
        <td style="padding:0px;
                   background-image:url('AmuntEsquerra.gif');
                background-position:left top;
                background-repeat:no-repeat;">               
            <table>
            <tr><td>

                 <!--Aquí va el contingut -->

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

        <td style="padding:0px;
                   background-image:url('AmuntDreta.gif');
                   background-position:left top;
                   background-repeat:no-repeat;"
            width="10px">
        </td>
    </tr>

    <tr>
        <td style="padding:0px;
                   background-image:url('AvallEsquerra.gif'); 
                   background-position:left top;
                   background-repeat:no-repeat;"
            height="10px">
        </td>

        <td style="padding:0px;
                   background-image:url('AvallDreta.gif'); 
                   background-position:left top;
                   background-repeat:no-repeat;"
            height="10px"
            width="10px">
        </td>
    </tr>
</table>

Com han de ser els gifs dels backgrounds?

AvallDreta.gif: el més petit de tots, la cantonada inferior-dreta.



AvallEsquerra.gif: la cantonada inferior esquerra i l'aresta inferior de la caixa.




AmuntDreta.gif: la cantonada superior dreta i l'aresta de la dreta



AmuntEsquerra.gif: ens proporciona el fons de la cel·la útil per mostrar informació. La resta de cel·les només tenen la missió de mostrar les cantonades rodones, és dir, només seran tan amples o altes com ho siguin la corba de la cantonada a mostrar.



Ara tenen sentit els valors de l'HTML, oi? El bo del cas és que el tamany de la caixa d'adaptarà al contingut de la cel·la TD superior esquerra. Cal tenir, doncs, la previsió de dimensionar el tamany dels gifs de backgrounds per a que siguin suficients per a les dades a mostrar.