Yardım:Tablo
← Yardım sayfaları | Tablo | → |
Çubuk söz dizimi
değiştirTablo oluştururken, HTML tablo söz diziminin yanı sıra, özel wiki kodları da kullanılabilir:
- Tablo, "
{|
seçimli tablo değişkenleri " satırıyla başlar ve "|}
" satırıyla biter.
- İsteğe bağlı bir tablo başlığı, "
{|
" dan sonra "|+
başlık " satırıyla ilave edilebilir.
- Tablo sırası kodu, "
|-
seçimli tablo değişkenleri " satırını ve her biri yeni bir satırdan başlamak ve newline veya "|" ile ayrılmak üzere, o sıradaki hücrelerin kodlarını içerir.
- Tablo verileri, hücrelerin kodlarıdır. Hücre kodu "| değer " veya "| hücre değişkenleri | değer " şeklindedir.
- Sütun başlıkları sırası, bir hücre parametresi ile bir değer arasında ayıraç olma durumunun dışında "|" yerine "!" kullanılarak belirlenir. Normal bir tablo sırası için fark, tarayıcıya bağlı olup sütun başlıkları genellikle koyu fontlarla gösterilir.
- Bir sıranın ilk hücresi sıra başlığı olarak adlandırılır ve satıra, "|" yerine "!" ile başlanır. Peşisıra gelen veri hücreleri yeni satırdan başlar.
Tablo ve hücre değişkenleri, HTML dekilerle aynıdır (bkz. [1] ve HTML element#Tablolar). Ancak, thead
, tbody
, tfoot
, colgroup
, ve col
elementleri mevcut durumda MediaWiki tarafından desteklenmemektedir.
Hücrelerinin hepsinin içi boş olsa dahi bir tablo gene de yararlı olabilir çünkü hücrelerde arka plan renkleri kullanarak tablo bir diyagrama dönüştürülebilir, örneğin bkz. m:Template talk:Square 8x8 pentomino example. Tablo formatında bir şekil üzerinde, sisteme yüklenmiş bir şekile göre daha kolay düzenleme yapılabilir.
Birkaç satıra (veya sütuna) yayılan hücreler olmadığı sürece, tablodaki sütun sayısının sabit olabilmesi için her sırada aynı sayıda hücre bulunmalıdır (aşağıdaki Mélange örneğine bkz.). Boş hücrelerin görünmelerini sağlamak için, boşluk karakterini (
) kullanınız.
Örnekler
değiştirBasit bir örnek
değiştir{| | Hücre 1, satır 1 | Hücre 2, satır 1 |- | Hücre 1, satır 2 | Hücre 2, satır 2 |}
ve
{| | Hücre 1, satır 1 || Hücre 2, satır 1 |- | Hücre 1, satır 2 || Hücre 2, satır 2 |}
ikisinin de çıktısı
Hücre 1, satır 1 | Hücre 2, satır 1 |
Hücre 1, satır 2 | Hücre 2, satır 2 |
Çarpım tablosu
değiştirKaynak kodu
değiştir{| border="1" cellpadding="2" |+Çarpım tablosu |- ! × !! 1 !! 2 !! 3 |- ! 1 | 1 || 2 || 3 |- ! 2 | 2 || 4 || 6 |- ! 3 | 3 || 6 || 9 |- ! 4 | 4 || 8 || 12 |- ! 5 | 5 || 10 || 15 |}
Çıktısı
değiştir
Çarpım tablosu × 1 2 3 1 1 2 3 2 2 4 6 3 3 6 9 4 4 8 12 5 5 10 15
Renklendirme; değişkenler
değiştirBir hücrede yazının ve arka fonun rengini belirlemek için iki yol vardır:
{| | bgcolor=red | <font color=white> abc | def | style="background:red; color:white" | ghi | jkl |}
çıktısı:
abc | def | ghi | jkl |
Görüldüğü gibi "font" sadece bulunduğu hücre için ve sonlandırıcı etiket olmaksızın geçerli olmuştur. Sonlandırma etiketini sistem kendisi oluşturmaktadır.
Renkler, diğer değişkenlerde olduğu gibi tüm bir satır ya da tablo için tanımlanabilir; satır değişkenleri tablo değerlerini, hücre değişkenleri de satır değerlerini geçersiz kılar:
{| style="background:yellow; color:green" |- | abc | def | ghi |- style="background:red; color:white" | jkl | mno | pqr |- | stu | style="background:silver" | vwx | yz |}
çıktısı:
abc | def | ghi |
jkl | mno | pqr |
stu | vwx | yz |
w:HTML 4.01 de 16 tanımlı renk olup onaltılı sistemdeki değerleri şöyledir:
black | #000000 | silver | #c0c0c0 | maroon | #800000 | red | #ff0000 | |||
navy | #000080 | blue | #0000ff | purple | #800080 | fuchsia | #ff00ff | |||
green | #008000 | lime | #00ff00 | olive | #808000 | Yellow | #ffff00 | |||
teal | #008080 | aqua | #00ffff | gray | #808080 | white | #ffffff |
- Bütün renk kodlarına buradan ulaşılabilir
Genişlik, yükseklik
değiştirBütün tablonun genişlik ve yüksekliğinin yanısıra satır yüksekliğini de belirlemek mümkündür. Sütun genişliğini belirlemek için, sütunda yer alan herhangi bir hücrenin genişliğini belirlemek yeterlidir. Eğer tüm sütunlar için bir genişlik değeri ve/veya satırlar için yükseklik değeri belirlenmemişse sonuçlar belirsiz olup tarayıcıya göre değişiklik gösterebilir.
{| style="width:400px; height:200px" border="1" |- | abc | def | ghi |- style="height:100px" | jkl | style="width:200px" |mno | pqr |- | stu | vwx | yz |}
çıktı olarak:
abc | def | ghi |
jkl | mno | pqr |
stu | vwx | yz |
Yerleştirme
değiştirTablodaki tüm içeriğin yeri tek bir değişkenle değilse de, tablonun kendisinin, bir sıradaki tüm içeriğin, ve bir hücredeki içeriğin yeri ayarlanabilir, (bkz. m:Template talk:Table demo). Büyük fontlar kullanıldığında sayfa görüntülemeyi bozduğundan, tablonun yerini ayarlamak için hiçbir durumda "float" (kaydırma) kullanılmamalıdır.
Mélange
değiştirBurada, tablo yapımında daha çok seçenek sunan, daha ileri seviyede bir örnek görmekteyiz. Yaptığınız tabloda bu ayarlarla oynayarak etkilerini görebilirsiniz. Bu tekniklerin hepsinin her durumda uygun olduğu anlamı çıkarılmamalıdır. Örneğin, arka fonlarda renklendirme yapabiliyor olmak her zaman iyi bir fikir olmayabilir. Tablolarınızda biçimlemeyi mümkün olduğunca sade tutmaya özen gösteriniz. Unutmayınız ki diğer insanlar da bir gün aynı makaleyi düzenlemek isteyebilirler. Gene de bu örnek nelerin yapılabileceğini gösteren güzel bir örnektir.
Kaynak kodu
değiştir{| border="1" cellpadding="1" cellspacing="0" align="center" |+'''Örnek bir tablo''' |- ! style="background:#efefef;" | İlk başlık ! colspan="2" style="background:#ffdead;" | İkinci başlık |- | sol üst | | rowspan=2 style="border-bottom:3px solid grey;" valign="top" |sağ |- | style="border-bottom:3px solid grey;" | sol alt | style="border-bottom:3px solid grey;" | orta alt |- | colspan="3" align="center" | {| border="0" |+''Tablo içinde tablo'' |- | align="center" width="150px" | [[Resim:wiki.png]] | align="center" width="150px" | [[Resim:wiki.png]] |- | align="center" colspan="2" style="border-top:1px solid red; border-right:1px solid red; border-bottom:2px solid red; border-left:1px solid red;" | İki Vikikaynak logosu |} |}
Çıktısı
değiştir
Örnek bir tablo İlk başlık İkinci başlık sol üst sağ sol alt orta alt
Tablo içinde tablo İki Vikikaynak logosu
Gelişmiş örnek
değiştir{| align=right border=1 | Hücre 1, satır 1 |rowspan=2| Hücre 2, satır 1 (ve 2) | Hücre 3, satır 1 |- | Hücre 1, satır 2 | Hücre 3, satır 2 |}
Hücre 1, satır 1 | Hücre 2, satır 1 (ve 2) | Hücre 3, satır 1 |
Hücre 1, satır 2 | Hücre 3, satır 2 |
Görüldüğü gibi tablo sağa dayalı olarak belirmiştir.
Tablo içinde tablo
değiştir{| border=1 | α (alfa) | align="center" | hücre 2 {| border=2 style="background-color:#ABCDEF;" |iç içe |- |tablo |} |valign="middle" | tekrar orijinal tablo |}
çıktı olarak iki tabloyu iç içe verir:
α (alfa) | hücre 2
|
tekrar orijinal tablo |
İç tablo satırbaşından başlamak zorundadır.
COLSPAN ve ROWSPAN: birarada kullanım
değiştir{| border="1" cellpadding="5" cellspacing="0" |- ! Sütun 1 || Sütun 2 || Sütun 3 |- | rowspan=2| A | colspan=2 align="center"| B |- | C | D |- | E | colspan=2 align="center"| F |- | rowspan=3| G | H | I |- | J | K |- | colspan=2 align="center"| L |}
Sütun 1 | Sütun 2 | Sütun 3 |
---|---|---|
A | B | |
C | D | |
E | F | |
G | H | I |
J | K | |
L |
Diğer tablo formatları
değiştirMediaWiki'nin desteklediği diğer tablo söz dizimi türleri:
- XHTML
- HTML ve wiki <td> söz dizimidir.
Şimdilik her üçü de MediaWiki tarafından desteklenmekte ve geçerli HTML çıktısı oluşturmaktadır. Çubuk söz dizimi, HTML'ye daha alışkın kişiler için öyle olmasa da, en basit olanıdır. Öte yandan, HTML ve wiki <td> söz diziminin, özellikle elde taşınabilip internete erişimi olan cihazlarda olmak üzere, gelecekte tarayıcılar tarafından desteklenmeye devam edilip edilmeyeceği belirsizdir.
Ayrıca bakınız HTML element#Tablolar. İlaveten, thead
, tbody
, tfoot
, colgroup
, ve col
elementlerinin şu an için MediaWiki tarafından desteklenmediğini unutmayınız. (MediaWiki'de desteklenen kodlar).
Karşılaştırma
değiştirXHTML | HTML & Wiki-td | Wiki-çubuk | |||||||
---|---|---|---|---|---|---|---|---|---|
Tablo | <table></table> | <table></table> | {| değişkenler |} | ||||||
Başlık | <caption></caption> | <caption></caption> | |+ başlık | ||||||
Satır | <tr></tr> | <tr> | |- değişkenler | ||||||
Veri hücresi |
<td>hücre1</td> |
<td>hücre1 |
| hücre1 | hücre2 | ||||||
Veri hücresi | <td>hücre1</td> <td>cell2</td> <td>hücre3</td> | <td>hücre1 <td>hücre2 <td>hücre3 | |hücre1||hücre2||hücre3 | ||||||
Başlık hücresi | <th></th> | <th> | ! başlık | ||||||
Örnek tablo |
| ||||||||
<table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> | <table> <tr> <td> 1 <td> 2 <tr> <td> 3 <td> 4 </table> | {| | 1 || 2 |- | 3 || 4 |} | |||||||
Örnek tablo |
| ||||||||
<table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> | <table> <tr> <td> 1 <td> 2 <tr> <td> 3 <td> 4 <tr> <td> 5 <td> 6 </table> | {| | 1 || 2 |- | 3 || 4 |- | 5 || 6 |} | |||||||
Artıları |
Herhangi bir XHTML düzenleyicisi ile ön izleme ve hata ayıklama yapılabilir Daha kolay okunabilmesi için düzenlenebilir Yaygın şekilde bilinir |
Herhangi bir XHTML düzenleyicisi ile ön izleme ve hata ayıklama yapılabilir Daha kolay okunabilmesi için düzenlenebilir Yaygın şekilde bilinir XHTML den daha az yer tutar |
Kolay yazılır Kolay okunur Az yer tutar | ||||||
Eksileri |
Zahmetlidir Çok yer kaplar Çabuk okunması zordur |
HTML de deneyimsiz kişiler için karmaşıktır Yapısı zayıftır Sınırlandırmalar zayıftır Genellikle tuhaf görünüşlüdür Gelecekte tarayıcı desteği olmayabilir |
Alışılmamış söz dizimi Katı yapı Girintili yazıma elverişli değil Metinler (HTML etiketlerindekilere benzeyen) bazıları için, çubuk serilerini, artı işaretlerini, ünlem işaretlerini, vs. okumaktan daha kolay olabilir.
| ||||||
XHTML | HTML & Wiki-td | Wiki-pipe |
Oluşturulan HTML açısından çubuk söz dizimi
değiştirÇubuk söz dizimi, Magnus Manske tarafından geliştirilmiş olup HTML nin yerine çubukları (|) yerleştirir. HTML tablolarını, çubuk söz dizimi tablolarına çeviren bir çevrimiçi scripte buradan ulaşabilirsiniz.
Çubuklar, değişkenleri içerikten ayırmanın veya tek bir satırdaki hücreleri birbirinden ayırmak için ||
kullanmanın dışında, yeni satırdan başlamalıdır. Değişkenler isteğe bağlıdır.
Tablolar
değiştirBir tablo .... {| ''params'' |} ile tanımlanır ve bu da <table ''değişkenler''>Buraya formatlanmamış metni yazınız </table> a eşittir.
- Dikkat:
{|
iledeğişkenler
arasına boşluk koymazsanız ilk değişken dikkate alınmaz.
Satırlar
değiştir<tr> etiketler ilk satır için ototmatik olarak üretilirler. Yeni bir satıra başlamak için
|-
kullanınız. Bunun da çıktısı
<tr>
olacaktır. Değişkenler:
|- değişkenler
şeklinde ilave edilebilir. Bunun da çıktısı
<tr değişkenler>
olacaktır.
Not:
- <tr> etiketler ilk <td> eşdeğerinde otomatik olarak açılacaktır
- <tr> etiketler ilk <tr> ve </table> eşdeğerinde otomatik olarak kapanacaktır
Hücreler
değiştirHücreler ya:
|hücre1 |hücre2 |hücre3
şeklinde ya da:
|hücre1||hücre2||hücre3
şeklinde oluşturulurlar, ki her ikisi de:
<td>hücre1</td><td>hücre2</td><td>hücre3</td>
ile aynı olup burada "||" , "newline" + "|" a karşı gelmektedir.
Hücrelerdeki değişkenler:
|değişkenler|hücre1||değişkenler|hücre2||değişkenler|hücre3
şeklinde kullanılabilirler ve çıktı da
<td değişkenler>hücre1 <td değişkenler>hücre2 <td değişkenler>hücre3
şeklinde olur.
Sütun başlıkları
değiştirAçılışta "|" yerine "!" kullanılmasının dışında aynı TD gibi çalışır. "||" yerine "!!" kullanılabilir. Ancak değişkenler gene "|" kullanırlar, örneğin: !değişkenler|hücre1
Şekil alt yazısı
değiştirBir <caption> etiketi
|+ Şekil alt yazısı
ile yaratılır ve bu da
<caption>Şekil alt yazısı</caption>
çıktısını verir. Aynı zamanda:
|+ değişkenler|Şekil alt yazısı
değişkenleri de kullanabilirsiniz ve bu da
<caption değişkenler>Şekil alt yazısı</caption>
çıktısını verir.
Tablonun yanında metin
değiştir(Etkilerini görebilmek için, tarayıcınızın font büyüklüğünü arttırmanız veya azaltmanız, ya da tarayıcı pencerenizin genişliğini değiştirmeniz gerekebilir.)
table kodundan sonraki metnin, tablonun solunda görünmesini sağlamak için align=right komutunu kullanabilirsiniz.
× | 1 | 2 | 3 |
---|---|---|---|
1 | 1 | 2 | 3 |
2 | 2 | 4 | 6 |
3 | 3 | 6 | 9 |
4 | 4 | 8 | 12 |
5 | 5 | 10 | 15 |
işte metin, 5*3 çarpım tablosundan sonra hemen burada başlamaktadır text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text artık bu kadar metin yeter text text text
Ancak, tablonun etrafını sarmalamak yerine üstüne binebileceği için buraya ön-formatlanmış metin koymayınız.
Bundan kaçınmak için <br style="clear:both;">: kullanınız.
× | 1 | 2 | 3 |
---|---|---|---|
1 | 1 | 2 | 3 |
2 | 2 | 4 | 6 |
3 | 3 | 6 | 9 |
4 | 4 | 8 | 12 |
işte metin, 4*3 çarpım tablosundan sonra hemen burada başlamaktadır... xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text this ve bu da metnin sonu, şimdi de açılmış BR geliyor:
görüldüğü gibi ön-formatlanmış metin, ancak tablo bittikten sonra başlayabiliyor xt text text text text text
Tablonun solda görünmesini sağlamak için align=left komutunu kullanabilirsiniz. Böylece takip eden metin (belki biraz fazlaca yakın olmakla birlikte) tablonun sağında kalacaktır :
× | 1 | 2 | 3 |
---|---|---|---|
1 | 1 | 2 | 3 |
2 | 2 | 4 | 6 |
işte metin, 2*3 çarpım tablosundan sonra hemen burada başlamaktadır text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
Tablo, şekil veya metin etrafında boşluk
değiştir1×1 çarpım tablosu örneğindeki gibi bir tablonun, bir şeklin, veya metnin etrafında, "hücre besleme" (cellpadding) kullanarak boşluk yaratmak için:
|
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
kutu içinde metin |
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text TeXt text text text text text text text text text text text text text text text text text text text text text text text text
Kolon genişliğinin ayarlanması
değiştirBu örneği, sütun genişliklerini, hücrelerdeki en geniş metine göre ayarlanmış genişliği kabul etmeyip, kendi isteğinize göre belirlemek istediğinizde kullanabilirsiniz. Metnin etrafının zorlanarak sarılışına dikkat ediniz.
{| border="1" cellpadding="2" !width="50"|Adı !width="125"|Rengi !width="125"|Modeli |- |Porsche |Kırmızı |2009 |- |Lamborghini |Buz beyazı |2009 |}
Adı Rengi Modeli Porsche Kırmızı 2005 Lamborghini Buz beyazı 2004
Değişkenlerin ayarlanması
değiştirDeğişkeninizi hücrenin başlangıcında, ardından tek bir çubuk gelecek şekilde ekleyebilirsiniz. Örneğin, width=300px| komutu, o hücrenin genişliğini 300 piksele ayarlayacaktır. Birden fazla değişken ayarlamak için, her biri arasında bir boşluk bırakınız.
Wikipedia kodu
değiştir{| |- | bgcolor=red|hücre1 || width=300px bgcolor=blue|burası hücre2 || bgcolor=green|hücre3 |}
İnternet tarayıcınızda nasıl görünür
değiştir
hücre1 burası hücre2 hücre3
Ondalık noktasının hizalanması
değiştirBir sütundaki sayıların, ondalık noktasına göre hizalanması şöyle yapılır:
<blockquote> {| cellpadding=0 cellspacing=0 |align=right| 432 || . || 1 |- |align=right| 43 || . || 21 |- |align=right| 4 || . || 321 |} </blockquote>
çıktısı:
432 . 1 43 . 21 4 . 321
Daha kolay durumlarda, tablo özelliği bir kenara bırakılır ve satıra boşlukla başlanır. Takibeden sütunlardaki sayıların olmayan haneleri için boşluk kullanılarak sayılar hizalanır.
432.1 43.21 4.321
Tarz şablonları
değiştirBazı kullanıcılar, tablo tarzlarını daha kolay belirleyebilmek için şablonlar geliştirmişlerdir. Yapmanız gereken, {|
komutundan sonra bunlardan size uygun olan tarz şablonunu eklemektir. Böylece hem tablo formatlarının bütünlüğü bozulmamış olur, hem olası bir problem halinde şablonda yapılacak tek bir değişiklikle problem halledilebilir, hem de o şablonu kullanan tüm tabloların görünümü iyileştirilebilir. Örneğin;
× | 1 | 2 | 3 |
---|---|---|---|
1 | 1 | 2 | 3 |
2 | 2 | 4 | 6 |
3 | 3 | 6 | 9 |
4 | 4 | 8 | 12 |
5 | 5 | 10 | 15 |
'nun çıktısı:
× | 1 | 2 | 3 |
---|---|---|---|
1 | 1 | 2 | 3 |
2 | 2 | 4 | 6 |
3 | 3 | 6 | 9 |
4 | 4 | 8 | 12 |
5 | 5 | 10 | 15 |
şeklinde olur.
Tüm bu şablonlar, burada olduğu gibi, tek bir yerde organize edilmeli ve listelenmelidir.
Ayrıca bakınız
değiştirörnekler:
Dış bağlantılar
değiştir- HTML tablolarını wikiye dönüştürücü adresi cnic.org
- Bu adres virgülle ayrılmış değerler (CSV) formatını çubuk söz dizimi formatına dönüştürür. Excel vs. türünde yazılmış tablolarınızı bu adresi kullanarak dönüştürebilirsiniz. (Fazla bilgi için tıklayınız.)
- HTML tablolarını wikiye dönüştürücü adresi wackyboy.com
- HTML tablolarını wikiye dönüştürücü adresi uni-bonn.de
- HTML tablolarını wikiye dönüştürücü adresi diberri.dyndns.org
- pywikipediabot (HTML tablolarını wikiye dönüştürebilir)