Aksaray Yöresel Kültürel Kamusal Kurumsal Paylaşım sitesi Aksarayın en iyi Sitesi
Üyelik Giriş Yap | Üye Ol | Şifrem Neydi | Canlı Destek Facebook
Konu Açan fatih kurtbey kocapinar
9.04.2011 02:22:43
Normal Üye
fatih kurtbey kocapinar
 
Mutlumusun :
Nebim
Neden :
Bilmiom
SonKararinmi :
Ellam oyle

Html'de en çok kullanılan ve kullanılması gereken komutlar tablo komutlarıdır.Çünkü sayfamızdaki öğelerin belirli bir düzende olması için tablo kullanmak şarttır.Mesela birçok kişinin isim ve telefon bilgilerinin listelenmesi gerektiğinde bunu tablo kullanmadan yapmak hem zor olur hemde istediğimiz gibi bir sonuç vermez.İsimlerin ve telefon numaralarının alt alta durması gerekir.Yazılar arasında boşluk kullanarak bunu yapmaya kalkarsak tüm satırlar hizalı bir şekilde görünmeyecektir.Görünse bile ilk bakışta bilgileri algılamak zor olacaktır.Ayrıca bu şekilde bilgileri istediğimiz bir alana yerleştirmeyiz.Bu bilgiler ya sola,ya sağa yada ortaya hizalanacağı için istediğimiz sonuçları elde edemeyiz.Ancak tablo kullandığımız zaman tüm bilgiler hizalı bir şekilde listelenmiş olacaktır.Gerekirse satırlar arasında (tablonun genelinde) çerçeve kullanarak daha görsel bir sayfa elde edebiliriz.Bu şekilde tabloyu istediğimiz gibi hizalayabiliriz.Şimdi tablonun komutlarının kullanımı görelim;
Öncelikle tablo komutlarını basitçe bir anlatalım.
Tüm tablolar <table> ile başlar </table> ile biter.Bu iki komuttan ilki tablonun başladığını diğeri ise tablonun bittiğini gösterir.Bu iki komut arasında satır ve sütun eklemek için başka komutlar kullanılır.Bunlar;
satır eklemek için <tr>,
sütun eklemek için <td> 'dir.
Bu komutlar içinde birçok html komutuda kullanılabilir.Bunlar özellikle;
bgcolor         -> Zemin rengi.Hem tablo için hemde hücreler için kullanılabilir.
background     -> Zeminde resim göstermek için.Hrmde tablo hemde hücrelerin herbiri için kulanılabilir.
border            -> Tablonun etrafına çerçeve yapmak için kullanılır.
width           -> Tablo veya hücrenin genişliğini belirtmek için kullanılır.
height            -> Tablo veya hücrenin yüksekliğini belirtmek için kullanılır.
align              -> Tablo yada hücreyi belirli bir tarafa yaslamak için kullanılır.Tablonun kendisi için

kullanıldığında tablonun, hücreler için kullanıldığında hücre içindeki nesnelerin hangi tarafa yaslanacağını belirtir.
valign     -> Hücreler için kullanılır.Hücre içindeki nesnelerin yukarı, aşağı yada ortada durmasını sağlar.
colspan     -> Sütunları birleştirmek için kullanılır.
rowspan     -> Satırları birleştirmek için kullanılır.
cellspacing     -> Hücreler arasındaki boşlukları belirtir.
cellpading     -> Hücrelerdeki nesnelerin kenarlara ne kadar uzaklıkta olacağını belirtir.

Şimdi Html komutları ile basit bir tablo oluşturalım.
<table>
<tr>
<td>deneme
</td>
</tr>
</table>

Yukarıdaki komutların sonucunda ortaya aşağıdaki gibi bir tablo çıkar.
deneme

Burada yapılmak istenen şudur;
Önce <table> komutu ile tablonun başlangıcı belirtilir.Daha sonra <tr> komutu ile bir satır açılır.Ardından <td> komutu ile daha önceden açtığımız satırın içine bir tane sütun açmış olduk.Şimdi sıra açtığımız sütunun içine birşeyler yazdırmakta,bizde sütunun içine "deneme" yazdırdık.En sonunda ise açtığımız sütun,satır ve tabloyu bitirme komutlarını kullandık.Dikkat edilmesi gereken en son açtığımızı ilk kapatmamız gerektiğidir.Yani açılan sütun içine bir şeyler yazdırdıktan sonra sütunu kapattık.Bunun için </td> kullanmak yeterlidir.Daha sonra </tr> ile satırı </table> ile tabloyu kapattık.
Eğer biz açtığımız satırda iki tane sütun kullanmak isteseydik eklememiz gereken;
<td>deneme</td> satırından sonra,
<td>deneme2</td> 'dir.
Böylece satırı açtıktan sonra iki tane sütun açmış olduk ve aşağıdaki tabloyu elde ettik.
deneme     deneme2

Şimdide 2 satır 3 sütundan oluşan bir tablo yapalım.
<table>
<tr>
<td>hücre 1-1</td>
<td>hücre 1-2</td>
<td>hücre 1-3</td>
</tr>
<tr>
<td>hücre 2-1</td>
<td>hücre 2-2</td>
<td>hücre 2-3</td>
</tr>
</table>
Souçta;
hücre 1-1     hücre 1-2     hücre 1-3
hücre 2-1     hücre 2-2     hücre 2-3

En son olarakta yukarıda anlattıklarımız ve tablolarda kullanılan diğer html komutlarını kullanarak karmaşık bir tablo yapalım.
Üye kimlik kartı
Adı     theBozo     
Soyadı     cool
Doğum tarihi     1982
Mezopotamya Üniversitesi     No:99331013

 Şimdide kodları satır satır açıklıyoruz,kırmızı yazılar html kısmı,diğerleri açıklamadır.

<table width="350" height="110" border="1" align="center" bgcolor="#9BD7FF" cellpadding="1" cellspacing="1" bordercolor="#CC3333">
En başta herzamanki gibi tablomuzu açıyoruz.width ile tablomuzun genişliğini 350 piksel,height ile de yüksekliği 110 piksel olarak ayarlıyoruz.Border komutu ile 1 piksellik çerçeve yapıyoruz.Align komutu ile tablomuzu bulunduğu ortamda ortalıyoruz,tabloyu sola yaslamak için center yerine left,sağa yaslamak için right yazabilirsiniz.Bgcolor ile tabloya zemin rengi veriyoruz.Bu renk tabloda bulunan açık mavidir.Cellpading ile hücreler içindeki nesnelerin kenarlara olan uzaklıkları 1 piksel olarak belirtiyoruz.Böylece hücreler içindeki yazılar çerçevelere değmeyecektir.Cellspacing ile hücreler arasına 1 piksellik boşluk koyuyoruz.Dikkat ederseniz kırmızı çizgiler arasındaki boşluklar bu komutla oluşmuştur.Bordercolor ile kırmzı olan çerçeve rengini belirtiyoruz.
<tr> ilk satırımızı açıyoruz.
<td colspan="3" background="tableimg/bg.jpg"><b><font color="#FFFF00" size="2" face="Tahoma">Üye kimlik kartı</font></b>
td komutu ile bir sütun oluşturuyoruz.Colspan=3 ile sağdaki iki hücre ile bu hücreyi birleştiriyoruz. Background ile bu hücrenin zeminine bir resim döşüyoruz.Bunun için resmin yolunu yazmak yeterli olacaktır.Bundan sonraki kısım ise tablonun içindeki yazı ile ilgili.Yazılar için kullanılan komutlar ile buraya bir metin yazılmaktadır.
</td> açtığımız ilk sütunu kapatıyoruz.
</tr> açtığımız ilk satırı kapatıyoruz.
<tr> şimdide ikinci bir satır açıyoruz.
<td width="73"><b><font size="1" face="Tahoma">Adı</font></b>
td ile bir sütun açıyoruz, width ile de genişliği 73 piksel olarak belirtiyoruz.Sonraki kısım tablonun içindeki yazılar ile ilgili.Bu kısım tabloda "Adı" yazan hücredir.
</td> "Adı" yazan sütunu kapatıyoruz.
<td width="155"><font size="1" face="Tahoma">theBozo</font>
td ile ikinci satırın ikinci sütununu açmış oluyoruz.width ile de genişliği 155 piksel yapıyoruz.Bu kısım "theBozo" yazan hücredir.
</td> "theBozo" yazan sütunu kapatıyoruz.
<td rowspan="3" width="114" align="center"> <font size="2" face="Tahoma"><img src="tableimg/foto.gif" width="60" height="60"></font>
td ile üçüncü sütunu açıyoruz.Rowspan, bu hücrenin alttaki 2 (+1 ,kendisi) hücre ile birleştirilmesi için yani üç tane hücreyi tek olarak göstermek için kullanılır.Align komutu ile hücre içindeki nesneleri ortalıyoruz.
</td> Birlerştirme yapılan sütunu kapatıyoruz.
</tr> İkinci satırı kapatıyoruz.
<tr> Ücüncü satırı açıyoruz.
<td width="73"><b><font size="1" face="Tahoma">Soyadı</font></b>
td ile" Soyadı" yazan sütunu açıyoruz.
</td> "Soyadı" yazan sütunu kapatıyoruz.
<td width="155"><font size="1" face="Tahoma">cool</font>
td ile "cool" yazan sütunu açıp genişliğini 155 olarak belirtiyoruz.
</td> "cool" yazan sütunu kapatıyoruz.
</tr> Üçüncü satırı kapatıyoruz.
<tr> Dördüncü satırı açıyoruz.
<td width="73"><b><font size="1" face="Tahoma">Doğum tarihi</font></b>
td ile "Doğum tarihi" yazan sütunu açıyoruz.Genişliğini de 73 piksel olarak belirliyoruz.
</td> Sütunu kapatıyoruz.
<td width="155"><font size="1" face="Tahoma">1982</font>
td ile "1982" yazan sütunu açıyoruz.Genişliğini 155 olarak belirliyoruz.
</td> Sütunu kapatıyoruz.
</tr> Satırı kapatıyoruz.
<tr> Beşinci satırı açıyoruz.
<td colspan="2"><font size="2" face="Tahoma">Mezopotamya Üniversitesi</font>
td ile sütunu açıp colspan=2 ile sağ taraftaki sütun ile birleştiriyoruz.
</td> Sütunu kapatıyoruz.
<td width="114" bgcolor="#379BFF"><font size="2" face="Tahoma">No:99331013</font>
td ile "No:99..." yazan sütunu açıp genişliğini 114 piksel olarak belirliyoruz.bgcolor komutu ile de bu hücrenin zemin rengini belirtiyoruz.Bu renk koyu olan mavidir.Tablonun zemin rengi olmasına rağmen eğer hücre için zemin rengi belirtilmişse bu renk görünecektir.
</td> Sütunu kapatıyoruz.
</tr> Satırı kapatıyoruz.
</table> Tabloyu kapatıyoruz.


İmza

aksaray

Cevap Yazan fatih kurtbey kocapinar
9.04.2011 02:48:28
Normal Üye
fatih kurtbey kocapinar
 
Mutlumusun :
Nebim
Neden :
Bilmiom
SonKararinmi :
Ellam oyle
Cevapları Sadece Üyeler Okuyabilir

aksaray

Cevap Yaz
Copyright
Bugün : 0 - 0 - 0 | Dün : 0 - 0 - 0 | Toplam : 182 - 1129 - 1311 | Üyeler : 0 - 2355 | Online : 0 - 1
Onlineler :
Neler Yaptık | Hakkımızda | İletişim | SiteMaps | Rss
2oo6-2o14 © Copyright Aksaray 68
Yazılım Tasarım
Aksaray 68

AKSARAY.TC - Bizimsite - Aksaray Bilisim - Ihlara - Aksaray Haberler- AxarayFm - siteni ekle
YASAL UYARI
Sitemiz, hukuka, yasalara, telif haklarına ve kişilik haklarına saygılı olmayı amaç edinmiştir. Sitemiz, 5651 sayılı yasada tanımlanan .yer sağlayıcı. olarak hizmet vermektedir. İlgili yasaya göre, site yönetiminin hukuka aykırı içerikleri kontrol etme yükümlülüğü yoktur. Bu sebeple, sitemiz .uyar ve kaldır. prensibini benimsemiştir. Telif hakkına konu olan eserlerin yasal olmayan bir biçimde paylaşıldığını ve yasal haklarının çiğnendiğini düşünen hak sahipleri veya meslek birlikleri, info@Aksaray.tc mail adresinden bize ulaşabilirler. Buraya ulaşan talep ve şikayetler Hukuk Müşavirimiz tarafından incelenecek, şikayet yerinde görüldüğü takdirde ihlal olduğu düşünülen içerikler sitemizden kaldırılacaktır.

Ping your blog, website, or RSS feed for Free
 

Hızlı Sohbet