Tablolar
- Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli yapı taşlarındandır.
- Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece şu ana kadar öğrendiklerinizle yapamayacağınız gerçek düzenlemeyi yapabilirsiniz.
- Elbette HTML tasarım konusunda bir masaüstü yayıncılık programının gösterdiği hassasiyeti göstermez, bir de browserların tablo etiketlerini yorumlamada gösterdiği farklılıklar da buna eklenirse, genel ziyaretçi kesimine hitab etmenin ne kadar zor olduğu anlaşılır. Fakat burada konumuz bunu tartışmak değil tablolar konusunu işlemek.
<TABLE> ; Tablolar <table> belirteci ile başlar.
<TR> ; Tabloda satır oluşturmayı sağlar. <tr>…</tr>
<TD> ; Tabloda sütun oluşturmayı sağlar.<td> …</td>
<TH> ; Sütun başlıklarına oluşturmak için, her bir başlık <th> etiketi ile belirtilir ve <td> etiketinde olduğu gibi <tr>...</tr> arasına yazılır.
Tablonun çerçevesini görmek istiyorsak border=”1” parametresi ile kullanmalıyız.
Aşağıdaki örnekleri inceleyelim.
Aşağıdaki örneği inceleyelim.
<html> <head> <title> Tablo örnekleri </title> </head> <body> <table border="1"> <tr> <td>Numara</td> <td>İsimler</td> <td>Soyisimler</td> </tr> <tr> <td>618</td> <td>Samet</td> <td>OLGUN</td> </tr> <tr> <td>509</td> <td>Ebru</td> <td>KARANFİL</td> </tr> <tr> <td>727</td> <td>Ahmet</td> <td>DURSUN</td> </tr> </table> </body> </html>
Görüldüğü gibi <table> etiketinin içinde her satır için <tr>, <tr> etiketlerinin içinde de her sütun için <td> etiketi açıyoruz. Bilindiği gibi yatay olanlar satır, dikey olanlar sütun, bunların kesiştiği yerde ise hücre oluşur. Şimdi bu etiketlerin parametrelerine bakalım.
|
<table> |
|
|
Parametre |
Açıklama |
|
border |
Tablonun kenarlık kalınlığını belirtir. border="0" kenarlığın gizlenmesini sağlar. |
|
cellpadding |
Hücre içindeki yazı, resim ya da nesnenin kenarlık ile arasındaki boşluktur. |
|
cellspacing |
Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığıdır. |
|
align |
Tabloyu yatay olarak sola, ortaya yada sağa hizalamada kullanılır. align="left", align="center", align="right" |
|
width ve height |
Tablonun genişlik ve yüksekliğini belirtir. Piksel yada % olarak bir değer verilir. |
|
bgcolor |
Tablodaki hücrelerin arka planını renklendirmede kullanılır. |
|
background |
Tablodaki hücrelere arka plan resmi vermek için kullanılır. |
|
<tr> |
|
|
Parametre |
Açıklama |
|
bgcolor |
Satırdaki hücreleri renklendirmede kullanılır. |
|
height |
Satırdaki hücrenin yüksekliğini belirtir. |
|
align |
Satırdaki hücreler içinde yatay hizalama yapar. left, center, right |
|
valign |
Satırdaki hücreler içinde düşey hizalama yapar. top(üst), middle(orta), bottom(alt) |
|
<td> |
|
|
Parametre |
Açıklama |
|
bgcolor |
Hücreyi renklendirmede kullanılır. |
|
background |
Hücreye arka plan rengi vermek için kullanılır. |
|
width ve height |
Hücrenin genişlik ve yüksekliğini belirtir. En büyük width değeri tüm sütun için geçerli olacaktır. Aynı şekilde en büyük height değeri tüm satır için geçerli olacaktır. |
|
align |
Hücre içinde yatay hizalama yapar. left, center, right |
|
valign |
Hücre içinde düşey hizalama yapar. top(üst), middle(orta), bottom(alt) |
Aşağıdaki örneğimizde sütünların genişliği ayarlandı. Örneği inceleyelim.
<html> <head> <title> Tablo örnekleri </title> </head> <body> <table border="1"> <tr> <td width="50">Numara</td> <td width="100">İsimler</td> <td width="100">Soyisimler</td> </tr> <tr> <td>618</td> <td>Samet</td> <td>OLGUN</td> </tr> <tr> <td>509</td> <td>Ebru</td> <td>KARANFİL</td> </tr> <tr> <td>727</td> <td>Ahmet</td> <td>DURSUN</td> </tr> </table> </body> </html>
Aşağıdaki örneğimizde satırların yüksekliğini ayarladık.
<html> <head> <title> Tablo örnekleri </title> </head> <body> <table border="1"> <tr> <td width=50>Numara</td> <td width=100>İsimler</td> <td width=100>Soyisimler</td> </tr> <tr> <td height=40>618</td> <td>Samet</td> <td>OLGUN</td> </tr> <tr> <td height=40>509</td> <td >Ebru</td> <td>KARANFİL</td> </tr> <tr> <td height=40>727</td> <td>Ahmet</td> <td>DURSUN</td> </tr> </table> </body> </html>
Şimdide renklendirme işlemleri yapalım. Tablolarda satırları (TR) ve hücreleri ayrı ayrı renklendirebiliriz. Aşağıdaki Örneği inceleyelim.
<html> <head> <title> Tablo örnekleri </title> </head> <body> <table border="1" > <tr bgcolor="#e8980c"> <td width=50>Numara</td> <td width=100>İsimler</td> <td width=100>Soyisimler</td> </tr> <tr bgcolor="#cdffa3"> <td height=40>618</td> <td>Samet</td> <td>OLGUN</td> </tr> <tr bgcolor="#cdffa3"> <td height=40>509</td> <td >Ebru</td> <td bgcolor="#FF485B">KARANFİL</td> </tr bgcolor="#cdffa3"> <tr bgcolor="#cdffa3"> <td height=40>727</td> <td>Ahmet</td> <td>DURSUN</td> </tr> </table> </body> </html>
Örnek: Aşağıdaki uygulamayı sizler yapınız. (Sütünların genişliği: 50, Sütünların genişliği: 50, Yazılar ortalı)
Örnek: Aşağıdaki uygulamayı sizler yapınız.
- İlk satır arkaplan siyah(, yazılar beyaz(#ffffff), ortalı ve kalın şeklinde olacak.
- Diğerleri araplan #ff9900, yazılar kırmızı olacak.
- Tablo çerçeve kalınlığı 2 olacak.
- Genişlik tümü 100px,yükseklik tümü 40px olacak.
Hücreleri Birleştirme
<td colspan=".." rowspan="..">
- Aynı satırdaki hücreleri birleştirmek için colspan,
- aynı sütundaki hücreleri birleştirmek için de rowspan parametresini kullanıyoruz. Birleştirilen hücreye ait <td>..</td> etiketini siliyoruz.
Aşağıdaki örneğimizi inceleyelim.
<html> <head> <title> Tablo Biçimlendirme</title> </head> <body > <table border=1> <tr> <td colspan=2>Delphi</td> <td> Pascal </td> </tr> <tr> <td>XML</td> <td>Borland C</td> <td rowspan=2>HTML</td> </tr> <tr> <td>PHP</td> <td>Basic</td> </table> </body> </html>
Örnek: Aşağıdaki uygulamayı sizler yapınız.( Sütun genilşikleri:100)
Aşağıdaki Örnekleri inceleyiniz
|
<table border="0"> |
||
|
<table border="2"> |
||
|
<table border="1" cellpadding="0"> |
||
|
<table border="1" cellpadding="5"> |
||
|
<table border="1" cellspacing="1"> |
||
|
<table border="1" cellspacing="5"> |
||
|
<table border="1" cellspacing="10"> |
||
|
<table border="1" align="left"> |
||
|
<table border="1" align="center"> |
||
|
<table border="1" align="right">
|
||
|
|||
|
<table border="1" width="150" height="200"> |
|||
Aşağıdaki uygulamayı yapınız.
Yorum ekle