Bugün html ile tablo
oluşturmak için gerekli etiketlerden bahsedeceğim. Tablolar web sayfalarında
verilerin düzenli şekilde gösterilmesi için kullanılırlar. Lafı fazla uzatmadan
bir tablo oluşturmak için gerekli olan temel etiketlere göz atalım.
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.
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.
<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ı:
<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. Konuyla ilgili sorularınızı bana
iletebilirsiniz.Kolay gelsin.
Ayyildiz.org.tr'den alıntıdır.
Hiç yorum yok:
Yorum Gönder