Kullanıcı:Hatas/Viki tablo örnekleri sayfasının kaynağını görüntüle

= Kodlama bilmeden gelişmiş tablolar hazırlamak =

{| style="float:right;"  border=1
| style="background: #e5e5e5; border: none; padding: 0cm" | <center>'''Bazı HTML Renk Kodları'''</center>
|-
| style="background: #ffffff; border: none; padding: 0cm" | <center>Arkaplana daha elverişli olanlar</center>
|-
| style="background: #ffc1c1; border: none; padding: 0cm" | #ffc1c1
|-
| style="background: #f2a179; border: none; padding: 0cm" | #f2a179
|-
| style="background: #9dd3f2; border: none; padding: 0cm" | #9dd3f2
|-
| style="background: #a0daf8; border: none; padding: 0cm" | #a0daf8
|-
| style="background: #9df2a4; border: none; padding: 0cm" | #9df2a4
|-
| style="background: #6ef7a7; border: none; padding: 0cm" | #6ef7a7
|-
| style="background: #c5fcdc; border: none; padding: 0cm" | #c5fcdc
|-
| style="background: #f29dd3; border: none; padding: 0cm" | #f29dd3
|-
| style="background: #f2f255; border: none; padding: 0cm" | #f2f255
|-
| style="background: #9f9fff; border: none; padding: 0cm" | #9f9fff
|-
| style="background: #bc9df2; border: none; padding: 0cm" | #bc9df2
|-
| style="background: #ffcf96; border: none; padding: 0cm" | #ffcf96
|-
| style="background: #bfa269; border: none; padding: 0cm" | #bfa269
|-
| style="background: #ffffff; border: none; padding: 0cm" | <center>Sadece çerçeveye uygun</center>
|-
| style="background: #3399ff; border: none; padding: 0cm" | #3399ff
|-
| style="background: #ffb466; border: none; padding: 0cm" | #ffb466
|-
| style="background: #dd4814; border: none; padding: 0cm" | #dd4814
|-
| style="background: #ff7070; border: none; padding: 0cm" | #ff7070
|-
| style="background: #ffffff; border: none; padding: 0cm" |<center>Diğer</center>
|-
| style="background: #aaaaaa; border: none; padding: 0cm" | #aaaaaa
|-
| style="background: #d7d7d7; border: none; padding: 0cm" | #d7d7d7
|-
| style="background: #e5e5e5; border: none; padding: 0cm" | #e5e5e5
|-
| style="background: #f6f6f6; border: none; padding: 0cm" | #f6f6f6
|-
| style="background: #f9f9f9; border: none; padding: 0cm" | #f9f9f9
|-
| style="background: #ffffff; border: none; padding: 0cm" | #ffffff (beyaz)
|-
| style="background: transparent; border: none; padding: 0cm" | "transparent" parametresi (saydam)
|-
| style="background: #DD4814; border: none; padding: 0cm" | <center>[http://design.ubuntu.com/brand/colour-palette <span style="color: #FFFFFF;">Ubuntu renk paleti</span>]</center>
|}

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 [http://tr.wikipedia.org/wiki/Yard%C4%B1m:Tablo Yardım:Tablo] sayfasına da bakabilirsiniz.

== Kısa kısa notlar ==

* Viki kodlamasında tablolar '''<code>{|</code>''' satırıyla başlar ve '''<code>|}</code>''' satırıyla biter.

* Tablolarda yeni bir satıra başlamak için '''<code>|-</code>''' 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 '''<code>|</code>''' karakteri kullanılır. Yani satır içindeki her bir hücre '''<code>|</code>''' karakteri ile başlar. Örnek:

:{{uçbirim|<nowiki>{| border="1"
|-
| Ahmet 1
| Ahmet 2
| Ahmet 3
|-
| Mehmet 1
| Mehmet 2
| Mehmet 3
|}</nowiki>}}

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

:{| border="1"
|-
| Ahmet 1
| Ahmet 2
| Ahmet 3
|-
| Mehmet 1
| Mehmet 2
| Mehmet 3
|}


* '''border''': kenarlık çizgilerinin kalınlığını belirtir. Örneğin {{bc|<nowiki>border="1"</nowiki>}}


* '''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: {{bc|<nowiki>style="padding: 8px 0px 8px 8px;"</nowiki>}}
::: Örnek 2: {{bc|<nowiki>style="padding: 2em 2em; text-align: left;"</nowiki>}} (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. {{kırmızı|'''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: {{bc|<nowiki>{| style="text-align: left; width: 100%; border: 1px solid #DD4814;" cellpadding="20"</nowiki>}}


* '''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: {{bc|<nowiki>style="margin: 0px 0px 15px 0px;"</nowiki>}}
::: Örnek 2: {{bc|<nowiki>style="margin: 10px 5% 10px 5%;"</nowiki>}}


* '''font-size''': Eğer bir yazı büyüklüğü belirtmek zorunda isek göreceli bir büyüklük belirtmeliyiz; <code>font-size: 80%</code> gibi. Bunun yerine <code>font-size: 15px</code> 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: {{bc|<nowiki>border:1px solid #686868;</nowiki>}}


* Web renkleri konusunda bir kaç sayfa: [http://tr.wikipedia.org/wiki/Web_renkleri tr.wikipedia.org], [http://www.computerhope.com/htmcolor.htm computerhope.com] , [http://design.ubuntu.com/brand/colour-palette Ubuntu renk paleti]


== Hizalama ==
=== Tabloyu sayfaya hizalama ===
{| class="wikitable" style="float:right; margin: 0px 0px 0px 6px; background-color:#c5fcdc;"
|-
| 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ı '''<nowiki><center> </center></nowiki>''' arasına alabilirsin (yani tablo kodlarının başladığı satırın bir üstündeki satıra <nowiki><center></nowiki>, tablo kodları bittikten sonraki satıra <nowiki></center></nowiki> 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.
 
* '''<code>style="float:left;"</code>'''  ya da '''<code>style="float:right;"</code>'''  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 <code><nowiki><br clear=all></nowiki></code> kodunu kopyala.

* Örneğin alttaki tablonun kodları içinde (style="float:left") kullanıldığı için kendisinden sonra gelen metinler tablonun etrafından akar.

:{| class="wikitable" style="float:left; margin: 7px 6px 6px 0px; background-color:#c5fcdc;"
|-
| 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 <code>|- valign="middle"</code> benzeri ('''top, middle, bottom''') parametreler ile <u>o satırdaki tüm hücreleri</u> düşeyde aynı şekilde hizalayabiliriz.

:{| style="background:#f5faff;" width="100%" cellpadding="2" border=1
|- style="height:75px" valign="top"
| style="width:30%" | '''İnternet uygulamaları:'''
| Mozilla Firefox
|- style="height:75px" valign="middle"
| '''Grafik uygulamaları'''
| align="center" | KolourPaint
|- style="height:75px" valign="bottom"
| '''Video uygulamaları'''
| align="right" | 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.

{| style="background:transparent;" width="100%" border="0"
|- valign="top"
| style="width:90px" | '''İnternet'''
| :
| style="padding: 0px 0px 6px 0px;" | text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
|- valign="top"
| '''Eğitim'''
| :
| style="padding: 0px 0px 6px 0px;" | text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
|- valign="top"
| '''Geliştirme'''
| :
| style="padding: 0px 0px 6px 0px;" | text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
|- valign="top"
| '''Çokluortam'''
| :
| style="padding: 0px 0px 6px 0px;" | text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 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.

{| style="text-align: left; width: 100%; table-layout: fixed;" border="0"
|- valign="top"
| style="width: 50%"|
<span style="font-weight: bold; font-size: 115%;"> Grafik uygulamaları </span>
* Gimp
* KolourPaint
* Inkscape
* Blender
|
<span style="font-weight: bold; font-size: 115%;"> İnternet uygulamaları </span>
* 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.<br>
* Alttaki örnekte iki resmin aynı yüksekliğe sahip olması için '''x''' parametresi kullanılmıştır. Örneğin: <nowiki>[[Dosya:Resim.png|x180px]]</nowiki>
* 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.)

{|
|- valign="top"
| [[Dosya:GParted 01.png|thumb|x180px|Resim 1]]
| [[Dosya:Yk prologue 172.jpg|thumb|x180px|Resim 2: text text text text text text]]
|}

== Örnek 4 ==
{| style="text-align: left; width: 80%; table-layout: fixed;" border="0"
|- valign="top"
| style="width: 50%"|
Aynı satırdaki iki hücreyi birleştirmek için ''' colspan="2" ''' kodu kullanılır.
{| border="1" cellpadding="20" cellspacing="0"
| colspan="2" style="text-align:center;" | Örnek
|-
|Örnek
|Örnek
|-
|Örnek
|Örnek
|-
|Örnek
|Örnek
|}
|
Aynı sütundaki iki hücreyi birleştirmek için ''' rowspan="2" ''' kodu kullanılır.
{| border="1" cellpadding="20" cellspacing="0"
| rowspan="2" style="text-align:center;"| Örnek
| Örnek
|-
|Örnek
|-
|Örnek
|Örnek
|-
|Örnek
|Örnek
|}

|}


== Örnek 5 ==

{| class="wikitable" style="font-size: normal; text-align: left; width: 100%; table-layout: fixed;"
|-xi
! style="width: 8em"|
! '''Açıklama'''
! '''Windows'''
! '''Linux'''
|-
! rowspan="4"|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:

{| class="wikitable" style="font-size: smaller; text-align: left; width: 100%; table-layout: fixed;"
|-xi
! style="width: 8em"|
! '''Açıklama'''
! '''Windows'''
! '''Linux'''
|-
! rowspan="4"|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 ==
* <nowiki>::<code>........</code></nowiki> yazdığımızda sonuç aşağıdaki örnekteki gibi olur. <nowiki><code></nowiki> etiketi kullanıldığıda kutucuk iki nokta (:) kullanılarak satır başından ötelenebilir, ayrıca içinde şablon kullanılabilir.

::<code>sudo apt-get install {{kırmızı|paket_adı}}</code>

* Satır başında bir karakter boşluk bırakılan yazı örneği:

 sudo apt-get install {{kırmızı|paket_adı}}

* <nowiki>::{{bc|.......}}</nowiki> için sonuç:
::{{bc|sudo apt-get install {{kırmızı|paket_adı}}}}

* <nowiki>::{{uçbirim|.......}}</nowiki> için sonuç:
::{{uçbirim|sudo apt-get install {{kırmızı|paket_adı}}}}


* Tablo kodları ile yazım örneği:<br>(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.)
::{| clear=both style="background:#f8f8f8; border:1px solid #686868; padding: 0px 5px 0px 5px; margin-bottom:0.5em; margin-top:0.5em;"
| yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı
|}

::{| clear=both style="background:#c5fcdc; border:1px solid #6ef7a7; padding: 0px 5px 0px 5px; margin-bottom:0.5em; margin-top:0.5em;"
| yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı
|}

== Örnek 7 ==
<div style="
border: 1px solid #AAAAAA;
clear: both;
display: block;
width:90%;
margin: 12px 5% 6px 5%;
padding: 2px;
background: transparent;
text-align: center;">
<div style="font-size: 95%; font-weight: bold; background:#B0B0F0;"> Uygulamalar </div>
<div style="font-size: 95%; margin-top: 3px; padding-top: 1px;">
örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek
</div></div>


== Örnek 8 ==
(NOT: Vikipedi'de alttaki tabloya benzer tablolar oluşturmak için hazır [[v:Şablon:Dolaşım|Dolaşım şablonları]] kullanılır.)
<table style="width:90%; margin: 10px 5% 10px 5%; border: 1px solid #aaaaaa;">
<tr>
<td style="text-align:center; font-size: 95%; font-weight:bold; background-color:#882955; padding:2px; color:white;" colspan="2"> Linux dağıtımları</td>
</tr>
<!--üst başlık bitti-->
<tr>
<td style="font-weight:bold; font-size: 90%; max-width:200px; background-color:#D2A5D2; text-align:right; max-heigth:25px; width=100%; white-space:nowrap; padding: 0px 5px 0px 5px;"> Ubuntu
<td valign="top" style="font-size: 90%; background:#FFFFFF; transparent:0.5; width:100%;">örnek • örnek • örnek • örnek • örnek • örnek • örnek</td></tr>

<tr>
<td style="font-size: 90%; font-weight:bold; max-width:200px; background-color:#D2A5D2; text-align:right; max-heigth:25px; width=100%; white-space:nowrap; padding: 0px 5px 0px 5px;">Debian
<td valign="top" style="font-size: 90%; background:#E3E3E3; transparent:0.5; width:100%;">örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek</td>
</tr>

<tr>
<td style="font-size: 90%; font-weight:bold; max-width:200px; background-color:#D2A5D2; text-align:right; max-heigth:25px; width=100%; white-space:nowrap; padding: 0px 5px 0px 5px;">Fedora
<td valign="top" style="font-size: 90%; background:#ffffff; transparent:0.5; width:100%;">örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek</td></tr>

<tr>
<td style="font-size: 90%; font-weight:bold; max-width:200px; background-color:#D2A5D2; text-align:right; max-heigth:25px; width=100%; white-space:nowrap; padding: 0px 5px 0px 5px;">OpenSUSE
<td valign="top" style="font-size: 90%; background:#E3E3E3; transparent:0.5; width:100%;">örnek • örnek • örnek • örnek • örnek • örnek • örnek</td></tr>

<tr>
<td style="font-size: 90%; font-weight:bold; max-width:200px; background-color:#D2A5D2; text-align:right; max-heigth:25px; width=100%; white-space:nowrap; padding: 0px 5px 0px 5px;">Pardus Linux
<td valign="top" style="font-size: 90%; background:#ffffff; transparent:0.5; width:100%;">örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek</td></tr>
</table>

== Ö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.

{| style="width:100%; text-align:left; margin: 10px 0px 10px 0px; border: 2px solid #9f9fff;"
|-
| style="background:#ff7070; padding: 0px 9px 0px 9px;"|
<span style="font-size: 105%; font-weight: bold;"> Linux nedir? </span>
|-
| style="background:#ffc1c1; padding: 0px 9px 0px 9px;"|
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.
|}

{| cellspacing="0" style="width:100%; text-align:left; margin: 10px 0px 10px 0px; border: 2px solid #9f9fff;"
|-
| style="background:#ff7070; padding: 0px 9px 0px 9px;"|
<span style="font-size: 105%; font-weight: bold;"> Linux nedir? </span>
|-
| style="background:#ffc1c1; padding: 0px 9px 0px 9px;"|
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 ==

{| clear=both style="background:#c5fcdc; border-radius:20px; border:1px solid #6ef7a7; padding: 0px 5px 0px 5px; margin-bottom:0.5em; margin-top:0.5em;"
| yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı yazı
|}

{| cellspacing="0" style="width: 80%; margin: 0 0 15px 10%; border: none;"
|-
| style="width:6%; padding: 0.4em 0.8em 0 0.8em; border-top-left-radius: 1em; border-bottom-left-radius: 1em; background: #e5e5e5;"  | [[Dosya:Tag-36px.png|36px]]
| style="padding: 0.7em 1em 0.7em 1em; border-top-right-radius: 1em; border-bottom-right-radius: 1em; background: #F2F255;" | '''Bu maddenin güncellenmesi gerekmektedir.'''<br />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 ==

{| style="font-size: 90%; color:#333333; text-align: left; margin: 0px 0px 0px 6px; border: 1px solid #DD4814;"
|-
| style="background-color:#BB94A9; padding: 2px 6px 2px 6px;" | '''Güncel sürümler'''
| style="background-color:#BB94A9; padding: 2px 6px 2px 6px; text-align: center;" | '''Çıkış'''
| style="background-color:#BB94A9; padding: 2px 6px 2px 6px; text-align: center;" | '''Son destek'''
| style="background-color:#BB94A9; padding: 2px 6px 2px 6px; text-align: center;" | '''İndir'''
|-
| style="background-color:#F1B5A1; padding: 2px 6px 2px 6px;" | 16.04 LTS
| style="background-color:#F1B5A1; padding: 2px 6px 2px 6px;" | Nisan 2016
| style="background-color:#F1B5A1; padding: 2px 6px 2px 6px; text-align: center;" | Nisan 2021
| style="background-color:#F1B5A1; padding: 2px 6px 2px 6px; text-align: center;" | [[Dosya:Down 48.png|16px|center|link=https://ubuntu-tr.net/indir/]]
|-
| style="background-color:#F1B5A1; padding: 2px 6px 2px 6px;" | 15.10
| style="background-color:#F1B5A1; padding: 2px 6px 2px 6px;" | Ekim 2015
| style="background-color:#F1B5A1; padding: 2px 6px 2px 6px; text-align: center;" | Temmuz 2016
| style="background-color:#F1B5A1; padding: 2px 6px 2px 6px; text-align: center;" | [[Dosya:Down 48.png|16px|center|link=https://ubuntu-tr.net/indir/]]
|}

== Örnek 12 ("wikitable" sınıfı tablolar) ==
{| class="wikitable" style="float:right; margin: 0px 0px 0px 6px;"
|-
| yazı yazı yazı yazı
|-
| yazı yazı yazı yazı
|-
| yazı yazı yazı yazı yazı yazı
|}

* Tablo kodlarının başına {{bc|<nowiki>class="wikitable"</nowiki>}} 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 {{bc|<nowiki>|</nowiki>}} karakteri yerine {{bc|<nowiki>!</nowiki>}} 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: {{bc|<nowiki>margin: 0px 0px 0px 0px;</nowiki>}}

{| class="wikitable" style="float:right; margin: 0px 0px 0px 6px;"
|-
| style="background-color:#a0daf8;" | yazı yazı yazı yazı
|-
| style="background-color:#ff9090;" | yazı yazı yazı yazı
|-
| style="background-color:#90ff90;" | 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: {{bc|<nowiki>border: 5px solid #ff7070;</nowiki>}} gibi.


{| class="wikitable" style="float:right; margin: 0px 0px 0px 6px;"
|-
| style="padding: 8px 8px 8px 8px;" | padding değerleri
|-
| style="padding: 8px 8px 8px 8px;" | hücre hücre ayarlanmış
|-
| style="padding: 8px 8px 8px 8px;" | wikitable sınıfı
|-
| style="padding: 8px 8px 8px 8px;" | 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.'')

<center>
{| style="background:#f9f9f9; border-collapse: collapse;"
|-
| style="border: 1px solid #aaaaaa; padding: 3px 3px 3px 3px;" | wikitable sınıfı olmadığı halde
|-
| style="border: 1px solid #aaaaaa; padding: 3px 3px 3px 3px;" | wikitable ile aynı görüntüyü veren
|-
| style="border: 1px solid #aaaaaa; padding: 3px 3px 3px 3px;" | bir tablo
|}
</center>