Table etiketi: Bir tablo oluşturmak için gerekli kodların tümü <table> ve </table> etiketleri arasına yazılır. Tablolar satır ve sütunlardan oluşur.
Tr Etiketi: Tablo içerisinde satır oluşturmak için kullanılır. Bir satır <tr> ile başlar </tr> ile sona erer.
Td Etiketi: Tablo içerisinde sütun oluşturmak için kullanılır. Bir sütun <td> ile başlar </td> ile sona erer.
Th Etiketi: Tablo içerisindeki sütunlardan başlık olanları belirtmek için kullanılır.
Konunun anlaşılması için basit bir tablonun üzerinden devam edelim.
Tabloyu oluşturmak için gerekli html kodları aşağıdaki gibidir. Table etiketine parametre olarak border=”1″girildiğine dikkat edin. Border değeri girilmediği takdirde kenarlıklar görünmeyecektir.
Kod:
<html>
<head>
<title>Tablolarla Çalışmak</title>
</head>
<body>
<table border="1">
<tr>
<td>Meyveler</td>
<td>Sebzeler</td>
</tr>
<tr>
<td>Elma</td>
<td>Marul</td>
</tr>
<tr>
<td>Portakal</td>
<td>Soğan</td>
</tr>
</table>
</body>
</html> Kodlara dikkat ettiğinizde, her <tr> satır etiketi içerisinde <td> sütun etiketleri olacak şekilde tablo oluşturulmuştur.
Tablolarda Kullanılan Parametreler
Tabloları özelleştirmek için yukarıdaki etiketlerle birlikte bazı parametreler kullanılmaktadır. Zaten yukarıda border parametresinden bahsetmiştim. Diğer parametreleri de şöyle bir inceleyelim.
border: kenarlık oluşturmak için kullanılır.
bordercolor: kenarlıkların rengini değiştirmek için için kullanılır.
bgcolor: tablonun arkaplan rengini değiştirmek için kullanılır.
width: Tablonun genişliğini ayarlamak için kullanılır.
height: Tablonun yüksekliğini ayarlamak için kullanılır.
Yukarıda saydığım parametreler table etiketinin parametreleridir. Bu parametreleri aşağıdaki gibi kullanabilirsiniz.
<table border=”1″ bordercolor=”red” width=”300px” height=”250px” bgcolor=”pink”>
Satır ve Sütunları Birleştirmek
Bazı durumlarda tablolarda ki satır ve sütunları birleştirmemiz gerekebilir. Bu durumda aşağıdaki parametreler kullanılır.
colspan: Aynı satırdaki hücreleri birleştirmek için kullanılır.
rowspan: Aynı sütundaki hücreleri birleştirmek için kullanılır.
Aşağıdaki tabloyu html kodları ile oluşturmaya çalışalım.
Tablonun html kodları:
Kod:
<html>
<head>
<title>Tablolarla Çalışmak</title>
</head>
<body>
<table border="1" bordercolor="red" width="300px" height="150px" bgcolor="pink">
<tr>
<th colspan="3">Stoklar</th>
</tr>
<tr>
<td>1</td>
<td>Elma</td>
<td rowspan="2">5 kg</td>
</tr>
<tr>
<td>2</td>
<td>Soğan</td>
</tr>
</table>
</body>
</html> Tablo oluşturmak için kullanılan kodlar başlangıçta karışık görünse de mantığını kavradıktan sonra zorlanmadan her tabloyu oluşturabilirsiniz.
İyi forumlar.
