HTML Table Etiketi -Tablo Oluşturmak-

Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istenilen yerde durmasını sağlamak amacıyla kullanabilen HTML’nin en önemli konularındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanmak ve böylece istenilen düzenlemeyi yapmak HTML table etiketi ile mümkündür. Tablo oluşturma etiketi<table> dir. Tabloda satır oluşturmak için <tr>, sütun oluşturmak için <td> etiketlerinden yararlanılır. Ayrıca tabloya başlık vermek için <thead>, tablonun gövdesini <tbody> ve tablo hakkında bilgi vermek için ise <caption> etiketlerinden yararlanılır. <th> etiketi ise tablodaki sütunlara başlık vermede kullanılır. Web sayfalarında etkili tablo oluşturabilmek için table etiketinin parametrelerini etkili kullanmak gerekir.

HTML TABLE Etiketi

Tablolar <table> etiketi ile başlar, </table> etiketi ile biter.

<table>

……

</table>

Tablolardan, sayfa düzenini ayarlamak için yararlanılır.

HTML TR Etiketi

Tabloda satır oluşturmayı sağlar.

HTML TD Etiketi

Tabloda sütun oluşturmayı sağlar.

Bir tablo oluşturmak için etiketlerin kullanım sırası –> table – tr – td şeklindedir. Önce table etiketi açılır. Sonra satır etiketi açılır ve satır etiketi içinde tabloda yer almasını istediğimiz sütun kadar td etiketi açılır. Şimdi bir örnek ile görelim.

<table>
<tr>
	<td> Sütun 1 </td>
	<td> Sütun 2 </td>
</tr>
</table>

Yukarıdaki örmekte 1 satır 2 sütunluk bir tablo örneği yapılmıştır.

HTML TH Etiketi

Tablolar başlık (head) ve gövde (body) bölümlerine ayrılırlar. Tablonun başlığını <thead>, gövdesini ise <tbody> etiketi ile belirleriz. <caption> etiketi ise tablo hakkında açıklama vermek için kullanılır.

Her tablonun sütunlarına başlık vermek istenince, her bir sütun için başlık <th> etiketi ile belirtilir ve bunlar <tr>…</tr> arasına yazılır. Şimdi bunu bir örnek ile görelim.

<table>
<thead> Başlık </thead>
<tr>
	<th> Ad </th>
	<th> Soyad</th>
<caption align=”bottom”> alt yazı </caption>
<tbody>
<tr>
	<td> Ali </td>
	<td> Taş </td>
</tr>
<tr>
	<td> Veli </td>
	<td> Toprak </td>
</tr>
</tbody>
</table>

TABLE Etiketinin Parametreleri

Table etiketinin parametreleri aşağıda yer almaktadır.

<table border=”…” cellpadding=”…” cellspacing=”…” align=”…” width=”…”

height=”…”>

bBorder Çerçeve kalınlığını belirler. border=”1px”
cellpadding Hücre içi boşluk miktarını belirler. cellpadding=”5px”
cellspacing Hücreler arası boşluk miktarını belirler. cellspacing=”5px”
align Tablonun hizalamasını belirler. align=”center”
width Tablo genişliğini belirler. width=”500px”
height Tablo yüksekliğini belirler. height=”500px”

TD Etiketinin Parametreleri

TD etiketinin parametreleri bgcolor, background, width, height, align ve valign’dir.

<td bgcolor=“…” background=“…” width=”..” height=”…” align=”…”

valign=”…”>

bgcolor Hücrenin rengini belirler. bgcolor=”red”
background Hücrenin arkaplan resmini belirler. backgorund=”resim.png”
width Hücrenin genişliğini belirler. width=”500px”
height Hücrenin yüksekliğini belirler. height=”500px”
align Hücre içi yatay hizalamayı belirler. align=”center”
valign Hücre içi dikey hizalamayı belirler. valign=”center”

COLSPAN Etiketi

Aynı satırdaki hücreleri birleştirmek için colspan etiketi kullanılır.Bu parametre td etiketinde kullanılır. Birleştirilen satırdaki hücreye ait <td>..</td> etiketi silinir. Birleştirilecek satırdaki tüm hücrelerin aynı genişlikte olması gerekir. Bir örnek ile gösterelim.

<table> 
<tr>
	<td> A </td>
	<td> B </td>
	<td> C </td>
</tr>
<tr>
	<td colspan=2> D <td>
	<td> E </td>
</tr>
</table>

Yukarıdaki örnekte ilk satırda 3 sütun varken ikinci satırda bir ve ikinci sütunlar birleştirildi ve toplamda iki sütun yer almış oldu. Ekran çıktısı aşağıdaki gibi olacaktır.

HTML table etiketi

ROWSPAN Etiketi

Aynı sütundaki hücreleri birleştirmek için de rowspan etiketi kullanılır. Bu parametre td etiketi ile birlikte kullanılır. Birleştirilen sütundaki hücreye ait <td>..</td> etiketini silinir. Bir örnek ile gösterelim.

<table> 
<tr>
	<td rowspan=2> A </td>
	<td> B </td>
	<td> C </td>
</tr>
<tr>
	<td> D <td>
	<td> E </td>
</tr>
</table>

Yukarıdaki örnekte ilk satırda 3 sütun varken ikinci satırda bir ve ikinci sütunlar birleştirildi ve toplamda iki sütun yer almış oldu. Ekran çıktısı aşağıdaki gibi olacaktır.

HTML table etiketi

HTML table etiketi konusunu bu yazımızda gördük. Konu ile ilgili soru, görüş ya da fikirlerinizi aşağıda bulunan yorumlar kısmı ile bizlere ulaştırabilirsiniz. Aşağıdaki linke tıklayarak HTML ile ilgili diğer yazılarımıza da ulaşabilirsiniz. Ayrıca Instagram ve Twitter linklerine de tıklayarak bizi Instagram ve Twitter üzerinden takip ederek destek olabilirsiniz.

https://yazilimdelisi.com/category/web-gelistirme/html/

Sosyal Medya Hesaplarımız

instagram logo
twitter logo

Son Eklenen Yazılar

Bir Cevap Yazın

%d blogcu bunu beğendi: