1 İNTERNET PROGRAMCILIĞI - 1 TABLOLAR Öğr.Gör. Serkan KORKMAZ Harran Üniversitesi Birecik Meslek Yüksekokulu.

... konulu sunumlar: "1 İNTERNET PROGRAMCILIĞI - 1 TABLOLAR Öğr.Gör. Serkan KORKMAZ Harran Üniversitesi Birecik Meslek Yüksekokulu."— Sunum transkripti:

1 1 İNTERNET PROGRAMCILIĞI - 1 TABLOLAR Öğr.Gör. Serkan KORKMAZ Harran Üniversitesi Birecik Meslek Yüksekokulu

2 2 GİRİŞ Tablolar, Sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli yapı taşlarındandır.

3 3 GİRİŞ Tablolar, Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece istediğiniz düzenlemeyi yapabilirsiniz.

4 4 TABLOLAR Ekranda tablo gösterirken, o an kullanılan pencerenin büyüklüğüne ve tablo içindeki metnin genişliğine göre tablonun eni ve boyu değişebilir. Tablo, satır ve sütunlardan oluştuğu için her hücre ayrı ayrı tanımlanır. Her satır ve sütun, kendi içinde başka satır ve sütunları ihtiva edebilir ve diğer satır ve sütunlarla birleştirilebilir. Tablolara başlık, liste, paragraf, form, figür ve her formatta metin konabilir.

5 5 TABLOLAR SonbaharKışİlkbaharYaz EylülAralıkMartHaziran EkimOcakNisanTemmuz KasımŞubatMayısAğustos İşte Tablolar,

6 6 TABLOLAR Tabloyu renklendirelim, SonbaharKışİlkbaharYaz EylülAralıkMartHaziran EkimOcakNisanTemmuz KasımŞubatMayısAğustos

7 7 TABLOLAR Başka bir örnek, ÖLÇÜLER BoyKilo 1Ahmet 1.7780 2Ayşe 1.8275 3Kerim 1.7583

8 8 TABLOLAR Tablonun iskeleti farklıdır.

9 9 Tablolar belirteci ile başlar. ……

10 10 Tabloda satır oluşturmayı sağlar.

11 11 Tabloda sütun oluşturmayı sağlar.

12 12 Tablolar hücre

13 13 Tablolar hücre1 hücre2

14 14 Tablolar hücre1 hücre2

15 15 hücre1 hücre2 hücre3 hücre4

16 16 …………………. RAM 1.satır …………………. ROM 2.satır ………………….

17 17 Bu örneklerde de görüldüğü gibi tablolar satır ve sütunlardan oluşur. Tabloya genel bir başlık atayabiliriz. Her sütun için de kendi başlığını oluşturmak mümkündür. Üstteki tablo başlığının altında veya tablonun sona erdiği satırdan sonraki satıra açıklama (thead/caption) koyabiliriz. Ayrıca tablo hücrelerini yanındaki veya altındaki hücrelerle birleştirebiliriz. TABLOLAR

18 18 TABLOLAR Sütun Başlığı #1 Sütun Başlığı #2Sütun Başlığı #3Sütun Başlığı #4 hücre Tablonun alt yazısı(caption) Tablo Başlığı (thead)

19 19 Tablolar da HTML sayfasında olduğu gibi başlık (head) ve gövde (body) bölümlerine ayrılabilir. Başlık etiketleri arasına yazılır. Gövde etiketleri arasına yazılır. etiketi ile ikinci bir açıklama vermek mümkündür. Sütun başlıklarına gelince, her bir başlık etiketi ile belirtilir ve bunlar etiketinde olduğu gibi... arasına yazılır. Tabloda Başlık ve Gövde

20 20 Tabloda sütun başlıklarına gelince, Her bir başlık etiketi ile belirtilir. Bunlar etiketinde olduğu gibi... arasına yazılır. Tabloda satır ve sütunları belirten ve etiketleri... arasına alınır. Tabloda Başlık ve Gövde

21 21 Tablo Başlığı (thead) alt-yazı (caption) 1.Sütun 2.Sütun 3.Sütun</th hücre1 hücre2 hücre3

22 22 ………… hücre4 hücre5 hücre6 hücre7 hücre8 hücre9

23 23 <table border="...“ cellpadding="...“ cellspacing="...“ align="...“ width="...“ height="...“ > Parametreler

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

25 25 Parametreler Tablolar hücre

26 26 Parametreler Tablolar hücre

27 27 Parametreler Tablolar hücre

28 28 cellpadding parametresi hücre içi marj değerini belirtir. cellpadding=0 hücre içinde bulunan unsurun (metin/grafik) hücre çerçevesine bitişik olmasını sağlar. Parametreler

29 29 Parametreler Tablolar hücre

30 30 Parametreler Tablolar hücre

31 31 Parametreler

32 32 Parametreler Tablolar hücre

33 33 Parametreler

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

35 35 Parametreler Tablolar hücre1 hücre2

36 36 Parametreler

37 37 Parametreler Tablolar hücre1 hücre2

38 38 Parametreler

39 39 align parametresi tabloyu hizalamada kullanılır. align=left sola dayalı yapar. align=right sağa dayalı yapar. align=center ortalar Parametreler

40 40 Parametreler hücre1 hücre2

41 41 Parametreler hücre1 hücre2

42 42 Parametreler hücre1 hücre2

43 43 width (en-genişlik) height (boy-yükseklik) 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. Parametreler

44 44 Parametreler hücre1 hücre2

45 45 bgcolor="...“ background="..." width="...“ height="...“ align="...“ valign="..." Parametreleri

46 46 bgcolor parametresi hücreyi renklendirmede kullanılır. Parametreleri

47 47 Parametreleri hücre1 hücre2 hücre3 hücre4

48 48 Parametreleri

49 49 background parametresi ile hücreye arka zemin resmi yerleştirebiliriz. Parametreleri

50 50 Parametreleri hücre1 hücre2 hücre3 hücre4

51 51 Parametreleri

52 52 width (en-genişlik) height (boy-yükseklik) width ve height parametreleri ile hücrenin boyutlarını belirleyebiliriz. Parametreleri

53 53 Yalnız height komutu ile tek sütunlu bir tabloda her hücrenin yüksekliğini değiştirebilirken, width komutu ile her hücreyi değiştiremeyiz. En büyük width değeri tüm sütun için geçerli olacaktır. Aynı şekilde tek satırlı tabloda width değerini her hücre için değiştirebilirken en büyük height değeri tüm satır için geçerli olacaktır. Parametreleri

54 54 Parametreleri hücre1 hücre2 hücre3 hücre4

55 55 Parametreleri hücre1

56 56 align parametresi hücre içinde yatay hizalama yapar. align=left hücre içini sola dayalı yapar. align=right hücre içini sağa dayalı yapar. align=center hücre içini ortalar. Parametreleri

57 57 Parametreleri hücre1 hücre2 hücre3

58 58 valign parametresi hücre içinde dikey hizalama yapar. valign=top hücre içini dikey olarak yukarı hizalı yapar. valign=middle hücre içini dikey olarak ortalı yapar. valign=bottom hücre içini dikey olarak aşağı hizalı yapar. Parametreleri

59 59 Parametreleri hücre1 hücre2 hücre3

60 60 colspan aynı satırdaki hücreleri birleştirmek için kullanılır. rowspan aynı sütundaki hücreleri birleştirmek kullanılır. Birleştirilen hücreye ait.. etiketini siliyoruz. Hücre Birleştirme

61 61 Hücre Birleştirme ABCD EFGH IJKL

62 62 Hücre Birleştirme A B C D E F G H I J K L ABCD EFGH IJKL

63 63 Hücre Birleştirme

64 64 Hücre Birleştirme A ve B hücrelerini birleştirmek için; A hücresine ait etiketine colspan=2 parametresini ekliyoruz. B hücresine ait B etiketini siliyoruz. ACD E H IJKL

65 65 Hücre Birleştirme E, F ve G hücrelerini birleştirmek için; E hücresine ait etiketine colspan=3 parametresini ekliyoruz. F ve G hücrelerine ait F, G etiketlerini siliyoruz. ACD E H IJKL

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

67 67 Hücre Birleştirme

68 68 Hücre Birleştirme E ve I hücrelerini birleştirmek için; E hücresine ait etiketine rowspan=2 parametresini ekliyoruz. I hücresine ait I etiketini siliyoruz. ABCD EFGH IJKL AB C D E FH JL

69 69 Hücre Birleştirme C, G ve K hücrelerini birleştirmek için; C hücresine ait etiketine rowspan=3 parametresini ekliyoruz. G ve K hücrelerine ait G, K etiketlerini siliyoruz. ABCD EFGH IJKL AB C D E FH JL

70 70 Hücre Birleştirme A B C D E F H J L ABCD EFGH IJKL AB C D E FH JL

71 71 Hücre Birleştirme