Genel kullanım:
<table [seçenekler]>
<tr [seçenekler] ><td [seçenekler] > sütun 1 yazıları </td><td [seçenekler] >sütun 2</td><td> sütun 3.....</td> </tr>
<tr><td>2.satirin 1. sütunu</td><td>2. sütunu</td><td>3. sütunu </td></tr></table>
Tablolar satırlar ve sütunlar şeklinde ayrilmış hücrelerden oluşuyor. Her yeni satıra başlamak için <tr> etiketini, her yeni sütun için ise <td> etiketini kullanıyoruz.
Bir örnek web tasarımı ile incelersek:
<table border=1 width=200 cellspacing=2 cellpadding=2> <tr>
<td align=top width="50%">Bellek tipleri</td> <td align=top width="50%">FPM<br>EDO<br>SDRAM<br>DDR RAM<br>RAMBus</td> </tr>
<tr>
<td align=top width="50%">Disk tipleri</td> <td align=top width="50%">MFM/RLL<br>ATA IDE<br>ULTRA ATA<br>SCSI</td> </tr>
<tr>
<td align=top width="50%">İşlemci tipleri</td> <td align=top width="50%">RISC<br>CISC<br></td> </tr></table>
Burada 2x3'lük bir tablo oluşturduk. Tablomuz 1 pixel kalınlığında çerçeveye sahip (border=1), tablo sayfada 200 pixel genişliğinde yer tutacak (width=200), hücreler arası 2 pixel boş ve 2 pixellik bir kalınlık efektimiz var (cellspacing ile cellpadding).
Örnekte hücre genişliklerin yazı uzunluğuna göre otomatik ayarlanmamsı için genişlikleri kendimiz belirledik (width="50%"). Bunu pixel olarak da belirlememiz mümkündü: <td width="100"> ile.
Hücreler içindeki yazıların nasıl yerleştirileceğini ise align="yer" ile belirtiyoruz. Burada "yer" yerine "top", "bottom", "left", "right" ve "center" kullanabiliriz.
Ve eğer, bir hücrenin iki hücre genişliğinde veya yüksekliğinde olmasını istiyorsak colspan ve rowspan seçeneklerini de kullanıyoruz. Önceki örneğe bir başlık ekleyecek olursak:
<tr><td align=center colspan="2">Bilgisayar Ana Bileşenleri</td></tr>
Tabloları içiçe de kullanmamız mümkün. Bu şekilde bir kullanımla bir www sayfasındaki resim ve yazıları tam istediğimiz gibi konumlandırmamız mümkün olur.
1.9 Basit bir HTML sayfası için gereken son noktalar
Daha önce kısaca değinildiği gibi, ilk yüklenecek sayfanın adı standart olarak 'index.html' olarak belirlenmiştir. Dolayısıyla ilk sayfanızı bu şekilde adlandırırsanız;
http://www.physics.metu.edu.tr/~filker/ilksayfa.html
yerine
http://www.physics.metu.edu.tr/~filker/ gibi, daha kısa olan, bir adres kullanabilirsiniz.
<table [seçenekler]>
<tr [seçenekler] ><td [seçenekler] > sütun 1 yazıları </td><td [seçenekler] >sütun 2</td><td> sütun 3.....</td> </tr>
<tr><td>2.satirin 1. sütunu</td><td>2. sütunu</td><td>3. sütunu </td></tr></table>
Tablolar satırlar ve sütunlar şeklinde ayrilmış hücrelerden oluşuyor. Her yeni satıra başlamak için <tr> etiketini, her yeni sütun için ise <td> etiketini kullanıyoruz.
Bir örnek web tasarımı ile incelersek:
<table border=1 width=200 cellspacing=2 cellpadding=2> <tr>
<td align=top width="50%">Bellek tipleri</td> <td align=top width="50%">FPM<br>EDO<br>SDRAM<br>DDR RAM<br>RAMBus</td> </tr>
<tr>
<td align=top width="50%">Disk tipleri</td> <td align=top width="50%">MFM/RLL<br>ATA IDE<br>ULTRA ATA<br>SCSI</td> </tr>
<tr>
<td align=top width="50%">İşlemci tipleri</td> <td align=top width="50%">RISC<br>CISC<br></td> </tr></table>
Burada 2x3'lük bir tablo oluşturduk. Tablomuz 1 pixel kalınlığında çerçeveye sahip (border=1), tablo sayfada 200 pixel genişliğinde yer tutacak (width=200), hücreler arası 2 pixel boş ve 2 pixellik bir kalınlık efektimiz var (cellspacing ile cellpadding).
Örnekte hücre genişliklerin yazı uzunluğuna göre otomatik ayarlanmamsı için genişlikleri kendimiz belirledik (width="50%"). Bunu pixel olarak da belirlememiz mümkündü: <td width="100"> ile.
Hücreler içindeki yazıların nasıl yerleştirileceğini ise align="yer" ile belirtiyoruz. Burada "yer" yerine "top", "bottom", "left", "right" ve "center" kullanabiliriz.
Ve eğer, bir hücrenin iki hücre genişliğinde veya yüksekliğinde olmasını istiyorsak colspan ve rowspan seçeneklerini de kullanıyoruz. Önceki örneğe bir başlık ekleyecek olursak:
<tr><td align=center colspan="2">Bilgisayar Ana Bileşenleri</td></tr>
Tabloları içiçe de kullanmamız mümkün. Bu şekilde bir kullanımla bir www sayfasındaki resim ve yazıları tam istediğimiz gibi konumlandırmamız mümkün olur.
1.9 Basit bir HTML sayfası için gereken son noktalar
Daha önce kısaca değinildiği gibi, ilk yüklenecek sayfanın adı standart olarak 'index.html' olarak belirlenmiştir. Dolayısıyla ilk sayfanızı bu şekilde adlandırırsanız;
http://www.physics.metu.edu.tr/~filker/ilksayfa.html
yerine
http://www.physics.metu.edu.tr/~filker/ gibi, daha kısa olan, bir adres kullanabilirsiniz.