İçeriğe atla

Yardım:Tablo

Vikisöz, özgür söz dizini




Çubuk söz dizimi

[değiştir]

Tablo 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 Html#Permitted_HTML w: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ştir]

Basit 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ştir]

Kaynak 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ştir]

Bir 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ştir]

Bü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ştir]

Tablodaki 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ştir]

Burada, 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 Vikisöz 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 Vikisöz 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
iç içe
tablo
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ştir]

MediaWiki'nin desteklediği diğer tablo söz dizimi türleri:

  1. XHTML
  2. 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ştir]
Tablo yazım çeşitlerinin karşılaştırması
 XHTML 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ücre2</td>

<td>hücre1
<td>hücre2 

| 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
1 2
3 4 
<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
1 2
3 4
5 6 
<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ştir]

Bir tablo .... {| ''params'' |} ile tanımlanır ve bu da <table ''değişkenler''>Buraya formatlanmamış metni yazınız </table> a eşittir.

Dikkat: {| ile değ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ştir]

Hü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ştir]

Açı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ştir]

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

5*3 Ç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

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.

4*3 Çarpım tablosu
× 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 :

2*3 Çarpım tablosu
× 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ştir]

1×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:

Çarpım tablosu
× 1 2 3
1 1 2 3
2 2 4 6

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 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ştir]

Bu ö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="225"|Rengi
!width="225"|Modeli
|-
|Porsche
|Kırmızı
|2005
|-
|Lamborghini
|Buz beyazı
|2004
|}
Adı Rengi Modeli
Porsche Kırmızı 2005
Lamborghini Buz beyazı 2004

Değişkenlerin ayarlanması

[değiştir]

Değ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ştir]

Bir 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ştir]

Bazı 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;

Ç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

'nun çıktısı:

Ç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

şeklinde olur.

Tüm bu şablonlar, burada olduğu gibi, tek bir yerde organize edilmeli ve listelenmelidir.

Galeriler

[değiştir]

Galeri özelliğinin bir yan ürünü olarak, galeri etiketi kullanarak tablo yapmak ta mümkündür. Ancak metin bir bağlantı içeriyorsa tüm metin iptal olur. 

<gallery>
Drenthe
Flevoland
Friesland
Gelderland
Groningen
Limburg
North Brabant (capital: [[Den Bosch]]) 
North Holland
Overijssel
South Holland
Utrecht
Zeeland
</gallery>

çıktısı:

Ayrıca bakınız

[değiştir]

örnekler:

Dış bağlantılar

[değiştir]
"https://tr.wikiquote.org/w/index.php?title=Yardım:Tablo&oldid=194111" sayfasından alınmıştır