Tablolar
HTML sayfalarında veriyi çizelge halinde sunmak için
tablolar düĢünülmüĢtü. Ancak tasarımcılar birden bire
bunu sayfanın iskeletini kumak içinde kullanmaya
baĢladılar. Böylece tablolar sayfalar için içerikten sonra
temel öge haline geldiler. Ancak günümüzde sürekli
yaygınlaĢan CSS kullanımı, table ve frame (çerçeve)
gerektiren durumları çok daha pratik çözmeye imkan
verdiğinden eski önemleri azalmaktadır. Buna rağmen
Table veri çizelgeleri için sürekli kullanım alanı
bulacaktır. Div etiketleri ile table etiketi kullanmadan
tablo oluĢturabilemektedir ancak bu henüz
yaygınlaĢmamıĢtır.
Bir tabloyu bir Excel sayfasına benzetebilrsiniz. En genel
hali ile ise mutfak dolabına benzetebilrsiniz. Çatal, kaĢık,
baharat, tabak, tava her Ģey kendine ait çekmecelerde
durmaktadır.
BaĢlık, Satır ve Veri Etiketleri
HTML‘de bir tablonun baĢlangıcı ve bitiĢi
<TABLE>..</TABLE> etiketiyle iĢaretlenir. Tablonun
sütun baĢlıkları <TH>..</TH>; gövdesi
<TBODY>..</TBODY> etiketiyle belirtilir. Sütun
baĢlıkları veya gövde etiketinin hemen altında tarayıcıya
bir tablo satırı baĢladığını söylemeniz gerekir. Bunu
<TR>..</TR> etiketiyle yaparız. Bu iki etiketin arasında
Tablonun değerleri, yani içinde bilgiler bulunan hücreleri
oluĢturan etiket, <TD>..</TD> yer alır. Bu iki etiketin
arasında tablonuzun ilgili hücresinde yer alacak bilgi
bulunur.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
76
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1254">
</HEAD>
<TITLE>Tablonun Esaslari</TITLE>
<BODY>
<p><font face="Arial">
<h1><center>HTML'de Tablo</center></h1>
<table align=center border=3 width=70%>
<thead align=center>Bu tablomuzun BaĢlığı
(thead)</thead>
<thead><tr><th>Birinci sütun baĢlığı
(th)</th><th>Ġkinci sütun baĢlığı(th)</th><th>Üçüncü
sütun baĢlığı(th)</th><th>Dördüncü sütun
baĢlığı(th)</th><th>
<tbody>
<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>Satır 2 Sütun
2</td><td>Satır 2 Sütun 3</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
2</td><td>Satır 3 Sütun 3</td><td>Satır 3 Sütun
4</td></tr>
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
77
<tr><td>Satır 4 Sütun 1</td><td>Satır 4 Sütun
2</td><td>Satır 4 Sütun 3</td><td>Satır 4 Sütun
4</td></tr>
</tbody>
</table>
</body>
</html>
Kullanılan parametreler
<td> için :
Bgcolor :Hücrenin Zemin rengini ayarlar
Background:Hücre arkaplanına bir resim yerleĢtirmekte
kullanılır
Width :Hücre geniĢliği
Height :Hücre yükselekliği
Align :Metin yaslama yönü. Left, Right ve Center
olabilir.
Her zamanki gibi yine tekrarlayalım tabloları
biçimlendirmek için artık en genel olan CSS
kullanılmalıdır. Buradaki biçimlendirme etiketlerini
sadece bilgi olarak bilmeniz yeterlidir. Bu nedenle
aĢağıdaki etiketleri tasaramlarınızda kullanmanız
önerilmez.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
78
Sütun ve Satır BirleĢtirme – Colspan- Rowspan
Bir tablonun baĢlığında ve gövdesinde yer alan hücreler
yatak ve dikey olarak komĢuları ile birleĢtirilebilirler.
Bunun için COLSPAN ve ROWSPAN etiketlerini kullanırız.
Zemin - Bgcolor
Bir tablonun, her bir satırın, her bir sütunun ve her bir
hücrenin ortak veya ayrı zemini olabilir. Bu zemin düz
renk olabileceği gibi bir resimde olabilir. Bu imkandan,
uzun ve çoğu zaman gözle takibi zor rakamlar içeren
tablolar oluĢturduğunuz zaman, satırlara biri açık, diğeri
renkli zemin vererek, izleme kolaylığı sağlamak için
yararlanabilirsiniz.
Tablonun geniĢliği- Width
Bir tablo, tarayıcı penceresindeki alan kullanımı tamamen
tasarlayan kiĢiye bağlıdır. Tablo sayfanın tümüne, belli
bir yüzdesine veya belli bir ölçüsüne yerleĢtirilebilir.
Tabloyu oluĢtururken TABLE etiketine ölçü birimi ve
miktarını eklemeniz gerekir. Örneğin, <TABLE
WIDTH=50%> ile tablonun ekranın yarısını kullanacağını
belirtmiĢ oluruz. Yüzde yerine pixel olarak mutlak ölçü de
verilebilir.
Altın kuralı hatırlayalım. Herkesin ekran geniĢliği
farklıdır. Örneği tablonuza 600 pixel geniĢlik verip sola
hizaladınız. 800x600 pixel geniĢlikteki bir ekranda tablo
güzel durabilir. Peki 19 inç ekranında 2048 geniĢlikte
çalıĢan kiĢi ne görecektir ? Solda duran ekrana göre çok
küçük bir tablo. Tablonun ortaya hizalı olması bu sorunu
bir nebze çözer ama ama width ölçüsünün yüzde olarak
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
79
verilmesi bu sorunun temel çözümüdür. Böylece ekran
büyüdükçe tablo büyür, küçüldükçede küçülür.
Tablonun Çerçevesi - Border
Bir tablonun bütün sütun ve satırları içine alan en dıĢ
çerçevesinin kalınlığını belirlemek için BORDER=xx (xx,
pixel cinsinden çerçeve kalınlığı) kullanılır. ―FRAME=x‖ ile
tablonun dıĢ ve hücreler arası çerçeve çizgilerini kontrol
edebilir ―x‖ yerine VOID yazarak tüm dıĢ çerçeveyi
kaldırabilirsiniz; ABOVE sadece tablonun üst tarafına;
BELOW sadece alt tarafına; HSIDES sadece alt ve üst
taraflara; LHS sadece sol tarafa, RHS sadece sağ tarafa,
VSIDES sadece sağ ve sol taraflara çerçeve konulmasını
sağlar.
<TABLE BORDER="1" WIDTH="100"
BGCOLOR="#C0C0C0">
<TR>
<TD WIDTH="50"> </TD> <TD WIDTH= "50">
</TD>
</TR>
</TABLE>
Not: Yukarda bazı hücrelere neden
yazıldığın gelince bunun sebebi tarayıcıların boş
olan hücreleri göstermemesi ve sayfa dizaynının
ekranda tuhaf durmasıdır.
Hücre içindeki boĢluk miktarı CELLPADDING
Cellpadding değeri bir hücredeki metnin hücrenin
kenarlık çizgisine olan uzaklığını gösterir.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
80
Hücreler arası boĢluk miktarı CELLSPACING
Cellsacing değeri ise hücreler arasında bırakılacak boĢluk
miktarını gösterir.
<TABLE BORDER=X CELLPADDING=X CELLSPACING=X
WIDTH=[%veya X] HEIGHT=[% veya X] BGCOLOR=X
BACKGROUND="X"
Hiç yorum yok:
Yorum Gönder