Kullanıcı:Hatas/Viki tablo örnekleri

Ubuntu Türkiye Wiki sitesinden
Şuraya atla: kullan, ara

Kodlama bilmeden gelişmiş tablolar hazırlamak

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 Türkçe Vikipedi'deki Yardım:Tablo sayfasına da bakabilirsiniz.

Kısa kısa notlar

  • 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 uygulamaları: Mozilla Firefox
Grafik uygulamaları KolourPaint
Video uygulamaları VLC media player



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

  • ::<code>........</code> yazdığımızda sonuç aşağıdaki örnekteki gibi olur. <code> etiketi kullanıldığıda kutucuk iki nokta (:) kullanılarak satır başından ötelenebilir, ayrıca içinde şablon kullanılabilir.
sudo apt-get install paket_adı
  • Satır başında bir karakter boşluk bırakılan yazı örneği:
sudo apt-get install paket_adı
  • ::{{bc|.......}} için sonuç:
sudo apt-get install paket_adı
  • ::{{uçbirim|.......}} için sonuç:
sudo apt-get install <font style="color:red;">paket_adı</font>


  • Tablo kodları ile yazım örneği:
    (Not: Alttaki tabloların başına iki nokta üst üste ( : , :: , :: , :::: gibi) konularak sağa doğru kaydırılabilir. Vikipedi'deki kutulu ileti şablonlarında ise bu imkan yok.)
yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı
yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı

Ö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: Vikipedi'de alttaki tabloya benzer tablolar oluşturmak için hazır Dolaşım şablonları kullanılı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

yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı
Tag-36px.png 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 11

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

Örnek 12 ("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