Reklam Alanı
Zaman: 24 Nisan 2014, 18:20

Tüm zamanlar UTC + 2 saat


Eğer sitemizi ilk kez ziyaret ediyorsanız, lütfen Kurallar ve Sıkça Sorulan Sorular sayfalarımızı okuyunuz. Forumlarımıza mesaj gönderebilmek için kayıt olmanız gerekmektedir. Forumlarımızdaki mesajları görüntülemek için forumlar sayfamızdan istediğiniz forumu seçip ziyaret edebilirsiniz.



Yeni başlık gönder Başlığa cevap ver  [ 1 mesaj ] 
Yazar Mesaj
 Mesaj Başlığı: HTML Tablo Biçimi
MesajGönderilme zamanı: 22 Temmuz 2006, 15:38 
Fast Friend
Fast Friend
Kullanıcı avatarı

Kayıt: 24 Aralık 2005, 16:26
Mesajlar: 207
Yaş: 29
Tablo Biçimi

Tablo Oluşturma

HTML'de tablolar <table> koduyla başlar, </table> koduyla biter. HTML'de tabloyu satır satır tanımlayarak kodlarız. Biliyoruz ki her tabloda en az bir satır vardır; HTML'de satır kodları <tr> (table row) koduyla başlar ve </tr> koduyla biter. Tabi her satırda kaç hücre (sütun) olacağı da belirtilmeli. Her satırda en az bir hücre vardır ve satırdaki her hücre HTML'de <td> (table data) koduyla başlar ve </td> biter.

Tabi pek birşey anlamadınız. Basit bir uygulama yaparsak, yukarıda anlattıklarım daha iyi anlaşılacaktır. Mesela 3 satırlı 3 sütunlu bir tablo yapalım.

Kod:
<html>
<head>
  <title>BASİT TABLO TASARIMI</title>
</head>
<body>
<table>
  <tr>
    <td>Yazar</td>
    <td>Ülke</td>
    <td>Kitap</td>
  </tr>
  <tr>
    <td>Mario Llosa Vargas</td>
    <td>Peru</td>
    <td>Julia Teyze</td>
  </tr>
  <tr>
    <td>Isabelle Allende</td>
    <td>Şili</td>
    <td>Eva Luna</td>
  </tr>
</table>
</body>   
</html>


Bu uygulamada neler yaptık? <table> komutuyla tablo için gereken kodları yazmaya başlamış olduk. HTML'de tablolar; daha önce dediğim gibi, satır satır işlenir. Biz de <tr>...</tr> kodlarıyla bu tabloyu satır satır işledik. İlk satıra üç tane hücre işledik, bunun için de <td>...</td> kodlarını kullandık. İlk satırda üç tane hücre olduğundan, üç defa <td>...</td> kodu yazdık. Yaptığımız işi özetlersek, üç satır için üç defa <tr>...</tr> kodunu kullandık. Her satırda da üçer tane hücre yapmak için, toplam dokuz defa <td>...</td> kullanmış olduk.

Tablo Sınır Çizgisi

Tabi uygulamada yaptığımız tablo pek birşeye benzemedi. Çünkü kupkuru <table> kodu sadece tablonun olduğunu belirtir, tabloyu biçimlendirmek için bazı parametrelere ihtiyacımız vardır. Bunlardan bir tanesi de border (sınır/çerçeve) parametresidir; tablo çerçevesinin kalınlığını gösterir. border parametresi için varsayılan değer 0'dır. Tablonun kaç hücreden oluştuğunu daha rahat görebilmeniz için border değerini 1 olarak alıyorum. Aynı örnekte deneyelim:

Kod:
</head>
<body>
<table border="1">
  <tr>
    <td>Yazar</td>
    <td>Ülke</td>
    <td>Kitap</td>
  </tr>
  <tr>
     <td>Mario Llosa Vargas</td>
     <td>Peru</td>
     <td>Julia Teyze</td>
  </tr>
  <tr>
     <td>Isabelle Allende</td>
     <td>Şili</td>
     <td>Eva Luna</td>
  </tr>
</table>
</body>   
</html>


Tablomuzda sınır çizgileri hücrelerin dört yanını da kapatmaktadır. Ama böyle olması şart değil. frame (çerçeve) parametresine aşağıdaki değerleri vererer tablomuza başka biçimler verebiliriz:

above Sadece hücre üstlerindeki sınır çizgilerini gösterir.
below Sadece hücre altlarındaki sınır çizgilerini gösterir.
vsides Sadece düşey sınır çizgilerini gösterir.
hsides Sadece yatay sınır çizgilerini gösterir.
rhs Sadece sağ düşey sınır çizgilerini gösterir.
lhs Sadece sol düşey sınır çizgilerini gösterir.
box Tüm sınır çizgilerini gösterir.
border Tüm sınır çizgilerini gösterir.
void Sınır çizgilerini göstermez.

Not: frame parametresini sadece IE4 ve üstü destekliyor.

frame parametresine benzeyen bir başka parametre de rules parametresi. Bu parametre de sadece IE ve üzeri gözatıcılar tarafından destekleniyor. Parametreye şu değerleri verebilirsiniz:

rows Sadece satır çizgilerini gösterir.
cols Sadece sütun çizgilerini gösterir.
all Tüm çizgileri gösterir.
groups Sadece tablonun etrafındaki çizgileri gösterir.
none Sınır çizgilerini göstermez.

Tablo Boyutlandırma

Evet, artık çerçevesi olan bir tablomuz var. Ama tablomuzun ve hücrelerinin boyutları pek güzel değil, HTML hücrelerin genişliğine göre ölçüler belirlemiş kendince. Bu gibi ölçüleri HTML'in insafına bırakmamalıyız. Bu nedenle <table> ve <td> kodları için width (genişlik) ve height (yükseklik) parametrelerini kullanacağız. Bu parametrelere piksel cinsinden değerler verebildiğimiz gibi, yüzde oranları da verebiliriz. Mesela "100%", "50%" vb. (İngilizcede yüzde işareti rakamların sonuna yazılır, tabi HTML'de de). Aşağıdaki uygulamaya bakalım.

Kod:
<html>
<head>
  <title>Tablo Ölçülendirme</title>
</head>
<body>

<table border="1" width="90%">
  <tr>
    <td width="200">Yazar</td>
    <td width="20%">Ülke</td>
    <td>Kitap</td>
  </tr>
    <tr>
    <td>Mario Llosa Vargas</td>
    <td>Peru</td>
    <td>Julia Teyze</td>
  </tr>
  <tr>
    <td>Isabelle Allende</td>
    <td>Şili</td>
    <td>Eva Luna</td>
  </tr>
</table>

</body>   
</html>


Yaptığımız bu uygulamada tablonun genişliğini "90" değerine eşitledik. Böylece tablonun genişliği, pencerenin genişliğinin %90'ına eşilenmiş oldu. Pencerenin büyüklüğüyle oynarsanız, göreceksiniz ki bu oran değişmeyecektir. (Tabi pencereyi fazla küçültürseniz başka. Ben anlatmayım, siz görün.) Bu uygulamada tablonun genişliğini değiştirmekle kalmadık, sütunların genişliklerini de belirledik. Bunun için tablonun ilk satırındaki hücrelere width parametresi atadık. İlk hücrenin genişliği için 200 piksel, ikinci hücrenin genişliği için %20 değerlerini verdik. Son hücreye ise değer vermedik, zira tablonun genişliğini önceden belirlemiştik. Yani son sütunun genişliği, tablo genişliği - (1. sütun genişliği + 2. sütun genişliği) olarak belirlemiş olduk zaten.

Hücreler Arası ve Hücre İçi Boşluklar

Tablomuz daha güzel oldu. <table> koduna başka ayarlamalar da yapabiliriz. Örneğin cellpadding parametresiyle, hücre içindekilerle hücre çizgisi arasındaki boşluğu ayarlayabiliriz. Veya cellspacing ile hücreler arasındaki boşluğu ayarlayabiliriz. Hemen uygulamayla deneyelim:
Kod:
<html>
<head>
  <title>Tablo Biçimlendirme</title>
</head>
<body>

<table border="1" cellspacing="0" cellpadding="2" width="90%">
  <tr>
    <td width="200">Yazar</td>
    <td width="20%">Ülke</td>
    <td>Kitap</td>
  </tr>



Tablomuz çok daha şık oldu. Son uygulamada ne yaptık? Hücreler arasındaki boşluğu sıfırladık, böylece tablomuz hücre hücre değil, çizgilerle bölünmüş mazgal haline büründü. Başka ne yaptık? Bir de hücre çizgisi ile hücre içindeki yazılar arasındaki boşluğu "2" olarak artırdık. Sizler bu rakamlarla oynayarak nelerin değişeceğini gözlemleyebilirsiniz.

Hücre İçi Hizalama

Tablodaki hücreler içinde bulunan yazıların hangi yana yaslanacağını align ve valign parametreleriyle belirleyebiliriz. Bu parametreler <table>, <tr> veya <td> kodlarına uygulanabilir. align parametresini daha önceki bölümlerden biliyoruz, hücre içindeki donatıyı (metin, resim vb.) sağa, sola veya ortaya yaslamasını sağlar. valign ise hücre içindeki donatıyı aşağı, yukarı veya ortaya (bottom, top, center) yaslamaya sağlar. Bu iki parametreyi birden uygulayarak, karma yaslamalar yapabiliriz: (solyukarı, ortaaşağı, vb.) Aşağıda bu karma yaslamalara bakalım:

Kod:
<html>
<head>
  <title>Tablo Hizalama</title>
</head>
<body>

<table border="1" cellspacing="0" cellpadding="1" width="90%">
  <tr valign="top" height="50">
    <td width="200" align="right">Yazar</td>
    <td width="20%" align="center">Ülke</td>
    <td align="left">Kitap</td>
  </tr>
  <tr valign="bottom" height="50">
    <td align="right">Mario Llosa Vargas</td>
    <td align="center">Peru</td>
    <td align="left">Julia Teyze</td>
  </tr>
  <tr valign="center" height="50">
    <td align="right">Isabelle Allende</td>
    <td align="center">Şili</td>
    <td align="left">Eva Luna</td>
  </tr>
</table>

</body>   
</html>


Yukarıdaki uygulamada ne yaptık? İlk satırı yukarıya, ikinci satırı aşağıya, üçüncü satırı ise araya hizaladık. Sonra hücreleri teker teker sağa, sola veya ortaya yasladık. İleriki sayfalarda bu parametrelerin başka birçok kod için de geçerli olduğunu göreceğiz.

Arkaplan Tablo (veya Hücre) Rengi

Tablo biçimi için <table> ve <td> kodları için bir başka parametre bgcolor parametresidir. Bu parametre arka plan rengini değiştirir. Hemen uygulamaya bakalım:

Kod:
<html>
<head>
  <title>Tablo Renklendirme</title>
</head>
<body>

<table border="1" cellspacing="0" cellpadding="2" width="90%">
  <tr>
    <td width="200" bgcolor=yellow>Yazar</td>
    <td width="20%" bgcolor=yellow>Ülke</td>
    <td bgcolor=yellow>Kitap</td>
  </tr>
  <tr>
    <td bgcolor=blue>Mario Llosa Vargas</td>
    <td bgcolor=blue>Peru</td>
    <td bgcolor=blue>Julia Teyze</td>
  </tr>
  <tr>
    <td bgcolor=orange>Isabelle Allende</td>
    <td bgcolor=orange>Şili</td>
    <td bgcolor=orange>Eva Luna</td>
  </tr>
</table>

</body>   
</html>


Tablo Sınır Çizgisi Formatı

Tabi sadece geri planı değil, çerçeve rengini de değiştirebiliriz. Bunun için bordercolor parametresi kullanılır. Eğer tablo çerçevesi 3d (üç boyutlu) olmasını istiyorsak, bordercolorlight ile çerçevenin aydınlık kısmının rengini, bordercolordark ile de çerçevenin karanlık kısmının rengini belirleyebiliriz. Bu konuda bir uygulama yapalım; çerçeve daha iyi görünsün diye çerçeve kalınlığını artırıyorum:

Kod:
<html>
<head>
  <title>Çerçeve Renklendirme</title>
</head>
<body>

<table border="4" cellspacing="0" cellpadding="1" width="90%" bordercolorlight="#aacccc" bordercolordark="#459999">
  <tr>
    <td width="200">Yazar</td>
    <td width="20%">Ülke</td>
    <td>Kitap</td>
  </tr>
  <tr>
    <td>Mario Llosa Vargas</td>
    <td>Peru</td>
    <td>Julia Teyze</td>
  </tr>
  <tr>
    <td>Isabelle Allende</td>
    <td>Şili</td>
    <td>Eva Luna</td>
  </tr>
</table>

</body>   
</html>



Volkan Derinbay'a tşkler.



Paylaş:
  
 
Eskiden itibaren mesajları göster:  Sırala  
Yeni başlık gönder Başlığa cevap ver  [ 1 mesaj ] 


Benzer başlıklar
 Başlıklar   Yazar   Cevaplar   Görüntüleme   Son mesaj 
Bu başlıkta daha yeni okunmayan mesaj yok. HTML Yazı Biçimi

UnreaL

0

19866

22 Temmuz 2006, 15:36

UnreaL Son mesajı görüntüle

Bu başlıkta daha yeni okunmayan mesaj yok. HTML Tablo Tasarımı

UnreaL

1

18159

15 Ağustos 2006, 15:51

ahmetcan01 Son mesajı görüntüle

Bu başlıkta daha yeni okunmayan mesaj yok. ACİL HTML tablo olarak CV hazırlamam gerek arkadaşlar yardım

vataner

0

655

01 Nisan 2010, 02:55

vataner Son mesajı görüntüle

Bu başlıkta daha yeni okunmayan mesaj yok. Html

UnreaL

0

3607

22 Temmuz 2006, 15:34

UnreaL Son mesajı görüntüle

Bu başlıkta daha yeni okunmayan mesaj yok. HTML Linkler

UnreaL

0

6515

22 Temmuz 2006, 15:37

UnreaL Son mesajı görüntüle

 


Kimler çevrimiçi

Bu forumu gezen kullanıcılar: Hiç bir kayıtlı kullanıcı yok ve 0 misafir


Bu foruma yeni başlıklar gönderemezsiniz
Bu forumdaki başlıklara cevap veremezsiniz
Bu forumdaki mesajlarınızı düzenleyemezsiniz
Bu forumdaki mesajlarınızı silemezsiniz
Bu foruma eklentiler gönderemezsiniz


Yeni konular Yeni konular Site haritası Site haritası

© 2003, 2013 Türkiye Forum | Kullanım Koşulları | Gizlilik İlkeleri | Geçerli XHTML | CSS | Powered by phpBB® Forum Software © phpBB Group

Türkçe çeviri: phpBB Türkiye
phpBB SEO

Reklam Alanı

Sitemize kayıt olan bazı kullanıcılar forumlarımıza mesaj/başlık/konu/içerik gönderme veya yazma yetkisine sahip olurlar.Bu nedenle bu kayıtlı kullanıcılar sitemiz üzerine ya da forumlarımıza direkt olarak (önceden onaysız) mesaj gönderebilmektedirler. turkiyeforum.com yöneticileri ve yardımcıları bu kullanıcılar tarafından yayınlanabilecek her türlü uygunsuz, etik kurallara aykırı, site kurallarımıza aykırı, telif haklarının ihlalini içeren, yasa dışı v.b. içerikleri/mesajları/ögeleri tespit eder etmez derhal ilgili konuyu/mesajı/başlığı/yazıyı site üzerinden sileceklerdir/yayından kaldıracaklardır ve gerekirse kullanıcının IP adresini tespit edip ilgili kullanıcıyı siteden uzaklaştıracaklardır. Yine de her türlü duruma karşı tarafımızdan tespit edilemeyen, gözümüzden kaçan, takip edilemeyen bu tarz ilgili kurallara ya da yasalara aykırı unsurlar bulursanız İletişim formunu ya da admin @ turkiyeforum.com e-posta adresini kullanarak bize bildirebilirsiniz.