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

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 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 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 TABLOLAR SonbaharKışİlkbaharYaz EylülAralıkMartHaziran EkimOcakNisanTemmuz KasımŞubatMayısAğustos İşte Tablolar,

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

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

8 TABLOLAR Tablonun iskeleti farklıdır.

9 Tablolar belirteci ile başlar. ……

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

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

12 Tablolar hücre

13 Tablolar hücre1 hücre2

14 Tablolar hücre1 hücre2

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

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

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 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 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 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 Tablo Başlığı (thead) alt-yazı (caption) 1.Sütun 2.Sütun 3.Sütun</th hücre1 hücre2 hücre3

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

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

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

25 Parametreler Tablolar hücre

26 Parametreler Tablolar hücre

27 Parametreler Tablolar hücre

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 Parametreler Tablolar hücre

30 Parametreler Tablolar hücre

31 Parametreler

32 Parametreler Tablolar hücre

33 Parametreler

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

35 Parametreler Tablolar hücre1 hücre2

36 Parametreler

37 Parametreler Tablolar hücre1 hücre2

38 Parametreler

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

40 Parametreler hücre1 hücre2

41 Parametreler hücre1 hücre2

42 Parametreler hücre1 hücre2

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 Parametreler hücre1 hücre2

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

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

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

48 Parametreleri

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

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

51 Parametreleri

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

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 Parametreleri hücre1 hücre2 hücre3 hücre4

55 Parametreleri hücre1

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 Parametreleri hücre1 hücre2 hücre3

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 Parametreleri hücre1 hücre2 hücre3

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 Hücre Birleştirme ABCD EFGH IJKL

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

63 Hücre Birleştirme

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 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 Hücre Birleştirme A C D E H I J K L ACD E H IJKL

67 Hücre Birleştirme

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 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 Hücre Birleştirme A B C D E F H J L ABCD EFGH IJKL AB C D E FH JL

71 Hücre Birleştirme