html tablo olusturma
HTML VE TABLO
(HyperText Markup Language) , web tarayıcılarının (IE, Netscape vd.) okuyabileceği, internet dökümanları oluşturmaya yarayan bir çeşit dildir (dil olduğu tartışılır) . HTML dili ile oluştururlan web dökümleri her ortamda bir web tarayıcısı ile görüntülenebilir bunun için net'e bağlanmaya gerek yoktur.
Evet şimdi HTML dilini genel komutlarını anlatalım
Bir web sayfasının kodu <HTML> ile başlar </HTML> ile biter
Bir Web sayfasında komutlar < > imleri arasına yazılır
Bir Web sayfasının ana çatısı aşağıdaki şekildedir.
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Yukarda gördüğünüz gibi her açılan komut </> imi ile kapatılmaktadır.
Bir web sayfasının ana çatısında 2 alt bölüm vardır
<HEAD> </HEAD> ile tanımlanan alanda sayfanın başlığı (örnek <title> SORUCEVAP</title>), yapımcısı, arama motorlarının kullanacağı bilgiler yani META tagı, Java Scriptler, stlyshetler gibi parametreler tanımlanır. Bu bölüm sayfanın genel görünüşüne direkt olarak etki etmez gibi düşünülsede kullanılan stlyshet ve JavaScript gibi yazılımlar etkileyebilir. Bu bölüm BAŞ diye adlandırılır.
<body> ve </body> ile tanımlanan alanda sayfanın içeriği ve görünüşü ile ilgili olarak tüm tanımlamalar bu alanda yapılır. örneğin tabloyu , linkleri , image dosyalarını bu alanda tanımlarsınız. Bu bölüm GÖVDE diye adlandırılır.
Bir web sayfasının tanımlanan değişkenler " " imleri arasında tanımlanır. Örneğin: <body bgcolor="#00FF00" text="FF0000">
Bir web sayfasında tablo <table> </table> komutları arasında tanımlanır.
Bir web sayfasında satır atlatma komutu <br> dir. Bu komut </br> ile kapatılmaz
Bir web sayfasında kullanılacak renk kodları hexidecimal (16'lı sayı sistemi) ile tanımlanır ve baş tarafında mutlaka diyez (#) imi bulunmalıdır. Örnek: "#000000" , "#FF10F5 gibi
Bir web sayfasında bir image (gif, jgp vs) dosyası <img src="....."> komutu ile tanımlanır, "...." ile başlayan kısma image dosyasının ismi yazılır. Örnek <img src="../IMAJ/Lost.gif"> (Kodlarda IMAJ adlı bir parametre görmektesiniz. Bunun anlamı; Harman adlı gif dosyasının IMAJ adlı DİZİN de olduğudur. Yani basit tanımlama ile burada bir path tanımlaması yapılmıştır)
<b> yazılan yazının bold yani koyu olmasını sağları örnek <b> bu yazı koyudur<b>
<a herf="......"> </a> Bir başka sayfaya yada link vermek için kullanılan komuttur. Örneğin
<a herf="deneme.html">ANASAYFA</a>
<p> Sayfanızda yazı yazarken pargraf tanımlamanızı sağlar
<center> sayfanız içerisinde bulunan nesne yada textlerin ortalanmasını sağlar
Tablolar
HTML elemanları:
<TABLE> ... </TABLE> - Tablo başı ve sonu
<TR ...> ... </TR > - Tablo içindeki satırlar
<TD ...> ... </TD> - Hücreler
<TH ...> ... </TH> - Tablo başlığı hücresi
<CAPTION ...> ... </CAPTION > - Tablo tanıtıcı yazısı
<THEAD> ... </THEAD> - Tablonun başlığı
<TBODY> ... </TBODY> - Tablonun gövdesi
<TFOOT> ... </TFOOT> - Tablo altbaşlığı
<COLGROUP> ... </COLGROUP> - Kolon gruplarının hizalaması
<COL> ... </COL> - Tek bir kolonun hizalaması
<TABLE BACKGROUND="..."> - Tablonun arkaplan resmi
<TH BACKGROUND="..."> - Tablo başlığı için arkaplan resmi
<TD BACKGROUND="..."> - Hücre için arkaplan resmi
<TABLE FRAME="..."> - Tablo çerçevesinin görünüşü
<TABLE RULES="..."> - Tablo çizgilerinin görünüşü
İçinde hiçbir veri bulunmayan hücrelerin sınırları ekranda görüntülenmez. Bu durumlarda sınırların görünmesi için, hücre içine boş bir satır ya da non-breaking space yerlerştirilir. (<TD> </TD> ya da <TD> <BR> </TD>)
<TABLE> ... </TABLE>
Tablonun başını ve sonunu belirler. Tablonun oluşması için gereklidir, çünkü diğer tablo elemanları bu elemanın içinde olmadan işlem görmezler. Default olarak tabloların sınırları yoktur. Sınırlar BORDER parametresi ile verilir. Parametreleri;
BORDER
Kullanıldığında, atanan değer tablonun bütün sınırları için geçerli olur. Kullanılmadığında ise tablonu biçbir sınırı olmaz. Fakat kolonlar arasında sınırlar için belli bir alan bırakılır. Bunun anlamı sınırlı genişlikleri ya da sınırsız genişlikleri aynıdır.
BORDER=değer
CELLSPACING ve CELLPADDING
CELLSPACING tTablo içindeki hücrelerin arasındaki boşluğu belirler.
Hücrenin sınırı ile metin arasındaki uzaklığı verir.
<TABLE BORDER=0 CELL SPACING=0 CELL PADDING=0>
Olabilecek en sıkışık tablo biçimidir.
WIDTH ve HEIGHT
Widt: Tablonun istenen genişliğini belirtir. Belge genişliğinin yüzdesi ya da tam pixel olarak verilebilir. <TH> ve <TD> elemanları içinde de kullanılır.
Tablonun istenen yüksekliğini belirtir. Belge genişliğinin yüzdesi ya da tam pixel olarak verilebilir. <TH> ve <TD> elemanları içinde de kullanılır.
ALIGN ve VALIGN (Internet Explorer)
Align:Tabloyu sağa ya da sola hizalamak için kullanılır. Bu parametrenin kullanılması, metnin tablonun etrafına sarılmasını da sağlar.
Valign:Tablo içindeki yazıların dikey hizasını belirler. top yada bottom değerlerini alabilir.
BGCOLOR (Internet Explorer)
Belirli renk adları ya da rrggbb tripleti ile tablonun arkaplan rengini belirler.
BORDERCOLOR (Internet Explorer)
Tablonun sınır rengini belirli renk adları ya da rrggbb tripleti ile belirler. Ancak bu parametrenin çalışabilmesi için, daha önceden BORDER parametresi ile bir sınır değeri verilmiş olmalıdır.
BORDERCOLOR (Internet Explorer)
Tablonun sınır rengini belirli renk adları ya da rrggbb tripleti ile belirler. Ancak bu parametrenin çalışabilmesi için, daha önceden BORDER parametresi ile bir sınır değeri verilmiş olmalıdır.
BORDERCOLORLIGHT (Internet Explorer)
Üç boyutlu görüntüye sahip açık renkli tablo sınırları oluşturmayı sağlar. Belirli renk adları ya da rrggbb tripleti ile değer atanabilir. Ancak bu parametrenin çalışabilmesi için, daha önceden BORDER parametresi ile bir sınır değeri verilmiş olmalıdır.
BORDERCOLORDARK (Internet Explorer)
Üç boyutlu görüntüye sahip koyu renkli tablo sınırları oluşturmayı sağlar. Belirli renk adları ya da rrggbb tripleti ile değer atanabilir. Ancak bu parametrenin çalışabilmesi için, daha önceden BORDER parametresi ile bir sınır değeri verilmiş olmalıdır.
BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT ve BORDERCOLORDARK parametreleri, <TH>, <TR> ve <TD> elemanları için de kullanılabilir.
BACKGROUND (Internet Explorer)
Tablo elemanı içindeki resimlerin hizalamasını ayarlar.
FRAME (Internet Explorer)
Tablonun dış sınırlarının görüntülenmesini etkiler. Çalışabilmesi için BORDER parametresinin kullanılmış olması gerekir.
void: Tüm dış sınırları kaldırır.
above: Yalnızca tablonun başındaki sınırları görüntüler.
below: Yalnızca tablonun sonundaki sınırları görüntüler.
hsides: Yalnızca yatay olan dış sınırları görüntüler.
lhs: Tablonun sol kenarındaki sınırları görüntüler.
rhs: Tablonu sağ kenarındaki sınırları görüntüler.
vsides: Yalnızca dikey olan dış sınırları görüntüler.
box: Tablonu etrafında bir çerçeve çizer.
RULES (Internet Explorer)
Tablonun içindeki sınırların görüntülenmesini etkiler. Çalışabilmesi için BORDER parametresinin kullanılmış olması gerekir.
none: Bütün iç sınırları kaldırır.
basic: Yalnızca <THEAD>, <TBODY> ve <TFOOT> elemanları arasındaki sınırları görüntüler.
rows: Yatay sınırları görüntüler.
cols: Dikey sınırları görüntüler.
all: Bütün iç sınırları görüntüler.
<TR> ... </TR>
Her tablo satırı için kullanılır. Tablonu içinde kaç tane satır olacağı, kesinlikler kaç tane <TR> elemanı kullanıldığına bağlıdır.
ALIGN ve VALIGN
Align:left, center ya da right değerlerinden birini alarak, değerlerin hücre(ler) içindeki hizalamasını ayarlar.
vALİGN:top, middle, bottom ve baseline değerlrinden birini kullanarak, hücre içindei metinlerin yukarıya, ortaya, aşağıya ya da bütün satır içindeki metnin aynı hizaya getirilmesini sağlar.
BGCOLOR (Internet Explorer)
Belirli renk adları ya da rrggbb tripleti ile satır rengini ayarlamak için kullanılır.
BORDERCOLOR (Internet Explorer)
Belirli renk adları ya da rrggbb tripleti ile satırın sınırlarının rengini ayarlamak için kullanılır.
BORDERCOLORLIGHT (Internet Explorer)
Belirli renk adları ya da rrggbb tripleti ile satırın sınırlarına açık renk üç boyutlu bir görünüş vermek için kullanılır.
BORDERCOLORDARK (Internet Explorer)
Belirli renk adları ya da rrggbb tripleti ile satırın sınırlarına koyu renk üç boyutlu bir görünüş vermek için kullanılır.
<TD ...> ...</TD>
atırların içindeki hücreleri tanımlar. Her satırda aynı sayıda hücre olmasına gerek yoktur. Eksik hücreler, sağ taraftan boş olarak görüntülenirler. Her hücre, HTML belgesinin <BODY> elemanı içinde kullanılabilen bütün elemanlarını içerebilir. Default metin hizalaması sola ve ortadır.
ALIGN ve VALIGN
Align:Hücrenin içindeki metnin (verinin) sola (left), sağa (right) ya da ortaya (center) hizalanmasını sağlar.
Hücrenin içindeki verinin yukarıya (top), ortaya (middle), aşağıya (bottom) ya da bütün satırın ortak hizasına (baseline) yerleştirilmesini sağlar.
WIDTH ve HEIGHT
Width:Hücre genişliğini yüzde ya da kesin pixel ölçüsü olarak belirler.
Height:Hücre yüksekliğini yüzde ya da kesin pixel ölçüsü olarak belirler.
NOWRAP
Hücre içindeki verilerin satır kesmesi verilerek sıkıştırılamayacağını belirtir. Bu parametre kullanıldığında gerçekten çok geniş hücrelere sahip olunabilir. Bu nedenle dikkatli kullanılmalıdır.
BGCOLOR (Internet Explorer)
Hücrenin arkaplan rengini ayarlar.
BORDERCOLOR (Internet Explorer)
Hücrenin sınır rengini belirler.
BORDERCOLORLIGHT (Internet Explorer)
Hücrenin sınırlarına açık renk üç boyutlu görüntü verir.
BORDERCOLORDARK (Internet Explorer)
Hücrenin sınırlarına koyu renk üç boyutlu görüntü verir.
BACKGROUND (Internet Explorer)
Hücrenin arkaplan resmini tanımlar.
<CAPTION...> ... </CAPTION>
Tablonun açıklayıcı başlığını tanımlar. Bu başlık tabloyu yatay olarak ortalar.
ALIGN ve VALIGN
Align:Başlığın tablonun üstünde ya da altında yer almasını sağlar. Default olarak top değerini alarak satırın yukarısında yer alır. top değerinden başka bottom değerini alarak satırın altında yer alabilir. Bunlardan başka Internet Explorer left, center ve right değerlerini destekler
top ve bottom değerlerinden birini alarak, başlığın tablonun üstünde ya da altında yer alması sağlanır.
<THEAD> ... </THEAD>
Yalnız Internet Explorer tarayıcısının desteklediği bu eleman tablonun üst başlık alanını belirlemek için kullanılır.
<TBODY> ... </TBODY>
Yalnız Internet Explorer tarayıcısının desteklediği bu eleman tablonun asıl gövde alanını belirlemek için kullanılır.
<TFOOT> ... </TFOOT>
Yalnız Internet Explorer tarayıcısının desteklediği bu eleman tablonun alt başlık alanını belirlemek için kullanılır.
<COLGROUP> ... </COLGROUP>
Yalnız Internet Explorer tarayıcısının desteklediği bu eleman tablo kolonlarının grup olarak hizalanmasını sağlamak için kullanılır.
ALIGN="center
justify
left
right"
Kolon grubunun metin yatay hizalamasını belirler. Default olarak center değerini taşır.
VALIGN="baseline
bottom
middle
top"
Kolon grubunun metin dikey hizalamasını belirler.
SPAN
ALIGN ve VALIGN parametrelerinin etkileyeceği kolon sayısını verir.
<COL> ... </COL>
Yalnız Internet Explorer tarayıcısının desteklediği bu eleman tablo kolonlarının hizalanmasını sağlamak için kullanılır.
ALIGN="center
justify
left
right"
Kolonun metin yatay hizalamasını belirler. Default olarak center değerini taşır.
SPAN
ALIGN parametresinin etkileyeceği kolon sayısını verir.
Etiketler: alestabank, html de tablo nasil olusturulur, html tablo, html tablo olusturma, sitene kod ekle, sitene tablo ekle, tablo yapma
alestabank tarafından gönderildi @ 20:27
1 Yorum:
teşekkürler hocam
Yorum Gönder
Kaydol: Kayıt Yorumları [Atom]
<< Ana Sayfa