Tablo Oluşturma
Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli yapıtaşlarındandır.
<TABLE> TAG'I
Tablolar <table> belirteci ile başlar.
<table>
……
</table>
Örnek verecek olursak;
<TABLE> TAG'I
Tablolar <table> belirteci ile başlar.
<table>
……
</table>
- TR
- TD
Örnek verecek olursak;
<table border="1">
<tr> <td>RAM</td> 1.satır </tr> <tr> <td>ROM</td> 2.satır </tr> </table> |
<table border="1">
<tr> <td>RAM</td>---- 1.sütun <td>ROM</td>---- 2.sütun </tr> </table> |
BorderBorder parametresi hücrelerin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır. border=0 çerçevenin görünmemesini sağlar.
Örnek verecek olursak;
Örnek verecek olursak;
<table border=0>
<tr> <td>HTML</td> </tr> </table> |
<table border=2>
<tr> <td>HTML</td> </tr> </table> |
- TH
Tabloda satır ve sütunları belirten <tr> ve <td> etiketleri <tbody>...</tbody> arasına alınır.
Örnek verecek olursak;
<table border="1">
<thead>Ders Dağılımı</thead> <caption align="bottom"> <caption> <tr> <th>Bilgisayar</th> <th>Elektronik</th> <th>Elektrik</th> </tr> <tbody> <tr> <td>Web Tasarımı</td> <td>Uydu Alıcısı</td> <td>Çağırma Tes.</td> </tr> <tr> <td>Programlama</td> <td>İletişim Tek.</td> <td>Dağıtım Panoları</td> </tr> </tbody> </table> |
|
Width
Tablonun pixel cinsinden genişliğini belirler. Bu parametreyi kullanmazsanız, Web tarayıcınız hücre içeriklerini görüntüleyebileceği en makul genişliği tablonuza otomatik olarak atayacaktır.
Height
Tablonun pixel cinsinden yüksekliğini belirler. Bu parametreyi kullanmazsanız, Web tarayıcınız hücre içeriklerini görüntüleyebileceği en makul yüksekliği tablonuza otomatik olarak atayacaktır.
Örnek verecek olursak;
Tablonun pixel cinsinden genişliğini belirler. Bu parametreyi kullanmazsanız, Web tarayıcınız hücre içeriklerini görüntüleyebileceği en makul genişliği tablonuza otomatik olarak atayacaktır.
Height
Tablonun pixel cinsinden yüksekliğini belirler. Bu parametreyi kullanmazsanız, Web tarayıcınız hücre içeriklerini görüntüleyebileceği en makul yüksekliği tablonuza otomatik olarak atayacaktır.
Örnek verecek olursak;
<table border="1">
<tr><td width=100 >Kasa</td></tr> <tr><td width=100 height=50>Fare</td></tr> <tr><td height=40>Klavye</td></tr> <tr><td height=80>Monitör</td></tr> </table> |
|
Colspan
Aynı satırdaki hücreleri birleştirmek için colspan parametresi kullanılır.
Rowspan
Aynı sütundaki hücreleri birleştirmek için de rowspan parametresi kullanılır.
Örnek verecek olursak;
Aynı satırdaki hücreleri birleştirmek için colspan parametresi kullanılır.
Rowspan
Aynı sütundaki hücreleri birleştirmek için de rowspan parametresi kullanılır.
Örnek verecek olursak;
<table border="1" >
<tr> <td>C</td><td>Delphi</td><td>Pascal</td></tr> <tr> <td>XML</td><td>Borland C</td><td>HTML</td> </tr> <tr> <td>PHP</td><td>Basic</td><td>ASP</td></tr> </table> |
|
<table border="1" >
<tr> <td colspan="2">Delphi</td> <td>Pascal</td></tr> <tr> <td>XML</td> <td>Borland C</td> <td rowspan="2">HTML</td></tr> <tr> <td>PHP</td> <td>Basic</td></tr> </table> |
|
Cellspacing
Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını, pixel cinsinden ayarlar.
Örnek verecek olursak;
Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını, pixel cinsinden ayarlar.
Örnek verecek olursak;
<table border="1" cellspacing="9">
<tr><td>Donanım</td></tr> <tr><td>Yazılım</td></tr> </table> |
|
Cellpadding
Cellpadding değişkenine verilebilecek herhangi bir sayı, tablonun sınırları ile tablo içeriği arasındaki mesafeyi ayarlar. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar.
Örnek verecek olursak;
Cellpadding değişkenine verilebilecek herhangi bir sayı, tablonun sınırları ile tablo içeriği arasındaki mesafeyi ayarlar. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar.
Örnek verecek olursak;
<table border="1" cellpadding="12">
<tr><td>HTML</td></tr> </table> |
|
Konu ile ilgili ayrıntılı bilgi edinmek için tıklayınız.
Tablolar ile ilgili video izlemek için tıklayınız.
HTML ile ilgili tüm kodlara erişmek için tıklayınız.
Konuyla ilgili karikatür için tıklayınız.
Tablolar ile ilgili video izlemek için tıklayınız.
HTML ile ilgili tüm kodlara erişmek için tıklayınız.
Konuyla ilgili karikatür için tıklayınız.