Kurumsal Otomasyon Çözümlerinde Zirve

Html dilinde Tablo taglerinin kullanımı

TABLOLAR:

Tablolar Html dilinin tasarlanmasında ve düzenlenmesinde en çok kullanılan bölümlerdir.
Bir tablo genel olarak şu yapıya benzer.

< TABLE BORDER="2" CELLPADDING="3" CELLSPACING="1" HEIGHT="100" WIDTH="90%" BGCOLOR="gray" >
< TR >
< TD >1. sütun 1. satır< /TD >
< TD >2. sütun 1. satır< /TD >
< /TR >
< TR >
< TD >1. sütun 2. satır< /TD >
< TD >2. sütun 2. satır< /TD >
< /TR >
< TR >
< TD >1. sütun 3. satır< /TD >
< TD >2. sütun 3. satır< /TD >
< /TR >
< /TABLE >

< TABLE > tag’ini açarken BORDER=”2″ ile çerçevenin kalınlığının 2 pixel, CELLPADDING=”3″ ile hücre içindeki yazı ile çerçevesi arasında 3 pixel, CELLSPACING=”1″ ile hücreler arasında 1’er pixel boşluk olacağını , HEIGHT=”100″ ile yüksekliğinin 100 pixel olacağını, WIDTH=”90%” ile genişliğinin explorere penceresine göre %90’ı olacağını ve en son olarak da BGCOLOR=”gray” ile arka fon renginin gri olacağını vermiş olduk.
Tablo tanımlamaları her zaman için satır satır yapılır.
Yukarıda görüldüğü gibi < TR > (table row) ile yeni bir satır açıyoruz, ve altına da < TD > (table data) ile elemanlarımızı hücreleren yerleştiriyoruz. Sütunla işimiz bittiğinde < /TD > ile, satırla işimiz bittiğinde < /TR > ile kapatıyoruz. Tablomuzla işimiz bittiğinde de < /TABLE > ile tablomuzu kapatıyoruz.
Aşağıdaki gibi bir tablonun tag leri şu şekildedir.
1.Bölge
2.Bölge
3.Bölge
4.Bölge
5.Bölge
6.Bölge
7.Bölge
8.Bölge
9.Bölge
10.Bölge
11.Bölge

< table cellpadding="4" cellspacing="3" border="1" bordercolor="blue" style="width: 587px" >
< tr >
< td width="239px" >
< b >1.Bölge< /b >< /td >
< td width="260px" colspan="2" >
< b >2.Bölge< /b >< /td >
< td width="260px" >
< b >3.Bölge< /b >< /td >

< /tr >
< tr >
< td width="239px" rowspan="2" >
< b >4.Bölge< /b >< /td >
< td width="260px" colspan="2" >
< b >5.Bölge< /b >< /td >
< td width="260px" rowspan="2" >
< b >6.Bölge< /b >< /td >
< /tr >
< tr >
< td width="260px" >
< b >7.Bölge< /b >< /td >
< td width="260px" >
< b >8.Bölge< /b >< /td >
< /tr >
< tr >
< td width="239px" >
< b >9.Bölge< /b >< /td >
< td width="260px" colspan="2" >
< b >10.Bölge< /b >< /td >
< td width="260px" >
< b >11.Bölge< /b >< /td >
< /tr >
< /table >
Burada bulunan bölümleri tek tek inceliyelim. Öncelik’ le en dış kısımda bir tablo oluşturduk. Ve bu tablonun CELLPADDING=”4″ ile hücre içindeki yazı ile çerçevesi arasında 4 pixel, CELLSPACING=”3″ ile hücreler arasında 3’er pixel boşluk, border=”1” ile tablo kenarlığının 1 pixel olacağını, WIDTH=”587″ ile genişliğinin 587 pixel olacağını ve en son olarak da tablo kenarlıklarının rengini bordercolor=”blue” mavi olarak göstermiş olduk.
1.Bölgeyi oluşturabilmek için 1 satır oluşturduk ve içerisine 3 adet sütun yerleştirdik. Şuana kadar herşey normal fakat 2.bölgede 7 ve 8. bölgedeki gibi 2 sütun olması gerekirken colspan=”2” yazdığımızda o iki sütunu tek parça haline dönüştürdük.
Aynı şeyler satırlar içinde geçerlidir.4.bölgede 1 ve 9. bölgedeki gibi 2 satir olması gerekirken rowspan=”2” yazdığımızda o iki satırı tek parça haline dönüştürmüş olduk. Diğer bölgeler ise şekilde yer alan görünümün kod ile gösterilmiş halidir.

Yorum Yapılmamış

Bir cevap yazın