Kullanıcı:Hatas/Viki tablo örnekleri: Revizyonlar arasındaki fark
kDeğişiklik özeti yok |
(yeni örnek tablo ekle) |
||
1. satır: | 1. satır: | ||
= | = Kısa kısa notlar = | ||
{| style="float:right;" border=1 | {| style="float:right;" border=1 | ||
| style="background: #ffffff; border: none; padding: 0cm" | '''Bazı HTML renk kodları''' | | style="background: #ffffff; border: none; padding: 0cm" | '''Bazı HTML renk kodları''' | ||
50. satır: | 50. satır: | ||
= Tablo örnekleri = | = Tablo örnekleri = | ||
== Örnek 1 | == Ö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. | Alttaki tabloda metinler hücrenin sol üst köşesine hizalanmaktadır. Tabloda border="0" değerini 1 yaparak çerçeveleri görüntüleyebilirsiniz. | ||
73. satır: | 73. satır: | ||
== Örnek 2 | == Ö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. | 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. | ||
95. satır: | 95. satır: | ||
|} | |} | ||
== Örnek 3 | == Örnek 3 == | ||
MediaWiki'nin "galery" özelliğinde resmin boyutunun ayarlanması mümkün değildir, alttaki tabloda ise mümkündür. | MediaWiki'nin "galery" özelliğinde resmin boyutunun ayarlanması mümkün değildir, alttaki tabloda ise mümkündür. | ||
103. satır: | 103. satır: | ||
|} | |} | ||
== Örnek 4 | == Örnek 4 == | ||
Tablodaki hücre içerikleri düşeyde üste hizlanmıştır. Resim büyüklükleri ayarlanabilir. | Tablodaki hücre içerikleri düşeyde üste hizlanmıştır. Resim büyüklükleri ayarlanabilir. | ||
115. satır: | 115. satır: | ||
|} | |} | ||
== Örnek 5 | == Örnek 5 == | ||
{| style="text-align: left; width: 80%; table-layout: fixed;" border="0" | {| style="text-align: left; width: 80%; table-layout: fixed;" border="0" | ||
|- valign="top" | |- valign="top" | ||
150. satır: | 150. satır: | ||
== Örnek 6 | == Örnek 6 == | ||
{| class="wikitable" style="font-size: normal; text-align: left; width: 100%; table-layout: fixed;" | {| class="wikitable" style="font-size: normal; text-align: left; width: 100%; table-layout: fixed;" | ||
205. satır: | 205. satır: | ||
== Örnek 7 | == Örnek 7 == | ||
<div style=" | <div style=" | ||
border: 1px solid #AAAAAA; | border: 1px solid #AAAAAA; | ||
221. satır: | 221. satır: | ||
== Örnek 8 | == Örnek 8 == | ||
(NOT: Alttaki tabloya benzer tablolar oluşturmak için UbuntuWiki'de hazır bir şablon [[Şablon:Dolaşım|bulunmaktadır]].) | (NOT: Alttaki tabloya benzer tablolar oluşturmak için UbuntuWiki'de hazır bir şablon [[Şablon:Dolaşım|bulunmaktadır]].) | ||
<table style="width:90%; margin: 10px 5% 10px 5%; border: 1px solid #aaaaaa;"> | <table style="width:90%; margin: 10px 5% 10px 5%; border: 1px solid #aaaaaa;"> | ||
250. satır: | 250. satır: | ||
</table> | </table> | ||
== Örnek 9 | == Ö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. | 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. | ||
270. satır: | 270. satır: | ||
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, 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 ("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. | |||
* ''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ık boyutu ve renginin de 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. | |||
= Hizalama = | = Hizalama = | ||
== Tabloyu sayfaya hizalama == | == Tabloyu sayfaya hizalama == | ||
{| class="wikitable" style="float:right; | {| 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ı | | yazı yazı yazı yazı yazı yazı | ||
283. satır: | 314. satır: | ||
* Tabloyu sağa yaslamak için '''style="float:right;"''' kullanılır. | * Tabloyu sağa yaslamak için '''style="float:right;"''' kullanılır. | ||
* 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> | * 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 == | == Yazıların, tablonun etrafında akmasını sağlamak ya da önlemek == | ||
296. satır: | 326. satır: | ||
* Örneğin alttaki tablonun kodları içinde (style="float:left") kullanıldığı için kendisinden sonra gelen metinler tablonun etrafından akar. | * Ö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; | :{| 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ı | | 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'' | :''text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text'' | ||
19.33, 23 Ağustos 2013 tarihindeki hâli
Kısa kısa notlar
Bazı HTML renk kodları |
#a0daf8 |
#fff0f5 |
#6ef7a7 |
#c5fcdc |
#9f9fff |
#efefff |
#ffb466 |
#ffcf96 |
#ff7070 |
#ffc1c1 |
#aaaaaa |
#f2f1f0 |
#f9f9f9 |
#ffffff (beyaz) |
"transparent" parametresi (saydam) |
Tablo yazımı konusunda temel düzeyde bilgi edinmek için Türkçe Vikipedi'deki Yardım:Tablo sayfasına bakabilirsiniz. Vikide tablo yazmak için biraz HTML dili bilmek gerekiyor. HTML bilmeseniz de benim yaptığım gibi kendinize bir kaç küçük not çıkarıp denemeler yaparak Vikide tablolar oluşturabilirsiniz.
Tablo kodlarında kullanılan bazı parametrelerin anlamları şöyledir:
- border: kenarlık boyutunu belirtir. Örneğin border="1"
- padding, cellpadding: Tablo içindeki metinlerin tablo kenarlığından ne kadar içeride başlayacağını tanımlar.
- Ö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)
- 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 15 px kadar boşluk bırakmamız gereklidir. Aksi takdirde şablonun kullanıldığı sayfalarda konu başlıkları çerçevesi ile şablonun çerçevesi üst üste biniyor. (NOT: margin kullanmak yerine şablon kodları bittikten sonra satır boşlukları bırakarak sorunu çözmeyi denesek de işe yaramaz).
- Web renkleri konusunda iki sayfa: tr.wikipedia.org, computerhope.com
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ı
|
İnternet uygulamaları
|
Örnek 3
MediaWiki'nin "galery" özelliğinde resmin boyutunun ayarlanması mümkün değildir, alttaki tabloda ise mümkündür.
Örnek 4
Tablodaki hücre içerikleri düşeyde üste hizlanmıştır. Resim büyüklükleri ayarlanabilir.
Örnek 5
Aynı satırdaki iki hücreyi birleştirmek için colspan="2" kodu kullanılır.
|
Aynı sütundaki iki hücreyi birleştirmek için rowspan="2" kodu kullanılır.
|
Örnek 6
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 7
örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek • örnek
Örnek 8
(NOT: Alttaki tabloya benzer tablolar oluşturmak için UbuntuWiki'de hazır bir şablon bulunmaktadı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 ("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.
- 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ık boyutu ve renginin de 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.
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.
- 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.
- 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.
- Yatayda hizalamak için ise right, center, left parametreleri kullanılır.
İnternet uygulamaları: | Mozilla Firefox |
Grafik uygulamaları | KolourPaint |
Video uygulamaları | VLC media player |