EMRAH ÜSTÜN

internet güzel bir şeydir

html – tablolar

19 Nisan, 2007 Kategori: bilgisayar/internet, yazılım | 12 Yorum »

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 ekliyeceğimizi görelim.Tablo tanımı <table> </table> şeklinde olur. Biz satır ve sütunları içine koyarız. <tr></tr> satır, <td></td> sütundur.

Örnekleyelim;

<table>
<tr>
<td>tablo yapmak</td>
</tr>
</table>

Bu şekilde sadece tablo yaptım yazısını görürüz ama. Çünkü bunda kenarlık yok, tablo olduğunu fark edemeyiz. (ki web sitelerindeki onlarca tabloyu bundan dolayı görmüyoruz) Şimdi de 1 piksellik kenarlık koyalım görebilelim diye. border=”1″

<table border=”1″>
<tr>
<td>tablo yapmak</td>
</tr>
</table>

Çıktısı:

tablo yapmak

Aa ne şeker oldu. Hadi gelin şimdi buna bir satır ekleyelim.

<table border=”1″>
<tr>
<td>tablo yapmak</td>
</tr>
<tr>
<td>tablo yapmak</td>
</tr>
</table>

Çıktısı:

tablo yapmak

İnanamıyorum böyle güzel tablo görmedim hayatımda. Hadi sütun ekleyelim.

<table border=”1″>
<tr>
<td>tablo yapmak</td> <td>tablo yapmak</td>
</tr>
<tr>
<td>tablo yapmak</td> <td>tablo yapmak</td>
</tr>
</table>

Çıktısı:

tablo yapmak	tablo yapmak
tablo yapmak	tablo yapmak

Tek satırda 2 sütun:

<table border=”1″>
<tr>
<td>tablo yapmak</td> <td>tablo yapmak</td>
</tr>
</table>

tablo yapmak

Tablo özellikleri

Bence anlaşılmıştır bunlar. Şimdi tablo özelliklerini kurcalayalım.

<table align=”center” bgcolor=”#FFFFCC” cellpadding=”5″ cellspacing=”5″ width=”300″>
<tr>
<td>tablo yapmak</td><td>tablo yapmak</td>
</tr>
</table>

Çıktısı:

tablo yapmak

Şimdi anlatayım burada kullanılanları;

align=”center” tabloyu ortalar.(firefox için benim site sitilleri şu an engelliyor bakmayın ortalamadığına)

bgcolor arkaplan rengi

cellpadding hücre içi boşluk

cellspacing hücreler arası boşluk

width tablo genişliği (piksel olarak bunlar hep). width içinde yüzde de kullanabilirsiniz. 100% yaparsanız tam genişlik alır.

bir de height vardır. tablo yüksekliği.

bir de şunu bilelim background=”resim.gif” şeklinde arkaplan resmini tanımlıyabiliriz.

Hadi şimdi hücre içi özelliklere geçelim. (kalabalık:hadi geçelliiiiim vuuaaaaa)

<table border=”1″ align=”right” bgcolor=”#FFFFCC” cellpadding=”5″ cellspacing=”5″ width=”300″>
<tr>
<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>
</tr>
</table>

çıktısı:

tablo yapmak

Sol hücredeki özellikler:

align hücre içi yazı hizalaması. tabloda kullandığımız tablonun sayfa içindeki konumuydu. ama hücre için hücre içi yazıların hizalaması. burada ortaladık.

bgcolor yine arkaplan rengi. tablodan bağımsız olduğunu görebilesiniz diye ayrı ayrı yaptım. kenarlıklar tablo arkaplanı renginde dikkatinizi yolarım.

bordercolor kenarlık rengi tabiki

valign

hücre içindeki yazıların dikey hizalaması. (vertical align)

height yükseklik. burada 2 hücreyi farklı yükseklikte yapamazsınız. yaparsanız da büyüğünki kullanılır(tarayıcıya göre).

width de hücre genişliği. tablo genişliğine 300 demiştik , 200ünü soldaki hücreye ayırdık ve diğerine 100 kaldı. % kullanarak ta yapılabilirdi.

Tablo başlığı

<tr> yerine <th> kullanılarak tanımlanır.

<table border=”1″ >
<tr>
<th>tablo başlığı</th>
</tr>
<tr>
<td>tablo yapmak</td>
</tr>
</table>

çıktısı:

tablo başlığı
tablo yapmak

Böylece başlık hücresi içindekiler direk header oldu.

Son olarak da ;

<table border=”1″ >
<tr>
<td rowspan=”2″>tablo yapmak</td> <td>tablo yapmak</td>
</tr>
<tr>
<td>tablo yapmak</td>
</tr>
</table>

tablo yapmak	tablo yapmak
	tablo yapmak

Bir de;

<table border=”1″ >
<tr>
<td>tablo yapmak</td>
<td>tablo yapmak</td>
</tr>
<tr>
<td colspan=”2″>tablo yapmak</td>
</tr>
</table>

tablo yapmak	tablo yapmak
tablo yapmak

Bunları da colspan ve rowspan kullanarak yaptık. Hücre sayısını yazıyoruz içine. Bu yapıda birşey kaçırırsanız tablolarınız kayar. yani yukarda 3 hücre olsaydı biz colspan=”2″ yazsaydık olmazdı tabi.

Şimdilik anlatacaklarım bu kadar.

Oldu html’ler…

* Web yönetimli dinamik site - Tekir
* Message2visitor
* Hatırlatıcı - C# uygulaması
* Server side - Client side programming ~ Sunucu taraflı - Kullanıcı taraflı programlama
* koütik site ve üyelik yönetim sistemi
* Wiki kurulumu
* Thunderbird nedir,nasıl kullanılır, adım adım resimli anlatım
* Wordpress ziyaretçiye mesaj eklentisi
* Wordpress'te spam yorumlara ölüm

Yazıyı oyla

(4 oy,3 üzerinden ortalama:2,75)

Loading ...

Etiketler:<anlatım-html-tablo>

Yazılar

Yorumlar

Bu yazı bugün 2 kez, toplam 4.582 kez okundu.

12 Yorum : “ html – tablolar ”

# 1 EMRAH ÜSTÜN | html > tablo içinde tablo yapmak demiş ki:
17 Mayıs, 2007 saat 13:27

[...] istatistiklerini incelerken şuraya Google’dan “html tablo içinde tablo yapmak” diye aratarak baya bir kişinin [...]

# 2 emrahustun demiş ki:
17 Mayıs, 2007 saat 13:55

htm l> tablo içinde tablo yapmak > burada

# 3 oyyla.com demiş ki:
17 Eylül, 2007 saat 23:14

Html tablo oluşturmak…

Html kullanarak tablo oluşturmak ile ilgili ayrıntılı anlatım….

# 4 yasemin demiş ki:
5 Ekim, 2008 saat 19:52

içi renkli boş tablo yapmak istiyorum ama olmuyor nasıl yapacagını bilen varsa soylermi
4 tablo olacak 4 üde başka renk olacak

# 5 emrahustun demiş ki:
5 Ekim, 2008 saat 20:11

@yasemin,
sorunu tam anlayamadım. boş tablo yapamazsın. içine en fazla boşluk karakteri olan koyabilirsin.
peki 4 tablo derken? nasıl yani?
sorunu biraz daha açıklarsan yardımcı olayım.

# 6 burcu demiş ki:
6 Kasım, 2008 saat 14:20

yasemin border= 0 yaparak sanırım oluşturabilirsin bahettiğini tam anlamasamda:)

# 7 Necmi Akgül demiş ki:
15 Mayıs, 2009 saat 02:02

Sevgili Emrah,
Ben eğitimciyim. Harika anlatmışsın.Usta bir öğretmen gibi.
Şimdi senden bir ricam var.Nasıl yardımcı olursun bilemem. Var sayki, bir siten var, adın Emrah, maus Emrahın üstüne gelince yukarda veya yanda bir tablo açılsın, bu tablonun boyutlarını ben belirleyim ve içine yazı yazabileyim.

Haydi yardımcı ol bana, nasıl olacak, Site yapmayı öğreniyorum da, buna ihtiyacım var, ama yapamadım.

Anlatımın güzel, tebrik ediyorum. Devam et lütfen, ben tablolarla ilgili çok faydalandım. Artık kodlarla yapacam her tabloyu. Bir sorum daha var ama, onu yazmaya çekindim, başka zaman onu da yazarım.

Selam ve sevgilerimle..

# 8 emrahustun demiş ki:
15 Mayıs, 2009 saat 09:20

Teşekkürler Necmi Hocam,

fare hareketlerine göre ekrandaki görünümü değiştirmek için javascript kullanmak gerekiyor. O da bambaşka bir konu. Biraz ustalık ister. Hatta genelde javascript ve div kullanarak yapılır. Google’da -javascript açılır menü- gibi bir arama yaparsanız, fare biryere gelince birşeyleri açan kod örneklerini bulabilirsiniz.

Kolay gelsin.

# 9 Achille Frederic demiş ki:
28 Haziran, 2009 saat 22:44

Merhaba Emrah Kardesim,

Sana derin ve benim icin cok anlamli bir soru soracagim, cesitli programlama dillerine elimöden geldigi kadar calistim temel bir bilgi sahibi olmak icin ,yani calisma mantiklari hakkinda php,asp,assembly,C ,C++, C# , Java ,ADA. Amacim yanlis anlama dunun cocugu gelmis benim yillarimi vererek ogrendigim programlamayi bir kac ayda ogrenebilecek falan ..yok oyle bisey sadece ilerde bir egitime baslarsam bunlari faydasi olacagina inaniyorum herneyse asil sorum su ..kafami cok kurcaliyor .. css zaten su an karisik geliyor bana bende sadece pratik yapmak acisindan html kodlariyla sadece gorsel bir site yapma amacindayim tipkigazeteler gibi falan okumaya yonelik yada resim ve tanitim amacli .. bu yuzden bugun makinaya otudum ve neler yapabilecegime baktim ki bayagi bir koyvermisiz .. senden sunu rica ediyorum .. html tagiyla acip bitirdigimiz bu siteyi ve site elemanlarini bir arada tutacak kodu istiyorum sanirim olmadi ..soyle soyleyeyim ..

butun islemler burada yapiliyor ve hersey body icerisinde yer aliyor ..ben bir site yaptim hic cerceve kullanmadim ama yaptigim yazilari ve resimleri bir cercevesi olsun yani sitenin ana bir govdesi olsun ..anlayacagin border u olsun amam bir turlu bu yazilari bordure sokamadim .. cok basit birsey sanirim ama 1 saaten fazla oldu kodlari duzene sokamadim ..yardimci olursan sevinirim ..birde ornek calisma yaparsan cok iyiy olur ..calismalarinda basarilar .. Simdiden tessekkur ederim.

ornek

# 10 emrahustun demiş ki:
30 Haziran, 2009 saat 13:18

@Achille Frederic,
sorunu çok iyi anlayamadım açıkçası. body içine border’ı olan bir table koyarsın, bütün içeriği de o table içine koyarsın. Bu senin ana tablon olur, herşeyi barındırır.
(Soruyu anlayamadım yani )

# 11 Achille Frederic demiş ki:
4 Temmuz, 2009 saat 14:53

aslinda tam cevabi buydu amam kucuk bir ornek yaparak bana bunu nasil yapacagimi gozterebilirmisin.. yanliz bentablonun css de yapildigi gibi kenar tablonun golgeli olmasini istiyorum yani disa donuk golgeli olsun ,sanki tablo on plandaymis gibi bunu nasil yapabilirim daha dogrusu bununla ilgili bana bilgi verebilirmisiniz?

# 12 Gökay AYDIN demiş ki:
12 Ekim, 2009 saat 16:48

Çok güzel Anlatmışın Teşekkür ederim ….

Askerlik süresince yorumlar kapalı.

Günlüğüm

Arşiv

EMRAH ÜSTÜN

html – tablolar

12 Yorum : “ html – tablolar ”