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 sola, sağa yada ortaya hizalayacağı 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;
<table> etiketi ve niteliklerini açıklayarak başlayalı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.
Basit bir örnek
|
1 2 3 4 5 6 7 |
<table> <tr> <td>yazilimbilisim</td> </tr> </table> |
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.
Şimdide 2 satır 3 sütundan oluşan bir tablo yapalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<table border="1"> <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> |
