HTML: Tablolarla Çalışma

3
13326

Konu

#1
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.
Konunun anlaşılması için basit bir tablonun üzerinden devam edelim.

zMZ8kY

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.

LDMkzj

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.
Son Düzenleme: 20-01-2020, 13:57, Düzenleyen: PawNod'.
Cevapla
#2
Başarılar
Cevapla
#3
Teşekkürler
Cevapla
#4
Teşekkürler.
Cevapla

Bir hesap oluşturun veya yorum yapmak için giriş yapın

Yorum yapmak için üye olmanız gerekiyor

ya da

Benzer Konular

46
Yorum
9.600
Okunma
22-11-2021, 05:23
9
Yorum
9.131
Okunma
25-10-2021, 01:24
16
Yorum
9.001
Okunma
25-10-2021, 01:17
13
Yorum
8.669
Okunma
25-10-2021, 01:00
26
Yorum
10.239
Okunma
23-07-2021, 11:25
27
Yorum
13.793
Okunma
25-06-2021, 01:45
Task
Kayıt Ol