Kullanıcı:Hatas/Viki tablo örnekleri

Bazı HTML renk kodları

#a0daf8

#fff0f5

#6ef7a7

#c5fcdc

#9f9fff

#efefff

#ffb466

#ffcf96

#ff7070

#ffc1c1

#aaaaaa

#f6f6f6

#f9f9f9

#ffffff (beyaz)

"transparent" parametresi (saydam)

Kısa kısa notlar

• Tablo yazımı konusunda temel düzeyde bilgi edinmek için Türkçe Vikipedi'deki Yardım:Tablo sayfasına bakabilirsiniz. Vikide tablo yazımı, HTML dilinde tablo yazımı ile büyük benzerlikler gösteriyor. Ancak HTML bilmeseniz de benim yaptığım gibi kendinize küçük notlar çıkarıp denemeler yaparak Vikide istediğiniz her biçimde tablolar oluşturabilirsiniz.

• Tablolarda bulunduğunuz satırda sağa doğru hareket etmek için (yani sağdaki hücreye geçmek için) | karakteri kullanılır. Her hücre bu karakter ile başlar. Alt satırın başına geçmek için ise |- kodu kullanılır. Satır başı yaptıktan sonra yine | kullanılarak ilk hücreyi tanımlamış oluruz. Örnek:

{| border="1"
|- 
| Hücre 1 (satır 1)
| Hücre 2 (satır 1)
|- 
| Hücre 1 (satır 2)
| Hücre 2 (satır 2)
|}

yazdığımızda sonucu şöyle olur:

Hücre 1 (satır 1)	Hücre 2 (satır 1)
Hücre 1 (satır 2)	Hücre 2 (satır 2)

• border: kenarlık boyutunu belirtir. Örneğin border="1"

• padding, cellpadding: Tablo içindeki metinlerin tablo kenarlığından ne kadar içeride başlayacağını tanımlar.

Ö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)

• 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 15 px kadar boşluk bırakmamız gereklidir. Aksi takdirde şablonun kullanıldığı sayfalarda konu başlıkları çerçevesi ile şablonun çerçevesi üst üste biniyor. (NOT: margin kullanmak yerine şablon kodları bittikten sonra satır boşlukları bırakarak sorunu çözmeyi denesek de işe yaramaz).

Örnek 1: style="margin: 0px 0px 15px 0px;"

Örnek 2: style="margin: 10px 5% 10px 5%;"

• Web renkleri konusunda iki sayfa: tr.wikipedia.org, computerhope.com

Tablo örnekleri

Örnek 1

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 2

Alttaki tablo, iki sütun halinde içerik oluşturmak için kullanılabilir. (Tablo kodlarında border değerini 1 olarak ayarlayarak çerçevenin görünmesini sağlayabilirsiniz.) Tablonun genişlik değeri %100'dür, gerekmesi halinde bu değer azaltılabilir.

Grafik uygulamaları Gimp KolourPaint Inkscape Blender

İnternet uygulamaları Mozilla Firefox Chromium Ekiga Empathy Ubuntu One Kontact Geary

Örnek 3

MediaWiki'nin "galery" özelliğinde resmin boyutunun ayarlanması mümkün değildir, alttaki tabloda ise mümkündür.

Resim 1

Resim 2

Örnek 4

Tablodaki hücre içerikleri düşeyde üste hizlanmıştır. Resim büyüklükleri ayarlanabilir.

Resim 1	Resim 2
Resim 3	Resim 4

Örnek 5

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 6

	Açıklama	Windows	Linux
Grafik uygulamaları	Boyama ve resim düzenleme	MS 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	MS 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 7

Uygulamalar

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

Örnek 8

(NOT: Alttaki tabloya benzer tablolar oluşturmak için UbuntuWiki'de hazır bir şablon bulunmaktadır.)

Linux dağıtımları
Ubuntu	örnek • örnek • örnek • örnek • örnek • örnek • örnek
Debian	örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek
Fedora	örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek
OpenSUSE	örnek • örnek • örnek • örnek • örnek • örnek • örnek
Pardus Linux	örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek

Örnek 9

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 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 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 amaaçlı olaraak 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 ayarlanmış

wikitable sınıfı

bir tablo örneği

• Wikitable sınıfı tabloların başlangıcında ilk satırda padding ya da cellpadding kullanılarak tüm hücrelerin aynı anda kenarlık ötelenme değeri ayarlanamıyor. Bu yüzden ötelenme değerlerini her hücre için 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

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.

• 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.

• 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.

• Yatayda hizalamak için ise right, center, left parametreleri kullanılır.

İnternet uygulamaları:	Mozilla Firefox
Grafik uygulamaları	KolourPaint
Video uygulamaları	VLC media player