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.

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.

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.

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.

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 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

Son Eklenen Yazılar