web dersleri - TABLO-1

TABLO

Tablolar konusunu basitten karmaşığa doğru öğreneceğiz.

Tablolar <table> ile başlar </table> ile biter.

1.satır 1.hücre	1.satır 2.hücre	1.satır3.hücre
2.satır 1.hücre	2.satır 2.hücre	2.satır 3.hücre
3.satır 1.hücre	3.satır 2.hücre	3.satır 3.hücre

Tablolar hücrelerden ,tablo kenarından ve hücreler arası boşluklardan oluşur.Hücrelerin yatay sıralanmasına satır,düşey sıralanmasına sütun denir.Yukarıdaki tabloda 3 adet satır var.Her satırda 3'er adet hücre var.
Her satır ayrı ayrı <tr> ile başlar </tr> ile biter.Her hücre <td> ile başlar </td> ile biter.

Tablo Şablonu:

<table                    >

<tr> <td            >.............</td><td           >.............</td><td                >.............</td></tr>

<tr> <td            >.............</td><td           >.............</td><td                >.............</td></tr>

<tr> <td            >.............</td><td           >.............</td><td                >.............</td></tr>

</table>

Bazı kelimelerin ingilizce açılımları ve türkce anlamları;

table=tablo
tr (  table row)=tablo satırı
td(table data)=hücre verileri

<table                            >  Yanda table karşısındaki   boşluğa çeşitli değikenler ekleriz.Bu değişkenler tabloya çeşitli özellikler kazandırır.Bu değişkenler aşağıdadır.

border="...."
cellspacing="....."
cellpadding="...."
widht="...."
bgcolor="....."
background="......"
align="...."
hspace="...."
vspace="....."
height="...."
frame="....."
rules="....."
bordercolor="...."
bordercolorlight="...."
bordercolordark="..."
summary="...."

border(kenar)=tablo kenar kalınlığı belirlenir.(tablo kenarı açık ve koyu renkli olarak görülür.)
bordercolor(kenar rengi)=    tablo kenar rengi belirlenir.
bordercolorlight(kenaraçıkrengi)=   tablo kenarının açık rengi belirlenir.(bu özelik kullanılırken ,bordercolor değişkeni kullanılmaz)
bordercolordark(kenarkoyurengi)= tablo kenarının koyu rengi belirlenir..(bu özelik kullanılırken,
bordercolor değişkeni kullanılmaz)
bordercolor(kenarrengi)=    tablo kenar rengi belirlenir
cellspacing(hücre boşluğu)=   hücreler arası boşluk belirlenir
cellpadding(hücrepedi)=   hücre içindeki yazının hücre kenarlarına uzaklığı belirlenir
width(genişlik)=   tablo genişliği belirlenir
height(yükseklik)=   tablo yüksekliği belirlenir
bgcolor(backgroundcolor=arkayerrengi)=   tablodaki tüm hücrelerin rengi belirlenir.

<tr                       >    Yanda tr karşısındaki boşlğa çeşitli değişkenler ekleriz..Bu değişkenler
satıra çeşitli özellikler kazandırır.

<td                >  Yanda td   karşısındaki boşluğa çeşitli değikenler ekleriz.Bu değişkenler hücreye çeşitli özellikler kazandırır.Bu değişkenler aşağıdadır.

bgcolor="......"
width ="......."
style  ="text-color:....."

<td                >..................</td>    Yandaki noktalı bölüme;hücre içine yazılacak yazı(veya resim veya form yeya liste yeya çizgi vesaire)konur.

BORDER:

border:(kenar)

Şablondaki border="....."   verilen değer pixel dir.Pixel değerini sıfır verirsek tabloda kenar
oluşmaz.Pixel değeri arttıkca tablonun kenar kalın lığı artar.Biz border değerini 10 olarak atayalım.

lığı artar.Biz border değerini 10 olarak atayalım.

Örnek:

<table border="10">
<tr> <td>1.satır 1.hücre</td><td>1.satır 2.hücre</td><td>1.satır3.hücre</td></tr>
<tr ><td>2.satır 1.hücre</td><td>2.satır 2.hücre</td><td>2.satır 3.hücre</td></tr>
<tr ><td>3.satır 1.hücre</td><td>3.satır 2.hücre</td><td>3.satır 3.hücre</td></tr>
</table>

Tabloda kenar yoksa border değeri sıfırdır.Değer yükseldikce kenar kalınlığı artar.

Örneğin web sitesindeki görünümü aşağıdadır.

1.satır 1.hücre	1.satır 2.hücre	1.satır3.hücre
2.satır 1.hücre	2.satır 2.hücre	2.satır 3.hücre
3.satır 1.hücre	3.satır 2.hücre	3.satır 3.hücre

BORDERCOLOR:

bordercolor:kenar rengi

Kenar rengini mavi(blue) olarak atayalım.

Yazılım;

<table border="10" bordercolor="blue" >
<tr> <td>1.satır 1.hücre</td><td>1.satır 2.hücre</td><td>1.satır3.hücre</td></tr>
<tr ><td>2.satır 1.hücre</td><td>2.satır 2.hücre</td><td>2.satır 3.hücre</td></tr>
<tr ><td>3.satır 1.hücre</td><td>3.satır 2.hücre</td><td>3.satır 3.hücre</td></tr>
</table>

Yazılımın web sayfasındaki görünümü;

1.satır 1.hücre	1.satır 2.hücre	1.satır3.hücre
2.satır 1.hücre	2.satır 2.hücre	2.satır 3.hücre
3.satır 1.hücre	3.satır 2.hücre	3.satır 3.hücre

BGCOLOR

bgcolor: tablonun arkaplan rengi.
Bu uygulama ile hücrelere ve hücreler arası boşluğa(cellspacing) renk verilir.

Tablodaki hücrelerinin hepsine aynı rengi verme:

<table border="10 "bgcolor="............." >
<tr> <td>1.satır 1.hücre</td><td>1.satır 2.hücre</td><td>1.satır3.hücre</td></tr>
<tr ><td>2.satır 1.hücre</td><td>2.satır 2.hücre</td><td>2.satır 3.hücre</td></tr>
<tr ><td>3.satır 1.hücre</td><td>3.satır 2.hücre</td><td>3.satır 3.hücre</td></tr>
</table>

Yukardaki noktalı bölüme renk ismi ingilizce (veya hex kod'da) yazılır.

Örnek;

Tablodaki hücrelere sarı(yellow) renk verelim.

Yazılım;

<table border="10 "bgcolor="yellow" >
<tr> <td>1.satır 1.hücre</td><td>1.satır 2.hücre</td><td>1.satır3.hücre</td></tr>
<tr ><td>2.satır 1.hücre</td><td>2.satır 2.hücre</td><td>2.satır 3.hücre</td></tr>
<tr ><td>3.satır 1.hücre</td><td>3.satır 2.hücre</td><td>3.satır 3.hücre</td></tr>
</table>

Yazılımın web sayfasındaki görünümü;

1.satır 1.hücre	1.satır 2.hücre	1.satır3.hücre
2.satır 1.hücre	2.satır 2.hücre	2.satır 3.hücre
3.satır 1.hücre	3.satır 2.hücre	3.satır 3.hücre

Tablodaki bazı hücrelerin rengi farklı ise şablonu aşağıdaki gibidir.

<table border="10 "bgcolor="yellow" >
<tr> <td bgcolor="...">1.satır 1.hücre</td><td>1.satır 2.hücre</td><td>1.satır3.hücre</td></tr>
<tr ><td>2.satır 1.hücre</td><td>2.satır 2.hücre</td><td>2.satır 3.hücre</td></tr>
<tr ><td>3.satır 1.hücre</td><td>3.satır 2.hücre</td><td>3.satır 3.hücre</td></tr>
</table>

Yukardak şablonda birinci hücrenin rengi yeşil olsun.Bunun için noktalı boşluğa green
yazalım.

Örnek:

Yazılım;

<table border="10 "bgcolor="yellow" >
<tr><td bgcolor="green">1.satır1.hücre</td><td>1.satır 2.hücre</td><td>1.satır3.hücre</td></tr>
<tr ><td>2.satır 1.hücre</td><td>2.satır 2.hücre</td><td>2.satır 3.hücre</td></tr>
<tr ><td>3.satır 1.hücre</td><td>3.satır 2.hücre</td><td>3.satır 3.hücre</td></tr>
</table>

Yazılmın web sayfasındali görünümü;

1.satır1.hücre	1.satır 2.hücre	1.satır3.hücre
2.satır 1.hücre	2.satır 2.hücre	2.satır 3.hücre
3.satır 1.hücre	3.satır 2.hücre	3.satır 3.hücre

Bir satırdaki hücrelerin hepsine aynı rengi verme;

1.satır 1.hücre	1.satır 2.hücre	1.satır3.hücre
2.satır 1.hücre	2.satır 2.hücre	2.satır 3.hücre
3.satır 1.hücre	3.satır 2.hücre	3.satır 3.hücre

Yukarıdaki tablonun tüm hücreleri sarıdır.Bu tablonun ilk satırını sarı yerine mavi yapalım.

Bunun için aşağıdaki şablon kullanılır.

<table border="10 "bgcolor="yellow" >
<tr bgcolor="...."><td>1.satır1.hücre</td><td>1.satır 2.hücre</td><td>1.satır3.hücre</td></tr>
<tr ><td>2.satır 1.hücre</td><td>2.satır 2.hücre</td><td>2.satır 3.hücre</td></tr>
<tr ><td>3.satır 1.hücre</td><td>3.satır 2.hücre</td><td>3.satır 3.hücre</td></tr>
</table>

Yukardaki şablonda noktalı bölüme blue(mavi) yazarsak birinci satır mavi olur.

Örnek;

Yazılım

<table border="10 "bgcolor="yellow" >
<tr bgcolor="blue"><td>1.satır1.hücre</td><td>1.satır 2.hücre</td><td>1.satır3.hücre</td></tr>
<tr ><td>2.satır 1.hücre</td><td>2.satır 2.hücre</td><td>2.satır 3.hücre</td></tr>
<tr ><td>3.satır 1.hücre</td><td>3.satır 2.hücre</td><td>3.satır 3.hücre</td></tr>
</table>

Web sitesindeki görünüm aşağıdadır;

1.satır1.hücre	1.satır 2.hücre	1.satır3.hücre
2.satır 1.hücre	2.satır 2.hücre	2.satır 3.hücre
3.satır 1.hücre	3.satır 2.hücre	3.satır 3.hücre

HÜCRE İÇİNDEKİ YAZIYA RENK VERME:

<table border="10 "bgcolor="yellow" >
<tr> <td>1.satır 1.hücre</td><td>1.satır 2.hücre</td><td>1.satır3.hücre</td></tr>
<tr ><td>2.satır 1.hücre</td><td>2.satır 2.hücre</td><td>2.satır 3.hücre</td></tr>
<tr ><td>3.satır 1.hücre</td><td>3.satır 2.hücre</td><td>3.satır 3.hücre</td></tr>
</table>

1.satır 1.hücre	1.satır 2.hücre	1.satır3.hücre
2.satır 1.hücre	2.satır 2.hücre	2.satır 3.hücre
3.satır 1.hücre	3.satır 2.hücre	3.satır 3.hücre

Yukarıdaki tabloda hücre içindeki yazılar siyah renklidir.Bu tabloda 1. satır 1.hücre
yazısını mavi(blue) yapalım.Bunun için style="textcolor: ......" değişkeni eklenir.Noktalı alana renk yazılır.Bizim rengimiz mavi(blue) dir.

Örnek;

Yazılım;

<table border="10 "bgcolor="yellow" >
<tr> <td style="text-color:blue">1.satır 1.hücre</td><td>1.satır 2.hücre</td><td>1.satır3.hücre</td></tr>
<tr ><td>2.satır 1.hücre</td><td>2.satır 2.hücre</td><td>2.satır 3.hücre</td></tr>
<tr ><td>3.satır 1.hücre</td><td>3.satır 2.hücre</td><td>3.satır 3.hücre</td></tr>
</table>

Yazılmın web sayfasındaki görünümü;

1.satır 1.hücre	1.satır 2.hücre	1.satır3.hücre
2.satır 1.hücre	2.satır 2.hücre	2.satır 3.hücre
3.satır 1.hücre	3.satır 2.hücre	3.satır 3.hücre

BORDERCOLORLIGHT VE BORDERCOLORDARK

<table border="10">
<tr> <td>1.satır 1.hücre</td><td>1.satır 2.hücre</td><td>1.satır3.hücre</td></tr>
<tr ><td>2.satır 1.hücre</td><td>2.satır 2.hücre</td><td>2.satır 3.hücre</td></tr>
<tr ><td>3.satır 1.hücre</td><td>3.satır 2.hücre</td><td>3.satır 3.hücre</td></tr>
</table>

1.satır 1.hücre	1.satır 2.hücre	1.satır3.hücre
2.satır 1.hücre	2.satır 2.hücre	2.satır 3.hücre
3.satır 1.hücre	3.satır 2.hücre	3.satır 3.hücre

Yukarıda tablo ve üst tarafında yazılımı vardır.Görüleceği gibi kenar rengi(bordercolor)ile
ilgili bir değişken yoktur.Bu durum da kenarın bir tarafı açık renk bir tarafı koyu görünür.
Biz bu açık ve koyu renkleri aşağıdaki şablonla değiştirebiliriz.

Şablon;

<table border="10" bordercolorlight="........" bordercolordark=".......">
<tr> <td>1.satır 1.hücre</td><td>1.satır 2.hücre</td><td>1.satır3.hücre</td></tr>
<tr ><td>2.satır 1.hücre</td><td>2.satır 2.hücre</td><td>2.satır 3.hücre</td></tr>
<tr ><td>3.satır 1.hücre</td><td>3.satır 2.hücre</td><td>3.satır 3.hücre</td></tr>
</table>

Yukarıdaki şablonda birinci noktala alana renk ismi(hex değeri) verilerek açık renkli
kenarın rengi değiştirilir.Şablonda ikinci noktala alana renk ismi(hex değeri) verilerek koyu
renkli kenarın rengi değiştirilir.Açık kenar rengini sarı(yellow),koyu kenarın rengini
portakal rengi(orange) olarak atayalım.

Örnek;

Yazılım;

<table border="10" bordercolorlight="yellow" bordercolordark="orange">
<tr> <td>1.satır 1.hücre</td><td>1.satır 2.hücre</td><td>1.satır3.hücre</td></tr>
<tr ><td>2.satır 1.hücre</td><td>2.satır 2.hücre</td><td>2.satır 3.hücre</td></tr>
<tr ><td>3.satır 1.hücre</td><td>3.satır 2.hücre</td><td>3.satır 3.hücre</td></tr>
</table>

Yazılımın web sitesindeki görünümü aşağıdadır.

1.satır 1.hücre	1.satır 2.hücre	1.satır3.hücre
2.satır 1.hücre	2.satır 2.hücre	2.satır 3.hücre
3.satır 1.hücre	3.satır 2.hücre	3.satır 3.hücre

WİDTH:

width:genişlik

Tabloya genişlik verme:

<table width="....">   noktalı boşluğa değerler verilerek genişlik 
ayarlanır.

Şablon;

<table border="10" width="..........">
<tr>
<td>hücre</td>
</tr>

Yukarıdaki şablonda noktalı bölüme hem pixel'li hemde yüzdeli değer verilir.

width="......" 'e pixel değerler verelim.Noktalı bölüme 50,100.400 pixel değeri verelim.

Örnek.

Yazılım;

<table border="10" width="50">
<tr>
<td>hücre</td>
</tr>

Yazılımın web sayfasındaki görünümü;

hücre

Örnek:

Yazılım;

<table border="10" width="100">
<tr>
<td>hücre</td>
</tr>

Yazılımın web sayfasındaki görünümü;

hücre

Örnek:

Yazılm;

<table border="10" width="300">
<tr>
<td>hücre</td>
</tr>

Yazılımın web sayfasındaki görünümü;

hücre

width="....." 'e % li değerler verelim;

100%   bu değer hücreyi ekran(screen) genişliğiyle aynı yapar.
50%      bu değer ekran genişliğinin yüzde ellisidir.
30%      bu değer ekran genişliğinin yüzde otuzudur.

Örnek;

Yazılım;

<table border="10"   width="100%">
<tr>
<td>hücre</td>
</tr>

Yazılımın web sayfasındaki görünümü;

hücre

Örnek;

Yazılm;

<table border="10" width="50%">
<tr>
<td>hücre</td>
</tr>

Yazılımın web sayfasındaki görünümü;

hücre

Örnek;

Yazılım;

<table border="10" width="30%">
<tr>
<td>hücre</td>
</tr>

Yazılımın web sayfasındaki görünümü;

hücre