Tablo Oluşturmak

Dokümanlarımızda verilerimizi düzenli bir biçimde paylaşmanın en kolay yolu onları bir tablo üzerinde göstermektir. Tabloların sütun ve satırlardan oluştuğunu bildiğinizi varsayarsak, ki bilmemeniz mümkün değil, bunun ne kadar doğru olduğu konusunda bana katılmalısınız.

Markdown ile tablo oluşturabilmek ilk başta biraz karmaşıkmış gibi gözükebilir fakat sizlere bu konuyu öyle basit bir şekilde göstereceğim ki, oluşturmanın ne kadar kolay olduğuna kendiniz bile inanamayacaksınız.

Bana bilgisayarlarımızda kullandığımız öyle bir işaret söyleyin ki, iki kelime arasında set oluşturabiliyor olsun. Cevabınızın | olduğunu duydum, bravo size. Dikey çubuk, çubuk, dik çizgi gibi isimlerle bildiğiniz bu işaret, bizim tablolarımızda önemli roller üstleniyor, sütunlarımızı oluşturuyor.

Markdown’da, tablolarımızın ilk satırı her zaman başlık satırıdır. Bir alt satırda ise sütunlarımızın yerleşiminin nasıl olacağını işaretleriz. Ardından gelecek tüm satırlarda verilerimiz bulunur.

Dilerseniz adım adım gidelim. Önce tablomuzu oluşturalım, ardından tablomuzu şekillendirmeyi görelim.

Basit Tablo Oluşturmak

Yukarıda ilk satırın her zaman başlık satırı olduğunu, ardından gelen satırın da biçimlendirme satırı olduğunu söylemiştim. Ayrıca sütunlarımızı bölecek işaretin de | olduğunu eklemiştim.

Şimdi bu iki bilgiyi birleştirelim. İlk sütunda ad, soyad ve pozüsyon bilgilerini aralarına dik çizgi koyarak ayıralım. Ardından alt satıra geçelim ve aynı işi orada da yapalım. Tek bir fark var ki, ikinci satırda ad, soyad gibi kelimelerin yerine en az üç tane - koyalım. Bunun ileride ne olduğunu anlatacağım, acele etmeyin.

En sonunda da üçüncü satırdan itibaren verileri girelim.

Haydi bunu bir örnekle akılda kalıcı hâle getirelim:

Markdown

Aşağıdaki tabloda bilgileri bulunan kişiler yarınki toplantıya davetlidir:

|Ad|Soyad|Pozüsyon|
|---|---|---|
|Leyla|karabacak|Yönetici Asistanı|
|Mahmut|Erdemli|Genel Koordinatör|
|Yusuf|Sanıkgil|Muhasebe Müdür Yardımcısı|

Bu kişilerin en geç üç saat içinde toplantı katılım durumlarını bildirmeleri gerekmektedir.

HTML

<p>Aşağıdaki tabloda bilgileri bulunan kişiler yarınki toplantıya davetlidir:</p>
<table>
<thead>
<tr class="header">
<th>Ad</th>
<th>Soyad</th>
<th>Pozüsyon</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>Leyla</td>
<td>karabacak</td>
<td>Yönetici Asistanı</td>
</tr>
<tr class="even">
<td>Mahmut</td>
<td>Erdemli</td>
<td>Genel Koordinatör</td>
</tr>
<tr class="odd">
<td>Yusuf</td>
<td>Sanıkgil</td>
<td>Muhasebe Müdür Yardımcısı</td>
</tr>
</tbody>
</table>
<p>Bu kişilerin en geç üç saat içinde toplantı katılım durumlarını bildirmeleri gerekmektedir.</p>

Çıktı

Aşağıdaki tabloda bilgileri bulunan kişiler yarınki toplantıya davetlidir:

Bu kişilerin en geç üç saat içinde toplantı katılım durumlarını bildirmeleri gerekmektedir.

Not

Her satırın başında ve sonunda | işaretinin olması gerektiğini aklınızdan çıkarmayın. Çoğu Markdown işlemcisi bunu zorunlu kılmasa da siz, elinizi alıştırmaya bakın.

Tablo Hizalamak

İkinci satırdaki --- işaretlerinin ne olduğunu sonra söyleyeceğim demiştim. O sonra artık şimdi.

Eğer her bir sütun için sadece --- kullanırsanız herhangi bir biçimlendirme olmadan basit bir tablo oluşturmuş olursunuz. Eğer o üç tirenin sadece başına iki nokta üst üste : koyarsanız sola, sonuna : koyarsanız sağa, her iki tarafına da : koyarsanız ortalı bir sütun elde etmiş olursunuz.

Tamam! Yukarıdaki örneğin aynısını ad sütununu sola, soyad sütununu ortaya ve pozüsyon sütununu da sağa yaslı olacak şekilde yeniden yazalım:

Markdown

Aşağıdaki tabloda bilgileri bulunan kişiler yarınki toplantıya davetlidir:

|Ad|Soyad|Pozüsyon|
|:---|:---:|---:|
|Leyla|karabacak|Yönetici Asistanı|
|Mahmut|Erdemli|Genel Koordinatör|
|Yusuf|Sanıkgil|Muhasebe Müdür Yardımcısı|

Bu kişilerin en geç üç saat içinde toplantı katılım durumlarını bildirmeleri gerekmektedir.

HTML

<p>Aşağıdaki tabloda bilgileri bulunan kişiler yarınki toplantıya davetlidir:</p>
<table>
<thead>
<tr class="header">
<th style="text-align: left;">Ad</th>
<th style="text-align: center;">Soyad</th>
<th style="text-align: right;">Pozüsyon</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: left;">Leyla</td>
<td style="text-align: center;">karabacak</td>
<td style="text-align: right;">Yönetici Asistanı</td>
</tr>
<tr class="even">
<td style="text-align: left;">Mahmut</td>
<td style="text-align: center;">Erdemli</td>
<td style="text-align: right;">Genel Koordinatör</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Yusuf</td>
<td style="text-align: center;">Sanıkgil</td>
<td style="text-align: right;">Muhasebe Müdür Yardımcısı</td>
</tr>
</tbody>
</table>
<p>Bu kişilerin en geç üç saat içinde toplantı katılım durumlarını bildirmeleri gerekmektedir.</p>

Çıktı

Aşağıdaki tabloda bilgileri bulunan kişiler yarınki toplantıya davetlidir:

Bu kişilerin en geç üç saat içinde toplantı katılım durumlarını bildirmeleri gerekmektedir.

Gördüğünüz gibi özellikle HTML kodlarında Left, Center ve Right gibi kelimeler var. Bu, istediğimizi başardığımız anlamına geliyor.

Not

Tablo ücrelerinin içinde link oluşturmak, altını çizmek gibi işlemleri gerçekleştirebilirsiniz fakat kod bloğu gibi birden çok satır içeren biçimlendirmeler uygulayamazsınız. Bu durumda listeler, kod blokları gibi biçimlendirmeler tablolarda kullanılamıyorken satır için kod bloğu eklemek başarılı bir şekilde kullanılabilir.