Embedded Files
Hazırlayan : Emircan Altuntaş
HTML Tablosu Nedir?
Bir web sayfasındaki tablo, günlük yaşamda kullandığımız tabloların özeliklerini taşıyan bir yapıdır.
Bir tablo tablo adı, tablo satırları ve satırlar içindeki hücrelerden oluşur. Ayrıca, istenirse, tablo kenarları (çerçeve) kalınlığı belirlenebilir, hücreler arası açıklık ayarlanabilir. Hücrelere yazılan yazıların hücre içindeki konumları belirlenebilir. Bu konumlar yatay doğrultuda ortada, sağa yanaşık, sola yanaşık yapılabilir. Düşey doğrultuda ise ortada, tabanda ya da tepede olabilir. Hücre zemini ve yazıların renkleri belirlenebilir. Font türü seçilebilir. Hücrelere resim ya da ses konulabilir.
Aşağıda bu işlerin nasıl yapıldığı açıklanacaktır.
HTML ile tablo oluşturmak için öncelikle HTML düzenleyici bir program gereklidir. Aşağıda yer alan güncel ve ücretsiz programlardan herhangi biri veya benzerleri yeterli olucaktır :
Visual Studio Code
Microsoft ailesinin son editörü olan Visual Studio Code, üç platform desteğinin yanı sıra, otomatik kod tamamlama (intellisense) gibi kolaylıklarıda beraberinde getiriyor.
Notepad++
Notepad++. Zengin dil desteği ve pluginler ile basit bir kod düzenleyicisinden çok daha fazlası.
Atom
Atom görsel bir editör olmasa da web sayfanızın canlı bir önizlemesini sunar. Böylece hataları kolayca tespit edebilir ve kodu bu HTML editör özelliğiyle düzeltirsiniz.
HTML ile tablo oluşturmak için bilmeniz gereken etiketler ve örnekleri :
<table>
Tabloya başlarken <table> kodu kullanılarak tablo başlar. Tablo </table> şeklinde kapatılır.
<tr>
Tabloda satıra başlarken <tr> kodu kulanılır ve satır sonunda </tr> şeklinde kapatılır.
***<td> den önce <tr> oluşturulmalıdır***
<table border=”2″>
<tr>
<td>web</td>
</tr>
<tr>
<td>uygulamaları</td>
</tr>
</table>
<td>
Tabloda sütun oluşturulurken <td> kullanılır ve diğer kodlarda olduğu gibi sütun sonunda </td> olarak kapatılır.
<table border=”2″>
<tr>
<td>web</td>
<td>uygulamaları</td>
</tr>
</table>
<table border>
Hücrelerin ve tablonun kenar kalınlığını belirler. Eğer <table border=0> verilirse tablo kenarlığı görünmez.
<table border=0>
<tr>
<td>BİLİŞİM</td>
</tr>
</table>
<table border=”4″>
<tr>
<td>BİLİŞİM</td>
</tr>
</table>
<th>
Tabloda başlık <thead> koduyla yazılır. Ancak sütun başlıkları <th> koduyla yazılır.
<table border=”2″>
<tr>
<th>BİLİŞİM</th>
<th>SİSTEMLERİ</th>
</tr>
<tbody>
<tr>
<td>WEB TASARIMI</td>
<td>WEB TASARIMI</td>
</tr>
<tr>
<td>WEB TASARIMI</td>
<td>WEB TASARIMI</td>
</tr>
</tbody>
</table>
<width>
Tabloda piksel cinsinden genişlik vermeyi sağlar.
<table border=”2″>
<tr><td width=50 >WEB</td></tr>
<tr><td width=50 >TASARIMI</td></tr>
</table>
<table border=”2″>
<tr><td width=150 >WEB</td></tr>
<tr><td width=150 >TASARIMI</td></tr>
</table>
<heigth>
Tabloda piksel cinsinden yükseklik vermeyi sağlar.
<table border=”2″>
<tr><td height=30>WEB</td></tr>
<tr><td height=100>TASARIMI</td></tr>
</table>
<colspan>
Tabloda satırdaki hücreleri birleştirmeyi sağlar. (Yan yana birleştirir.)
<table border=”2″ >
<tr>
<td colspan=”2″>BİLİŞİM</td>
<tr>
<td>WEB</td>
<td>TASARIMI</td></tr>
</table>
<rowspan>
Tabloda sütundaki hücreleri birleştirmeyi sağlar. (Alt alta birleştirir.)
<table border=”2″>
<tr>
<td>BİLİŞİM</td>
<td rowspan=”2″>TEKNOLOJİLERİ</td></tr>
<tr>
<td>WEB</td>
</table>
<cellspacing>
Tabloda hücreler arası boşluğu ayarlar.
<table border=”1″ cellspacing=”2″>
<tr><td>BİLİŞİM</td></tr>
<tr><td>SİSTEMLERİ</td></tr>
</table>
<table border cellpadding="10" cellspacing="10">
<tr>
<td>A</td> <td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td>
<td>F</td>
</tr>
</table>
<cellpadding>
Tablo içindeki bilgi ile tablo sınırları arasındaki boşluğu piksel cinsinden ayarlar.
<table border cellpadding="10" >
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>
<bgcolor>
Bgcolor hücre içini renklendirmeyi sağlar.
<table border=”2″>
<tr>
<td bgcolor=”green”>web</td>
<td bgcolor=”blue”>tasarım</td>
</tr>
</table>
<table border=”2″ bgcolor=”green”>
<tr>
<td>web</td>
<td>tasarım</td>
</tr>
</table>
<solid>
Çerçeve rengini belirlemek için solid etiketini kullanıyoruz.
<table style="border: 10px solid green;">
<tr>
<td>1 Numara</td>
<td>2 Numara</td>
<td>3 Numara</td>
</tr>
<tr>
<td>4 Numara</td>
<td>5 Numara</td>
<td>6 Numara</td>
</tr>
<tr>
<td>7 Numara</td>
<td>8 Numara</td>
<td>9 Numara</td>
</tr>
</table>
ÖRNEK :
Yazdıklarımı daha iyi anlamanız için aşağıdaki örneği yapmanızı öneririm!
<table border = "1">
<tr>
<th>Başlık-1</th>
<th>Başlık-2</th>
<th>Başlık-3</th>
<th>Başlık-4</th>
</tr>
<tr>
<td>Satır-1 Sütun-1</td>
<td>Satır-1 Sütun-2</td>
<td>Satır-1 Sütun-3</td>
<td>Satır-1 Sütun-4</td>
</tr>
<tr>
<td>Satır-2 Sütun-1</td>
<td rowspan="3" colspan="2">
<table border = "1" bgcolor="lightblue">
<tr>
<th>Başlık-1</th>
<th>Başlık-2</th>
</tr>
<tr>
<td>Satır-1 Sütun-1</td>
<td>Satır-1 Sütun-2</td>
</tr>
<tr>
<td>Satır-2 Sütun-1</td>
<td>Satır-2 Sütun-2</td>
</tr>
</table>
</td>
<td>Satır-2 Sütun-4</td>
</tr>
<tr>
<td>Satır-3 Sütun-1</td>
<td>Satır-3 Sütun-4</td>
</tr>
<tr>
<td>Satır-4 Sütun-1</td>
<td>Satır-4 Sütun-4</td>
</tr>
<tr>
<td>Satır-5 Sütun-1</td>
<td>Satır-5 Sütun-2</td>
<td>Satır-5 Sütun-3</td>
<td>Satır-5 Sütun-4</td>
</tr>
</table>
Page updated
Report abuse