Tabela z zaokraglonymi rogami
Transkrypt
Tabela z zaokraglonymi rogami
Tworzenie "ramek" z zaokrąglonymi rogami. Aby wstawić na stronę taki element trzeba najpierw narysować w dowolnym programie graficznym wszystkie cztery narożniki o wymiarach np.: 5 x 5, lub 10 x 10 pixeli, w zależności od potrzeby, np.: Następnie tworzymy tabelę z trzema kolumnami i trzema wierszami. W komórkach narożnych wstawiamy narysowane wcześniej obrazki, natomiast w pozostałych komórkach ustalamy kolor tła, taki sam jak kolor rysunków narożników i umieszczamy przezroczysty obrazek, w naszym przypadku #00ff00ff. W komórce centralnej wpisujemy właściwą treść tabelki: Przykład 1: <table cellpadding="0" cellspacing="0"> <tr><td style="line-height: 1px"><img src="lg.gif" alt="" /></td><td bgcolor="#00ff00" style="line-height: 1px"><img src="0.gif" alt="" /></td><td style="line-height: 1px"><img src="pg.gif" alt="" /></td></tr> <tr><td bgcolor="#00ff00"><img src="0.gif" alt="" /></td><td bgcolor="#00ff00"> <b>Tabelka z zaokrąglonymi rogami</b> </td><td bgcolor="#00ff00"><img src="0.gif" alt="" /></td></tr> <tr><td style="line-height: 1px"><img src="ld.gif" alt="" /></td><td bgcolor="#00ff00" style="line-height: 1px"><img src="0.gif" alt="" /></td><td style="line-height: 1px"><img src="pd.gif" alt="" /></td></tr> </table> Efekt: Tabelka z zaokrąglonymi rogami Aby otrzymać taki efekt wystarczy narysować cztery małe obrazki (np o rozmiarach 10x10 pikseli) Przykład 2: <table cellpadding="0" cellspacing="0"> <tr><td style="line-height: 10px"><img src="lg.jpg" height="10px"></td><td bgcolor="#00ff00" style="lineheight: 10px"></td><td style="line-height: 1px"><img src="pg.jpg" height="10px"></td></tr> <tr><td bgcolor="#00ff00"></td><td > <b>Tabelka z zaokrąglonymi rogami</b> <b>Tabelka z zaokrąglonymi rogami</b> <br> <b>Tabelka z zaokrąglonymi rogami</b> <b>Tabelka z zaokrąglonymi rogami</b> <br> <b>Tabelka z zaokrąglonymi rogami</b> <b>Tabelka z zaokrąglonymi rogami</b> <br> <b>Tabelka z zaokrąglonymi rogami</b> </td><td bgcolor="#00ff00"></td></tr> <tr><td style="line-height: 10px"><img src="ld.jpg" height="10px"></td><td bgcolor="#00ff00" style="lineheight: 10px"></td><td style="line-height: 1px"><img src="pd.jpg" height="10px"></td></tr> </table> Efekt: Zadanie: Na podstawie przykładów wykonaj tabelkę z zaokrąglonymi rogami.