BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR. MEHTAP YALÇINKAYA
HTML - TABLO Genel Bilgi 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'in en önemli yapıtaşlarındandır HTML metinleri ya da verileri biçimlendirmek, düzenlemek için kullandığımız komutlar dizisidir. Biz görmüyoruz ama web siteleri tablolardan ibarettir. Yoksa düzenli olmaları çok zor. O menü blokları, çerçeveler hep tablodur. Şimdi bu tabloları nasıl oluşturacağımızı, nasıl satır sütun ekleyeceğimizi görelim. Tablo tanımı <table>... şeklinde olur. Biz satır ve sütunları içine koyarız. satır, <td> </td> sütundur.
HTML DERSLERİ TABLO Örnek 1: <HTML> <HEAD> <TITLE>Tablo 1 </TITLE> <META http-equiv="content-type" content="text/html;charset=windows-1254"> </HEAD> <BODY> <table> <td>tablo yapmak</td> </BODY> </HTML>!!!! HTML etiketleri için büyük/küçük harf duyarlılığı yoktur. HTML kodlamayı daha rahat takip etmek için girintiler kullanılmıştır. Girinti vermeden de yazabilirsiniz Bu şekilde sayfamızda sadece tablo yapmak yazısını görürüz. Tablo olmasına rağmen tablo yokmuş gibi görünür. Tablomuzda kenarlık olmadığı için, tablo olduğunu fark edemeyiz. Web sitelerindeki onlarca tabloyu bundan dolayı görmüyoruz. Şimdi tablomuzu görmek için 1 piksellik kenarlık koyalım ; (border= 1 )
HTML DERSLERİ TABLO Örnek 2: <HTML> <HEAD> <TITLE>Tablo 2 </TITLE> <META http-equiv="content-type" content="text/html;charset=windows-1254"> </HEAD> <BODY> <table border= 1 > <td>tablo yapmak</td> </BODY> </HTML>!!!! HTML etiketleri için büyük/küçük harf duyarlılığı yoktur. HTML kodlamayı daha rahat takip etmek için girintiler kullanılmıştır. Girinti vermeden de yazabilirsiniz Şimdi buna bir satır ekleyelim
HTML DERSLERİ TABLO Örnek 3: <HTML> <HEAD> <TITLE>Tablo 3 </TITLE> <META http-equiv="content-type" content="text/html;charset=windows-1254"> </HEAD> <BODY> <table border= 1 > <td>tablo yapmak</td> <td>tablo yapmak</td> </BODY> </HTML>!!!! HTML etiketleri için büyük/küçük harf duyarlılığı yoktur. HTML kodlamayı daha rahat takip etmek için girintiler kullanılmıştır. Girinti vermeden de yazabilirsiniz Şimdi buna bir sütun ekleyelim
Örnek 4: HTML DERSLERİ TABLO <HTML> <HEAD> <TITLE>Tablo 4 </TITLE> <META http-equiv="content-type" content="text/html;charset=windows-1254"> </HEAD> <BODY> <table border= 1 > <td>tablo yapmak</td> <td>tablo yapmak</td> <td>tablo yapmak</td> <td>tablo yapmak</td> </BODY> </HTML>
Tek satır da iki sütun ; Örnek 5: HTML DERSLERİ TABLO <HTML> <HEAD> <TITLE>Tablo 5 </TITLE> <META http-equiv="content-type" content="text/html;charset=windows-1254"> </HEAD> <BODY> <table border= 1 > <td>tablo yapmak</td> <td>tablo yapmak</td> </BODY> </HTML>
HTML DERSLERİ TABLO ÖZELLİKLERİ <table border=".. bgcolor =".." cellpading=".." cellspacing=".." align=".." width="... height="... > border parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar. <table border="0"> <td>hücre</td> <table border="2"> <td>hücre</td>
HTML DERSLERİ TABLO ÖZELLİKLERİ <table border=".." bgcolor =".." cellpading=".." cellspacing=".." align=".." width="... height="... > align parametresi tabloyu düşey hizalamak için kullanılır, align=left sola, align=right sağa dayalı yapar, align=center ortalar. <table border="1" align="left"> <td>hücre1</td> <td>hücre2</td> <table border="1" align="right"> <td>hücre1</td> <td>hücre2</td>
HTML DERSLERİ TABLO ÖZELLİKLERİ <table border=".." bgcolor =".." cellpading=".." cellspacing=".." align=".." width="... height="... > width ve height parametreleri resimler konusunda gördüğümüz gibi tabloda en ve boy uzunluğunu belirtir. Tablonun değer verilmediğinde sahip olduğu normal ölçülerinden küçük değerler verilirse bu değerler dikkate alınmaz, bir başka deyişle tabloyu büyütebiliriz fakat küçültemeyiz. Tablo genişliği ve yüksekliği için (piksel olarak ) yüzde de kullanabilirsiniz. 100% yaparsanız tam genişlik alır <table border="1" width="150" height="200"> <td>hücre1</td> <td>hücre2</td>
HTML DERSLERİ TABLO ÖZELLİKLERİ <table border=".." bgcolor =".." cellpading=".." cellspacing=".." align=".." width="... height="... > bgcolor arkaplan rengi cellpadding hücre içi boşluk cellspacing hücreler arası boşluk bir de şunu bilelim background= resim.gif şeklinde arkaplan resmini tanımlıyabiliriz.
HTML DERSLERİ TABLO ÖZELLİKLERİ <td> Etiketi için Parametreler <td bgcolor="..." background="..." width="..." height="..." align="..." valign="..."> bgcolor parametresi hücreyi renklendirmede kullanılır. <table border="1" cellpadding="7"> <td bgcolor="#ff0000">hücre1</td> <td bgcolor="#00ff00">hücre2</td> <td bgcolor="#0000ff">hücre3</td> <td bgcolor="#ffff00">hücre4</td>
HTML DERSLERİ TABLO ÖZELLİKLERİ background parametresi ile hücreye grafik-artalan yerleştirebiliriz. <table border="1" cellpadding="9"> <td background="resim1.jpg">hücre1</td> <td background="resim2.jpg">hücre2</td> <td background="resim3.jpg">hücre3</td> <td background="resim4.jpg">hücre4</td>
HTML DERSLERİ TABLO UGULAMALAR Örnek 6: <HTML> <HEAD> <TITLE>Tablo 6 </TITLE> <META http-equiv="content-type" content="text/html;charset=windows-1254"> </HEAD> <BODY> <table border= 1 align= center bgcolor= #FFFFCC cellpadding= 5 cellspacing= 5 width= 300 > <td>tablo yapmak</td> <td>tablo yapmak</td> </BODY> </HTML>
Örnek 7: HTML DERSLERİ TABLO UGULAMALAR <HTML> <HEAD> <TITLE>Tablo 7 </TITLE> <META http-equiv="content-type" content="text/html;charset=windows-1254"> </HEAD> <BODY> <table border= 1 align= right bgcolor= #FFFFCC cellpadding= 5 cellspacing= 5 width= 300 > <td align= right bgcolor= #CCFFCC bordercolor= #333333 valign= top height= 100 width= 200 >tablo yapmak</td> <td bgcolor= #FF9933 align= center valign= bottom >tablo yapmak</td> </BODY> </HTML> bordercolor kenarlık rengi Valign hücre içindeki yazıların dikey hizalaması. (vertical align)
HTML DERSLERİ TABLO UGULAMALAR Örnek 8: Tablo Başlığı : yerine <th> kullanılarak tanımlanır. <HTML> <HEAD> <TITLE>Tablo 8 </TITLE> <META http-equiv="content-type" content="text/html;charset=windows-1254"> </HEAD> <BODY> <table border= 1 > <th>tablo başlığı</th> <td>tablo yapmak</td> </BODY> </HTML> Böylece başlık hücresi içindekiler direk header oldu.
HTML DERSLERİ TABLO UGULAMALAR Örnek 9: ROWSPAN <HTML> <HEAD> <TITLE>Tablo 9 </TITLE> <META http-equiv="content-type" content="text/html;charset=windows-1254"> </HEAD> <BODY> <table border= 1 > <td rowspan= 2 >tablo yapmak</td> <td>tablo yapmak</td> <td>tablo yapmak</td> </BODY> </HTML>
HTML DERSLERİ TABLO UGULAMALAR Örnek 10: COLSPAN <HTML> <HEAD> <TITLE>Tablo 10 </TITLE> <META http-equiv="content-type" content="text/html;charset=windows-1254"> </HEAD> <BODY> <table border= 1 > <td>tablo yapmak</td> <td>tablo yapmak</td> <td colspan= 2 >tablo yapmak</td> </BODY> </HTML> colspan ve rowspan kullanarak sütun yada satırları birleştirirken içine hücre sayısını yazıyoruz. Bu yapılarda birşey kaçırırsanız tablolarınız kayar. Yani yukarda 3 hücre olsaydı biz colspan= 2 yazsaydık olmazdı tabi.
HTML DERSLERİ TABLO ÖDEV Ödev 1 Ödev 2
HTML DERSLERİ TABLO ÖDEV Ödev 3 Ödev 1 Ödev 2