WEB TASARIMI- HTML TABLOLAR SAVAŞ TUNÇER

... konulu sunumlar: "WEB TASARIMI- HTML TABLOLAR SAVAŞ TUNÇER"— Sunum transkripti:

1 WEB TASARIMI- HTML TABLOLAR SAVAŞ TUNÇER

2 HTML - Tablolar İşte tablolar, SonbaharKışİlkbaharYaz EylülAralıkMartHaziran EkimOcakNisanTemmuz KasımŞubatMayısAğustos Tabloyu renklendirelim, SonbaharKışİlkbaharYaz EylülAralıkMartHaziran EkimOcakNisanTemmuz KasımŞubatMayısAğustos

3 Öncelikle... etiketlerini yazıyoruz ve arasını doldurmaya başlıyoruz. etiketi ile satırları etiketi ile de sütunları oluşturuyoruz.

4 hücre1hücre2 hücre3hücre4 hücre1 hücre2 hücre3 hücre4

5 Parametreler border parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar.

6 Parametreler cellpading parametresi hücre içi marj(yazı ve hücre duvarı arasındaki mesafe) değerini belirtir. cellpading=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar.

7 Parametreler cellspacing parametresi hücreler arası marjı belirler.

8 Parametreler align parametresi tabloyu düşey hizalamada kullanılır, align=left sola, align=right sağa dayalı yapar, align=center ortalar

9 Parametreler width ve height parametreleri resimler konusunda gördüğümüz gibi tabloda en ve boy uzunluğunu belirtir. Tablonun değer verilmediğinde sahip olduğu normal ölçülerinden küçük değerler verilirse bu değerler dikkate alınmaz, bir başka deyişle tabloyu büyütebiliriz fakat küçültemeyiz.

10 Parametreler bgcolorHücrenin içinin rengini belirler. backgroundHücre içine resim koyar. border Hücre etrafına yerleştireceğiniz çerçevenin kalınlığını belirler bordercolorÇerçeve rengini belirler bordercolorlight Çerçevenin sol ve üst kenarlarının rengini belirler bordercolordark Çerçevenin sağ ve alt kenarlarının rengini belirler.

11 Bazı Renk Kodları 1.#000000=black(siyah)1.#000080=navy(lacivert) 1.#0000FF=blue(mavi)1.#008000=green(yeşil) 1.#008080=teal(koyu yeşil)1.#00FF00=lime(parlak yeşil) 1.#00FFFF=aqua(turkuaz)1.#800000=maroon(vişne çürüğü) 1.#800080=purple(mor)1.#808000=olive(zeytuni yeşil) 1.#808080=gray(gri)1.#C0C0C0=silver(gümüşi gri) 1.#FF0000=red(kırmızı)1.#FF00FF=fuchsia(parlak pembe) 1.#FFFF00=yellow(sarı)1.#FFFFFF=white(beyaz)

12 Örnek : hücre1 hücre2 hücre3 hücre4 hücre1 hücre2 hücre3 hücre4

13 Örnek : ABCD EFGH IJKL A B C D E F G H I J K L

14 Tablolarda Hücre Birleştirme Aynı satırdaki hücreleri birleştirmek için colspan, aynı sütundaki hücreleri birleştirmek için de rowspan parametresini kullanıyoruz. Birleştirilen hücreye ait.. etiketini siliyoruz.

15 Tablolarda Hücre Birleştirme ACD EH IJKL A C D E H I J K L

16 Tablolarda Hücre Birleştirme AB C D E FH JL A B C D E F H J L

17 Tablolarda Hücre Birleştirme Haftalık ders programı abcd ghİ jkL mN

18 A B C D E F G H I J

19 A B C D E F G H I

20