Merhaba! Bu dersimizde html tabloların nasıl oluşturulduklarıyla ilgili bazı şeyleri öğreneceksiniz! Üstelik olabilecek en kolay şekilde!
Aslında Tablo kodları kolaydır. Html tablolarının tek bir zor yanı vardır: "anlatmak" :D Evet, html tablolarını anlatmak zordur. Ama anlatabilirseniz, anlamak çocuk oyuncağı olur.
Sonra bunun içine bir resim kümesi koyarsak:
Eğer istesek, bir Div kümesine iki paragraf kümesi ve her birine ikişer yazı kümesi ekleyebiliriz:
Bunları alt alta da yazsanız, yan yana da yazsanız bir şey değişmez.
Tabloları oluştururken de, bu şekilde en az 3 farklı element kullanacağız. Şimdi istersen bir tablonun kümelenişini görelim:
Yukarıdaki gibi görünen bir tabloda, aslında iç içe konulmuş 7 tane element vardır.
1 adet tablo elementi. Bu tablo elementinin içine yerleştirilmiş 2 adet satır elementi ve her bir satır elementinin içine konulmuş iki tane hücre elementi.
Aslında anlaşılması gayet basit. Tablo elementimizin adı table dır.(teybıl diye okunur). satır elementi tr dir ve hücre elementi td dir.
Yukarıda soldaki tablonun kodları şunlardır:
Eğer tablonuzda sadece bir tek satır, ve o satırda da 3 adet hücre olsun isteseydiniz:
Bunu yapardınız. hücrelerin içine ise istediğinizi yazabilirsiniz. <td>merhaba</td> gibi.
HTML kodların önemli bir özelliği, satır atlayarak yazmanızın hiç bir anlamı olmamasıdır. yani yukarıda verdiğimiz kodu şu şekilde yazabiliriz:
Tüm bunların dışında, tabloların bir dezavantajı vardır:
Hücreleri hizalarlar! Yani bir satıra iki, diğer satıra üç hücre koyarsanız şöyle görünür:
Bunu aşmak ve hücrelerin genişliğini istediğimiz gibi ayarlayabilmek için hücre elementinin özelliklerini öğrenmemiz gerekir:
Bu derslik burada kesmek yararlı olacaktır. Bir daha ki derste tabloların tüm özelliklerini ve uygulamalarını öğreneceğiz. O zamana kadar, uygulamalarını göstermediğimiz yukarıdaki td özelliklerini deneyimlemeye çalışın.
İyi çalışmalar!
Aslında Tablo kodları kolaydır. Html tablolarının tek bir zor yanı vardır: "anlatmak" :D Evet, html tablolarını anlatmak zordur. Ama anlatabilirseniz, anlamak çocuk oyuncağı olur.
Hatırlatma: küme mantığı
Daha önce HTML deki her bir elementin aslında bir küme gibi olduğundan bahsetmiştik. İç içe kümeler oluşturabiliyoruz mesela. yani bir yazı kümesi oluşturursak:<a> </a>
Sonra bunun içine bir resim kümesi koyarsak:
<a> <img/> </a>
Eğer istesek, bir Div kümesine iki paragraf kümesi ve her birine ikişer yazı kümesi ekleyebiliriz:
<div>
<p>
<a> </a>
<a> </a>
</p>
<p>
<a> </a>
<a> </a>
</p>
</div>
Bunları alt alta da yazsanız, yan yana da yazsanız bir şey değişmez.
Tabloları oluştururken de, bu şekilde en az 3 farklı element kullanacağız. Şimdi istersen bir tablonun kümelenişini görelim:
Tablo Elementinin Kümelenmesi
Yukarıdaki gibi görünen bir tabloda, aslında iç içe konulmuş 7 tane element vardır.
1 adet tablo elementi. Bu tablo elementinin içine yerleştirilmiş 2 adet satır elementi ve her bir satır elementinin içine konulmuş iki tane hücre elementi.
Aslında anlaşılması gayet basit. Tablo elementimizin adı table dır.(teybıl diye okunur). satır elementi tr dir ve hücre elementi td dir.
Yukarıda soldaki tablonun kodları şunlardır:
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Eğer tablonuzda sadece bir tek satır, ve o satırda da 3 adet hücre olsun isteseydiniz:
<table>
<tr>
<td></td><td></td>
<td></td>
</tr>
</table>
Bunu yapardınız. hücrelerin içine ise istediğinizi yazabilirsiniz. <td>merhaba</td> gibi.
HTML kodların önemli bir özelliği, satır atlayarak yazmanızın hiç bir anlamı olmamasıdır. yani yukarıda verdiğimiz kodu şu şekilde yazabiliriz:
<table> <tr> <td></td> <td></td> <td></td> </tr> </table>
Tüm bunların dışında, tabloların bir dezavantajı vardır:
Hücreleri hizalarlar! Yani bir satıra iki, diğer satıra üç hücre koyarsanız şöyle görünür:
Bunu aşmak ve hücrelerin genişliğini istediğimiz gibi ayarlayabilmek için hücre elementinin özelliklerini öğrenmemiz gerekir:
TD Elementinin Özellikleri
| Özellik | Değer | Ne İşe Yarar? | Örnek Kullanım |
| align | left right center justify |
hücre içindekilerin sağa sola ortaya veya her iki tarafa hizalanmasını sağlar. | <td align="right"> merhaba </td> |
| bgcolor | rgb(x,x,x) #xxxxxx |
hücrenin arkaplan rengini rgb veya hex renk kodlarıyla belirler. | <td bgcolor="#000000"> merhaba </td> |
| colspan | sayı | hücrenin yatay olarak kaç hücrelik yer kaplayacağını belirler. | <td colspan="2"> merhaba </td> |
| rowspan | sayı | hücrenin dikey olarak kaç hücrelik yer kaplayacağını belirler. | <td rowspan="8"> merhaba </td> |
| height | piksel | piksel cinsinden hücrenin yüksekliğini belirtir. | <td height="40px"> merhaba </td> |
| width | piksel | piksel cinsinden hücrenin genişliğini belirtir. | <td width="120"> merhaba </td> |
| valign | top middle bottom |
hücre içindekilerin hücrenin alt veya üst kenarına dayanmasını veya dikey olarak tam ortalanmasını sağlar. | <td valign="top"> merhaba </td> |
Bu derslik burada kesmek yararlı olacaktır. Bir daha ki derste tabloların tüm özelliklerini ve uygulamalarını öğreneceğiz. O zamana kadar, uygulamalarını göstermediğimiz yukarıdaki td özelliklerini deneyimlemeye çalışın.
İyi çalışmalar!