Kullanıcı:Hatas/Viki tablo örnekleri: Revizyonlar arasındaki fark

İçerik silindi İçerik eklendi
Hatas (mesaj | katkılar)
tablo örnekleri
(Fark yok)

Sayfanın 15.44, 8 Temmuz 2020 tarihindeki hâli

Tablolara ilişkin genel bilgiler

Bazı HTML Renk Kodları
Arkaplana daha elverişli olanlar
#ffc1c1
#f2a179
#9dd3f2
#a0daf8
#9df2a4
#6ef7a7
#c5fcdc
#f29dd3
#f2f255
#9f9fff
#bc9df2
#ffcf96
#bfa269
Sadece çerçeveye uygun
#3399ff
#ffb466
#dd4814
#ff7070
Diğer
#aaaaaa
#d7d7d7
#e5e5e5
#f6f6f6
#f9f9f9
#ffffff (beyaz)
"transparent" parametresi (saydam)
Ubuntu renk paleti

Vikilerde tablo yazımı, HTML dilinde tablo yazımı ile büyük benzerlikler göstermektedir. Ancak HTML bilmeseniz dahi benim yaptığım gibi önemli parametrelerin ne anlama geldikleri hakkında kendinize bir kaç küçük not çıkarıp denemeler yaparak ve elinizde bir kaç örnek tablo bulundurarak istediğiniz biçimde tablolar oluşturabilir ve mevcut tabloları rahatlıkla değiştirip düzenleyebilirsiniz.

Tablo yazımı konusunda temel düzeyde bilgi edinmek için Yardım:Tablo sayfasına bakabilirsiniz.


  • Viki kodlamasında tablolar {| satırıyla başlar ve |} satırıyla biter.
  • Tablolarda yeni bir satıra başlamak için |- kodu kullanılır. Yeni bir satır tamımladıktan sonra satır içinde sağa doğru yeni hücreler oluşturmak için her seferinde | karakteri kullanılır. Yani satır içindeki her bir hücre | karakteri ile başlar. Örnek:
{| border="1" |- | Ahmet 1 | Ahmet 2 | Ahmet 3 |- | Mehmet 1 | Mehmet 2 | Mehmet 3 |}
yazdığımızda sonucu şöyle olur:
Ahmet 1 Ahmet 2 Ahmet 3
Mehmet 1 Mehmet 2 Mehmet 3


  • border: kenarlık çizgilerinin kalınlığını belirtir. Örneğin border="1"


  • padding: Bir satırdaki tüm metinlerin ya da tek bir hücredeki metinlerin tablo kenarlıklarından ne kadar içeride başlayacağını tanımlamada kullanılır.
Örnek 1: style="padding: 8px 0px 8px 8px;"
Örnek 2: style="padding: 2em 2em; text-align: left;" (burada birinci sayı üstten ve alttan, ikinci sayı ise sağdan ve soldan ne kadar içeriden başlanacağını belirler)
  • cellpadding: Tablodaki tüm hücrelerin aynı anda padding değerini ayarlamak için kullanılır. Bu kod ile tüm üst, at, sağ ve sol ötelemeleri için tek bir ortak değer girilebilir yani mesela "tüm hücrelerin üstü 5px, altı 10px ötelensin" diyemeyiz. NOT: Tablonun başında class="wikitable" kullanılırsa cellpadding işe yaramaz ancak istenirse, padding yardımıyla satır satır ayarlama yapılabilir.
Örnek: {| style="text-align: left; width: 100%; border: 1px solid #DD4814;" cellpadding="20"


  • margin: Tablonun dışında altındaki, çevresindeki metinlerin, tablo kenarlığından ne kadar öteden başlayacağını belirler. Bir sayfanın başına metin kutusu benzeri bir şablon yerleştirirken bu koda özellikle ihtiyaç duyulmaktadır. Çünkü, sayfa üstünde kullanılacak şablonların altında 10-15 px kadar boşluk bırakmamız gerekir. Aksi takdirde şablonun kullanıldığı sayfalarda konu başlıkları çerçevesi ile şablonun çerçevesi üst üste binebilir ya da aralarında çok az bir boşluk kalabilir. (NOT: Boşluk oluşturmak için margin kullanmak yerine şablon kodları bittikten sonra satır boşlukları bırakarak sorunu çözmeyi deneseniz muhtemelen istediğiniz ebatta bir boşluk elde edemezsiniz.)
Örnek 1: style="margin: 0px 0px 15px 0px;"
Örnek 2: style="margin: 10px 5% 10px 5%;"


  • font-size: Eğer bir yazı büyüklüğü belirtmek zorunda isek göreceli bir büyüklük belirtmeliyiz; font-size: 80% gibi. Bunun yerine font-size: 15px gibi mutlak büyüklük belirtmekten kaçınmalıyız (bkz. Biçem el kitabı).


  • solid: Keranlık renklerini tanımlamak için kullanılır. Örneğin: border:1px solid #686868;



Hizalama

Tabloyu sayfaya hizalama

yazı yazı yazı yazı
yazı yazı yazı yazı
yazı yazı yazı yazı yazı yazı
  • Bir tabloyu sayfanın soluna yaslamak için herhangi bir kod kullanmaya gerek yoktur çünkü tablolar öntanımlı olarak sayfanın soluna yaslanır.
  • Tabloyu sağa yaslamak için style="float:right;" kullanılır. Örneğin yandaki tablonun kodlarını inceleyiniz.
  • Tabloyu ortaya hizalamak için ise tablo koldarını <center> </center> arasına alabilirsin (yani tablo kodlarının başladığı satırın bir üstündeki satıra <center>, tablo kodları bittikten sonraki satıra </center> yazılır).


Yazıların, tablonun etrafında akmasını sağlamak ya da önlemek

  • Tabloyu sayfaya hizalamaya yarayan style="float:left;" ya da style="float:right;" kodlarını kullandığımızda metinler, tablonun etrafında akar.
  • style="float:left;" ya da style="float:right;" kodları kullanılmadığında ise tablodan sonra gelen metinler tablonun etrafında akmaz. Eğer buna rağmen akıyorsa bu durum tabloyu kapatmamış olmamızdan kaynaklanıyor olabilir, yani tablonun |} kodu ile kapatılıp kapatılmadığını kontrol edersin.
  • Tabloyu sağ tarafa yaslayıp aynı zamanda etrafında metinlerin akmasını engellemek pek ihtiyaç duyulan bir durum değildir. Ancak gerekirse şu şekilde yapılabilir: Tablonun kodları başlamadan önce ve kodlarının bittiği satıra <br clear=all> kodunu kopyala.
  • Örneğin alttaki tablonun kodları içinde (style="float:left") kullanıldığı için kendisinden sonra gelen metinler tablonun etrafından akar.
yazı yazı yazı yazı
yazı yazı yazı yazı
yazı yazı yazı yazı yazı yazı
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text


Hücre içinde hizalama

  • Bir hücre içindeki metni yatayda; sağa, sola, ortaya hizalayabileceğimiz gibi düşeyde de; üste, ortaya, altta hizalayabiliriz.
  • Yatayda hizalamak için right, center, left parametreleri kullanılır.
  • Düşeyde hizalamak için satır başlarında |- valign="middle" benzeri (top, middle, bottom) parametreler ile o satırdaki tüm hücreleri düşeyde aynı şekilde hizalayabiliriz.
İnternet Mozilla Firefox
Grafik Gimp
Video VLC media player


Tablo örnekleri

Örnek 1: İki sütunlu tablo kullanımı

Örnek 2

Alttaki tabloda metinler hücrenin sol üst köşesine hizalanmaktadır. Tabloda border="0" değerini 1 yaparak çerçeveleri görüntüleyebilirsiniz.

İnternet : text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
Eğitim : text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
Geliştirme : text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
Çokluortam : text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Örnek 3

  • MediaWiki'nin "galery" özelliğinde resmin boyutunun ayarlanması mümkün değildir, alttaki tabloda ise mümkündür.
  • Alttaki örnekte iki resmin aynı yüksekliğe sahip olması için x parametresi kullanılmıştır. Örneğin: [[Dosya:Resim.png|x180px]]
  • Alttaki örnekte hücre içerikleri üste hizalanmıştır. (Resim yazılarından birinin daha fazla satıra taşması nedeniyle üste hizalamak daha düzgün görüntü verir.)
 
Resim 1
 
Resim 2: text text text text text text

Örnek 4

Aynı satırdaki iki hücreyi birleştirmek için colspan="2" kodu kullanılır.

Örnek
Örnek Örnek
Örnek Örnek
Örnek Örnek

Aynı sütundaki iki hücreyi birleştirmek için rowspan="2" kodu kullanılır.

Örnek Örnek
Örnek
Örnek Örnek
Örnek Örnek


Örnek 5

Açıklama Windows Linux
Grafik uygulamaları Boyama ve resim düzenleme Paint KolourPaint
Gelişmiş resim düzenleme Adobe Photoshop Gimp
Vektörel grafik düzenleyici CorelDraw Inkscape
PDF görüntüleyici Adobe Reader Evince, Adobe Reader

"font-size: smaller" kullanıldığında ise sonuç şöyle olur:

Açıklama Windows Linux
Grafik uygulamaları Boyama ve resim düzenleme Paint KolourPaint
Gelişmiş resim düzenleme Adobe Photoshop Gimp
Vektörel grafik düzenleyici CorelDraw Inkscape
PDF görüntüleyici Adobe Reader Evince, Adobe Reader


Örnek 6

Uygulamalar

örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek


Örnek 7

Alttaki iki tablo arasındaki fark cellspacing="0" kodundan kaynaklanmaktadır. Tabloya bu kod eklenerek, hücreler arasında öntanımlı olarak oluşan boşluklar kapatılabiliyor.

Linux nedir?

Linux, açık kaynak kodlu, özgür ve ücretsiz bir işletim sistemi çekirdeğidir. Çekirdeğin kaynak kodları GNU Genel Kamu Lisansı çerçevesinde özgürce dağıtılabilir, değiştirilebilir ve kullanılabilir. Linux ismi ilk olarak Linus Torvalds tarafından yazılan ve 5 Ekim 1991 Linux 0.02 etiketiyle duyurusu yapılan, Linux çekirdeğinden gelmektedir.

Linux nedir?

Linux, açık kaynak kodlu, özgür ve ücretsiz bir işletim sistemi çekirdeğidir. Çekirdeğin kaynak kodları GNU Genel Kamu Lisansı çerçevesinde özgürce dağıtılabilir, değiştirilebilir ve kullanılabilir. Linux ismi ilk olarak Linus Torvalds tarafından yazılan ve 5 Ekim 1991 Linux 0.02 etiketiyle duyurusu yapılan, Linux çekirdeğinden gelmektedir.

Örnek 8

yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı
 
Bu maddenin güncellenmesi gerekmektedir.
Maddede anlatılan bazı konular yeni sürümlerde farklılıklar gösterebileceğinden, içeriğin kontrol edilerek düzenlenmesi gerekmektedir.

Örnek 9

Güncel sürümler Çıkış Son destek İndir
16.04 LTS Nisan 2016 Nisan 2021
 
15.10 Ekim 2015 Temmuz 2016
 

Örnek 10 ("wikitable" sınıfı tablolar)

yazı yazı yazı yazı
yazı yazı yazı yazı
yazı yazı yazı yazı yazı yazı
  • Tablo kodlarının başına class="wikitable" kodu eklenerek otomatikman; kenarlıkları, arkaplan rengi, hücreler arası boşluk değerleri gibi biçimsel özellikleri yandaki gibi olan tablolar elde edilebilir. Ayrıca bu kodu kullandığınız herhangi bir tabloda her hücre başında kullanılan | karakteri yerine ! işareti kullanıldığında o hücrenin rengi daha koyu bir hal alır ve içeriğindeki metin, kalın yazı tipinde hücreye ortalanır (başlık amaçlı olarak kullanılabilir).


  • class="wikitable" kullanıldığında tablonun üstünde otomatikman yaklaşık 10 piksel kadar boşluk oluşuyor. Bu durumu engellemek istersen tablo kodlarına margin ekleyebilirsin.
Örneğin: margin: 0px 0px 0px 0px;
yazı yazı yazı yazı
yazı yazı yazı yazı
yazı yazı yazı yazı yazı yazı


  • class="wikitable" kullanırken öntanımlı gri renkli arkaplanı kullanmak zorunda değiliz. Hücrelerin arkaplan renklerini tümden ya da birer birer değiştirmemiz mümküdür.


  • Kenarlıkların boyutunun ve renginin de (toplu olarak değil birer birer) değiştirilmesi mümkündür. Bunun için border ve solid parametrelerinin birlikte kullanılması gereklidir. Örneğin: border: 5px solid #ff7070; gibi.


padding değerleri
hücre hücre ayarlanmış
wikitable sınıfı
bir tablo örneği
  • Wikitable sınıfı tabloların başlangıcında ilk satırda cellpadding kullanılarak tüm hücrelerin aynı anda kenarlık ötelenme değeri ayarlanamıyor. Bu yüzden her hücre için padding kullanılarak ötelenme ayrı ayrı yazmak gerekiyor.
  • Wikitable ile aynı görüntüye sahip olduğu halde wikitable kodu eklenmemiş bir tablo hazırlamamız gerekirse alttaki tabloyu kullanabiliriz.
(Not: Bu tabloda her bir hücre için padding tanımlamak yerine tablonun başına cellpadding="3" yazabilirdik ama eğer bu şekilde kullanırsak farklı kenarlar için farklı ötelenme değerleri atayamayız.)
wikitable sınıfı olmadığı halde
wikitable ile aynı görüntüyü veren
bir tablo