• Ana Sayfa
  
  Hoşgeldiniz !
  Bu sitede HTML,CSS ve PHP kodları kullanılarak yapılmış tamamen kişisel bir hobi ürünüdür.
  Bu siteyi yayınlamamın amacı, Bu sitede sizlere faydalı olacağını düşündüğüm bazı uygulamalar bulacaksınız. Lütfen eleştiri ve görüşlerinizi bana iletiniz. Site sizlerin önerisi ve katılımıyla daha faydalı olacaktır.
• Bilgi Teknolojileri

  Bilgi Teknolojileri Hakkında Çalışmalar

  HTML Dersleri

  • HTML Nedir ?
  • HTML Giriş
  • Metin Formları
  • Başlık Etiketleri
  • Liste Yapmak
  • Link İşlemleri
  • Resim İşlemleri
  • İleri Tablo
  • Sayfa Yenileme
  • Sayfa Yönlendirme
  • Ses Çaldırma
  • Buton Yapma
  • Kayan Yazı
  • Kaydırma Çubuğu

  CSS Dersleri

  • CSS Nedir ?
  • CSS Başlarken
  • HTML Sayfasında
  • CSS Eklentili Web
  • Margin Kullanımı
  • ID Hower
  • Transform Kullanımı
  • Web Katmanları

  Network Dersleri

  • Network Nedir ?
  • RJ45 Konnetkör Sıkma
  • Kablo Kategorisi
  • Switch Kurulumu

  PC Teknikleri

  • USB Port Kapatma
  • E-Posta Kuralları

  
  

  Excel Kullanımı

  • Excele Giriş
  • Excel Formülleri
  • Excel Makro Formülleri
• Seyahat Resimlerim

  İş veya Gezi Seyahatleim Anılar ve Oluşan Dostluklar

  • Adana
  • Elazığ
  • Rize
  • Van

  • Ankara
  • İstanbul
  • Samsun

  • Antalya
  • İzmir
  • Trabzon

  • Diyarbakır
  • Kayseri
  • Erzurum
• SAP Meterial

  SAP Meterial (SAP Malzeme Modülü)

  • Tedarik Süreci
  • Mal Girişi

  • Satınalma Talebi
  • Ödeme İşlemleri

  • Satınalma Siparişi
  • Süreç Ekranları
• Call Center
  • Çağrı Merkezi
  • Çağrı Merkezi Terimleri
  • Agent Motivasyonu
  • Kalite Yönetimi
  • Tele Satış
• Makaleler
  • Teknoloji
  • Sağlık
  • Spor
  • Sanat
  • Tarih
  • Mizah
• İletişim
  • Hakkımda
  • Sayfama Not Bırakınız
  • Ziyaretçi Defteri

TABLOLAR (TABLE)

Tablolar <table> etiketi ile belirtilir.
Bir tablo <tr> etiketi ile satırlara bölünür ve her satır da <td> etiketi ile sütunlara bölünür. <td> etiketinin anlamı "table data"dır. Bir veri hücresi (data cell) metinler, resimler, listeler, paragraflar, formlar, vs. içerebilir.
Bir HTML dosyasında tablo oluşturmak için öncelikle 3 temel kodu bilmemiz gerekir.

KOD	ANLAMI
<table> </table>	Tabloya başlamak ve bitirmek
<tr> </tr>	Satıra Başlamak ve bitirmek
<td> </td>	Sutuna Başlamak ve bitirmek

bu temel kodlar, < >açıldığı gibi < /> kapatılmalıdır. Tablo oluştururken etiketler iç içe yazılması gerektiğinden, etiketleri açmak ve kapatmak belirli sıra kuralına göre yapılmalıdır. Etiketler kapatılırken en son yazılan etiket en önce kapatılır ve bu şekilde en önce açılan etiket en son kapanması gerekir, tek hücreli bir tablo kodu örneğine atınız. Tablo kodu örnek resimde de göründüğü üzere, kapatma etiketleri içten dışa doğru sırası ile kapatılmıştır.

Tablo özellikleri;

<table>...</table> etiketi içinde kullanılacak özellikler aşağıda belirtilmiştir.

ÖZELLİK	ANLAMI
align="hiza"	Kutu hizası, left, right, center kullanılabilir.
height="yukseklik"	Sütunlar arası kenarlık boşluğu.
cellpadding="0"	Satırlar arası kenarlık boşluğu.
width="50px"	Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir.
class="stil"	Tablo stili belirtilebilir (CSS bölümünde açıklanıyor).

TD (Sutun) özellikleri;

<td>...</td> etiketi içinde kullanılacak özellikler aşağıda belirtilmiştir.

ÖZELLİK	ANLAMI
align="hiza"	Kutu hizası, left, right, center kullanılabilir.
width="genislik"	Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir.
height="yukseklik"	Tablo yüksekliği. Piksel ya da yüzde olarak ifade edilebilir.
class="stil"	Tablo stili belirtilebilir (CSS bölümünde açıklanıyor).

NOT: Eğer bir sütuna hiçbir şey yazmadan boş bırakırsak sütun görünmeyecektir. Bu sorunu çözmek için & nbsp; kullanarak kutuda boşluk karakterine yer verirseniz kenarlıkların göründüğünü fakat hücre içinin boş olduğunu göreceksiniz. (& işareti ile nbsp; arasında boşluk bırakılmayacaktır, ben sayfada görünmesi için böyle yazmak zorundayım.)

Tablo yapmaya başlayalım...

Bu kadar ön bilgi yeter sanırım şimdi bir kaç çeşit tablo örneği yapalım.

İlk olarak basit tek hücreli bir tablo yapalım...

Bu tabloda;
(border="1") değerinde tablonun çerçeve kalınlığını belirtiyoruz.
(bgcolor="#000099") değerinde çerçeve rengini belirtiyoruz.
(bgcolor="white") değerinde tablo alan rengini belirtiyoruz.
(width="400px") değerinde sutun genişliğini belirtiyoruz.
(height="50px") değerinde satır yüksekliğini belirtiyoruz ve aşağıdaki gibi bir tablo oluşuyor.

Tablo içerik alanı

Aşağıdaki kod kutusundan hazır kodu kopyalayıp tabloyu yerleştireceğiniz web alanına yapıştırın. Güle güle kullanın.

<!--tablo kodu başı--> <table border="1" bgcolor="#000099" > <tr> <td bgcolor="white" width="400px" height="50px">Tablo içerik alanı </td> </tr> </table> <!--tablo kodu sonu-->

Şimdide 3 sutunlu, 2 satırlı bir tablo yapalım...

Bu tabloda;
(border="1") değerinde çerçeve kalınlığını belirtiyoruz.
(bgcolor="#000099") değerinde çerçeve rengini belirtiyoruz.
(bgcolor="red") değerinde hücre zemin rengini belirtiyoruz.
(width="150px") değerinde ise sutun genişliğini belirtiyoruz ve aşağıdaki gibi bir tablo oluşuyor.

Birinci satır hücre1	Birinci satır hücre2	Birinci satır hücre3
İkinci satır hücre1	İkinci satır hücre2	İkinci satır hücre3

Aşağıdaki kod kutusundan hazır kodu kopyalayıp tabloyu yerleştireceğiniz web alanına yapıştırın. kod dizin kuralına uyarak tabloyu enine sutunlar ve boyuna satırlar olarak çoğaltabilirsiniz. Güle güle kullanın.

<!--tablo kodu başı--> <table border="1" bgcolor="#000099"> <tr> <td bgcolor="red" width="150px">Birinci satır hücre1</td> <td bgcolor="yellow" width="150px">Birinci satır hücre2</td> <td bgcolor="pink" width="150px">Birinci satır hücre3</td> </tr> <tr> <td bgcolor="orange">İkinci satır hücre1</td> <td bgcolor="white">İkinci satır hücre2 </td> <td bgcolor="violet">İkinci satır hücre3 </td> </tr> </table> <!--tablo kodu sonu-->

Bu defa bir çerçeve içinde ayrı ayrı parçalar (hücreler) halinde tablo yapalım...

Oluşturduğumuz tablonun içine eşit ebatlarda küçük tablolar yerleştirebiliriz. ve tabloların dış çerçeve ile hücreler arasındaki mesafe ayarı yapabiliriz.
<table> tagında;
(width="470" height="130") bölümünden dış tablonun boyutlarını ayarlıyoruz.
(border="2") bölümünden dış çerçevenin kalınlığını ayarlıyoruz, dış çerçeve istemiyorsanız değeri "0" yapınız.
(bgcolor="#FFFFFF") bölümünden çerçeve rengini ayarlıyoruz.
(cellspacing="10") bölümünden dış çerçeve ile iç çerçevelerin arasındaki mesafeyi ayarlıyoruz,

<td> tagında ise her bir hücre için ayrı ayrı;
(bgcolor="#ADD8E6") bölümünden iç hücre renk seçimini yapıyoruz.

SARI ALAN	YEŞİL ALAN
PEMBE ALAN	MAVİ ALAN

Aşağıdaki kod kutusundan hazır kodu kopyalayıp tabloyu yerleştireceğiniz web alanına yapıştırın. kod dizin kuralına uyarak tabloyu enine sutunlar ve boyuna satırlar olarak çoğaltabilirsiniz. Güle güle kullanın.

<!--tablo kodu start--> <table width="470" height="130" border="2" bgcolor="#ADD8E6" cellspacing="10"> <tr> <td valign="top" bgcolor="#FFFF00"> <div style="text-align: left"<span style="font-family:Tahoma;">SARI ALAN</span></div> </td> <td valign="top" bgcolor="#ADFF2F"> <div style="text-align: left"<span style="font-family:Tahoma;">YEŞİL ALAN</span></div> </td> </tr> <tr> <td valign="top" bgcolor="#FF1493"> <div style="text-align: left"<span style="font-family:Tahoma;">PEMBE ALAN</span></div> </td> <td valign="top" bgcolor="#FFFFFF"> <div style="text-align: left"<span style="font-family:Tahoma;">BEYAZ ALAN</span></div> </td> </tr> </table> <!--tablo kodu finis-->

Hücre boyutları birbirinden farklı tablo yapalım...

Oluşturduğumuz bu tabloda;
Satır birleştirme,
Sutun birleştirme gibi uygulamalara yer verilmiştir
Gerekli açıklamalar tablo kodu içerisinde verimiştir.

Kırmızı zemin sarı yazı	Mavi zemin beyaz yazı
Boncuk mavi	Açık yeşil
Burada iki sütunluk tekbir satır var.
Burası üç satırlık bir sütun.	Turuncu
	Çağla yeşil
	Açık Gri

Aşağıdaki kodu kopyalayıp tabloyu yerleştireceğiniz alana yapıştırın.
kod dizin kuralına uyarak tabloyu enine/boyuna çoğaltabilirsiniz
Güle güle kullanın.

<!--tablo kodu start--> <table border="0" bgcolor="AABBCC" width="470px"> <!--Tüm tablo genişliği ve çerçe rengi ve çerçeve kalınlığı içindir--> <!--Aşağıda ilk satır kodları var örnek olarak ilk satır kodlarında yazı rengi kodları ilave edilmiştir. Ayrıca, ilk satırda sutun genişlikleri belirtilmiştir. sonraki satırlar aynı ölçüde olacağından kad yazılmasına gerek yoktur. --> <tr> <td bgcolor="#FF0000"width="235px"><font color="#FFFF00"> Kırmızı zemin sarı yazı</font></td> <td bgcolor="#0000FF"width="235px"><font color="#FFFFFF"> Mavi zemin beyaz yazı</font></td> </tr> <!--Aşağıda ikinci satır kodları vardır.--> <tr> <td bgcolor="#00FFFF">Boncuk mavi</td> <td bgcolor="#66FF99">Açık yeşil</td> </tr > <!--Aşağıda Üçüncü satır kodları vardır. bu satırda, iki sutunluk bir satır oluşturmak için colspan="satır sayısı" kodu kullanılır--> <tr> <td bgcolor="#FFFFFF"colspan="2">Burada iki sütunluk tekbir satır var.</td> </tr> <!--Aşağıda Dördüncü satır kodları vardır. Burada üç satırlık bir sutun oluşturmak için rowspan="satır sayısı" kodu kullanılır--> <tr> <td bgcolor="#FF66FF"rowspan="3">Burası üç satırlık bir sütun.</td> <td bgcolor="#FF9900">Turuncu</td> </tr> <tr> <td bgcolor="#CCFF00">Çağla yeşil</td> </tr> <tr> <td bgcolor="#E6E6FA">Açık Gri</td> </tr> </table>

Bu defa tablo artalanına fotoğraf yerleştirelim...

Oluşturduğumuz bu tabloda tablo zemin resmi için, background="arkaplanresmi.jpg" tagını tanımlıyoruz.

Aşağıdaki kodu kopyalayıp tabloyu yerleştireceğiniz alana yapıştırın.
(width="400" height="250") bölümünden tablo boyutunu ayarlıyoruz
kod dizin kuralına uyarak tabloyu enine/boyuna hücre artırabiliriz.
Burada dikkat etmeniz gereken tablo boyutunuz ile resim boyutu aynı olmasıdır. yoksa resim büyük olursa resmin bir kısmı görünmez, Küçük olursa alt ve sol taraf açık kalır.Güle güle kullanın.

<!--tablo kodu start--> <table width="400" height="250" border="1" background="imaj_arkaplan/arkaplanresmi.jpg"> <tr> <td>1. Satır 1. Sütun</td> <td>1. Satır 2. Sütun</td> </tr> <tr> <td>2. Satır 1. Sütun</td> <td>2. Satır 2. Sütun</td> </tr> </table> <!--tablo kodu finis-->

Şimdi de tablo artalanına her hücreye ayrı ayrı fotoğraf yerleştirelim...

Bu çalışmamızda her hücreye ayrı bir artalan resmi belirledik, tabi her hücre boyutu ile ilgili kodları unutmadık,

Turk	Suuidi	Tunus
ABD	Suriye	Arjantin
İtalya	Belçika	Almanya

Aşağıdaki kodu kopyalayıp tabloyu yerleştireceğiniz alana yapıştırın.
(width="60" height="30") bölümünden hücre boyutunu ayarlıyoruz,
şayet tüm satır ve sutunlar eşit olacaksa her hücrede bulunan(width="60" height="30") taglarını silerek, bu etiketi <table> tagı içinde (table border="1") etiketinden den sonra tek olarak yazmanız yeterli, tüm satır ve sutunlar eşit olacaktır.

(background="imaj_arkaplan/turk.gif") bölümünden hücre artalan resmini tanımlıyoruz.
kod dizin kuralına uyarak tabloyu enine/boyuna hücre artırabiliriz.
Burada dikkat etmeniz gereken hücre boyutunuz ile resim boyutu aynı olmasıdır. yoksa resim büyük olursa resmin bir kısmı görünmez, Küçük olursa alt ve sol taraf açık kalır. Güle güle kullanın.

<!--tablo kodu start--> <table border="1"> <tr> <td width="100" height="60" background="imaj_arkaplan/turk.gif">Turk</td> <td width="100" height="60" background="imaj_arkaplan/suudi.gif">Suuidi</td> <td width="100" height="60" background="imaj_arkaplan/tunus.gif">Tunus</td> </tr> <tr> <td width="100" height="60" background="imaj_arkaplan/abd.gif">ABD</td> <td width="100" height="60" background="imaj_arkaplan/suriye.gif">Suriye</td> <td width="100" height="60" background="imaj_arkaplan/arjantin.gif">Arjantin</td> </tr> <tr> <td width="100" height="60" background="imaj_arkaplan/italya.gif">İtalya</td> <td width="100" height="60" background="imaj_arkaplan/belcika.gif">Belçika</td> <td width="100" height="60" background="imaj_arkaplan/alman.gif">Almanya</td> </tr> </table> <!--tablo kodu finis-->

Tablolarla ilgili anlatacaklarım burada bitmiyor. aşağıda HTML de İleri tablo yapımı yer almaktadır. bu dersimizi pekiştirdikten sonra ikinci kısma devam edeebiliriz.

---

HTML5 İLERİ TABLO YAPIMI

Daha önceki "Tablo Yapımı" dersimizde bu konuyu işlemiştik, şimdi HTML5 ile ileri tablo kodlarından bahsedeceğim.

<caption> ve <colgroup>etiketi;

Şimdi aşağıdaki kodu inceleyelim:

<table border="0" cellpadding="5"> <caption>Aylık Hasılat</caption> <colgroup> <col style="background-color:skyblue;"> <!-- Gök mavisi --> <col style="background-color:lightgreen"> <!-- Açık yeşil --> <col style="background-color:violet"> <!-- Eflatun --> </colgroup> <thead> <tr> <th>Aylar</th> <th>Gelir</th> <th>Gider</th> </tr> </thead> <tbody> <tr> <td>Ocak Ayı</td> <td>100 TL</td> <td>20 TL</td> </tr> <tr> <td>Şubat Ayı</td> <td>80 TL</td> <td>10 TL</td> </tr> </tbody> <tfoot> <tr> <td>Toplam</td> <td>180 TL</td> <td>30 TL</td> </tr> </tfoot> </table>

Şimdi çıktıına bakalım, yukarıdaki kodlar İnternet tarayıcınız tarafından yorumlanıp sayfamızda aşağıdaki biçimde görüntülenecektir.

Aylık Hasılat

Aylar	Gelir	Gider
Ocak Ayı	100 TL	20 TL
Şubat Ayı	80 TL	10 TL
Toplam	180 TL	30 TL

---

<form> ve <fieldset> Etiketleri ile form yapımı;

Şimdi aşağıdaki kodu inceleyelim:

<form> <fieldset> <legend>Üye Bilgileri</legend> <label>Adınız - Soyadınız: </label> <input type="text"/> <br/><br/> <label>e-Posta Adresiniz: </label> <input type="text"/> <br/><br/> <label>Doğum Tarihiniz: </label> <input type="text"/> <br/><br/> <input type="button" value="Onayla"/> </fieldset> </form>

Şimdi çıktıına bakalım, yukarıdaki kodlar İnternet tarayıcınız tarafından yorumlanıp sayfamızda aşağıdaki biçimde görüntülenecektir. Ancak bu formun çalışması için kod yazılımına PHP yazılım eklentisi gerekmektedir.

Üye Bilgileri

Adınız - Soyadınız:

e-Posta Adresiniz:

Doğum Tarihiniz:

---

<legend> ve <label> etiketleri ile form yapımı.;

Şimdi aşağıdaki kodu inceleyelim:

<form> <fieldset> <legend>Mesaj Gönder</legend> <label>Rumuzunuz: </label> <input type="text"/> <br/><br/> <label>e-Posta Adresiniz: </label> <input type="text"/> <br/><br/> <label>Doğum Tarihiniz: </label> <input type="text"/> <br/><br/> <label>Mesajınız: </label> <textarea rows="2" cols="18">

Seçiniz Sayılar Seçenek 1 Seçenek 2 Seçenek 3 Seçenek 4 Harfler Seçenek a Seçenek b Seçenek c Seçenek d

Şimdi çıktıına bakalım, yukarıdaki kodlar İnternet tarayıcınız tarafından yorumlanıp sayfamızda aşağıdaki biçimde görüntülenecektir.

Mesaj Gönder

Rumuzunuz:

e-Posta Adresiniz:

Doğum Tarihiniz:

Mesajınız:

Seçiniz Sayılar Seçenek 1 Seçenek 2 Seçenek 3 Seçenek 4 Harfler Seçenek a Seçenek b Seçenek c Seçenek d

Ancak bu formun çalışması için kod yazılımına PHP yazılım eklentisi gerekmektedir.
Bu dersimizi burada sonlandırıyorum.