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.