Webmaster
Tasarım Dersleri
Kullanıcı girişi
Kimler çevrimiçi
Son yorumlar
- tamadır teşekkür ederim :)
1 hafta 6 days önce - CVP:arkadaşım sen iyi niyetimi
1 hafta 6 days önce - arkadaşım sen iyi niyetimi
2 weeks 9 hours önce - CVP:şu cevabınn
2 weeks 1 gün önce - şu cevabınn
2 weeks 1 gün önce - CVP:Makaleniz hakkında
2 weeks 2 days önce - Makaleniz hakkında
2 weeks 2 days önce - oldukça güzel görünüyor. Bİz
3 weeks 21 hours önce - sanal kontör
3 weeks 4 days önce - Cozum bulundu mu?
5 weeks 4 days önce
Etiket bulutu
HTML Tablolar
TABLOLAR
Genel kullanımı;
Öncelikle <table>...</table> etiketlerini yazıyoruz,. <tr> etiketi
ile satır açıyoruz; <td> etiketi sütun açıyoruz.
<table>
<tr>
<td> … </td>
</tr>
</tablo>
Örnekler;
hücre
<table border="1">
<tr>
<td>hücre</td>
</tr>
</table>
hücre1
hücre2
<table border="1">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
</table>
hücre1
hücre2
<table border="1">
<tr>
<td>hücre1</td>
<tr>
</tr>
<td>hücre2</td>
</tr>
</table>
hücre1
hücre2
hücre3
hücre4
<table border="1">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
<tr>
<td>hücre3</td>
<td>hücre4</td>
</tr>
</table>
<table border= “1”> Bu parametre hücrenin ve tablonun etrafındaki
çerçevenin kalınlığını ayarlamak için kullanılır.
<table width=”100”> Tablonun pixel cinsinden genişliğini ayarlamak
için kullanılır.
<table height=”50”> Tablonun pixel cinsinden yüksekliğini ayarlamak
için kullanılır.
<table cellspacing=”2”> Tablonun içerisindeki hücrelerin,
birbirlerinden ve tablo sınırlarından uzaklığını pixel olarak
ayarlamak için kullanılır.
<table cellpadding=”5”> Hücrelerin içerisindeki metin, resim, v.s
gibi web sayfası öğelerinin hücre sınırlarından uzaklıklarını
ayarlamak için kullanılır.
<table bgcolor=”#ffff00”> Tablonun genel arka plan rengini
belirlemek için kullanılır.
<table align=”left”> ; <table align=right>; <table align=center>
Tablonun konumunu ayarlamayı sağlar.
<table background=”tugla.gif”> Tablonun arkasına resim konulabilir.
< table bgcolor=”#ffff00” > Tablonun arka zemin rengini ayarlar.
<td> Takısının Parametreleri
Burada parametre kullanarak Tablo’nun hücrelerinin içeriğini sağa,
sola veya ortaya yaslayabilir. Hücrelerin arka plan renklerini ayrı
ayrı değiştirebiliriz.
<td bgcolor=”#00ffff”> Hücrenin arka plan rengini, diğer hücrelerden
veya tablonun genel arka planından bağımsız olarak değiştirir.
<td width=”250”> Hücre genişliğini belirlemek için kullanılır.
< td height=”50”> Hücre yüksekliğini belirlemek için kullanılı
<td colspan=”2”> Bu hücrenin genişliğinin 2 sütun genişliğinde
olduğunu gösterir.
<td rowspan=”2”> Bu hücrenin yüksekliğinin 2 satır yüksekliğinde
olduğunu gösterir.
<td background=”hasan.gif”> Hücrenin arka planına bir resim
yerleştirir.
<td align=”left”>, <td align=”right”>; <td align=”center”> Hücrenin
içerisinde yer alan metin, resim, grafik vs. gibi web sayfası
öğelerini sola, sağa veya ortaya hizalayabiliriz.
<td valign="top”>, <td valign="middle”>, <td valign="bottom”>, <td
valign="baseline”> sadece <td> ile birlikte kullanılır, hücre
içeriğini dikey olarak tablonun tepesine(top), ortasına(middle) veya
tabanına(bottom) dayar.
Not : Align parametresi hücre içinde yatay hizalama yapar. Valign
parametresi hücre içinde düşey hizalama yapar.
Not: <table border=“1”> takısı kullanıldıgında table ve td takısında
<td bordercolor:#ff0000”> veya <table bordercolor:#ff0000”>
paremetresi kullanıldıgında çerçevenin tüm kısımları aynı renge
boyanıyor. Bordercolor yerine <BORDERCOLORDARK=”#ff0000”>
kullanılırsa tablo çerçevesinin gölgeli kısmını <BORDERCOLORLIGHT=”#ff0000”>
kullanılırsa çerçevenin ışığa bakan kısmını renklendiriyor.
Kenarlık renklerinde ayarlama yapmak
A.) Tablomuzun sadece bazı yerlerindeki iç kenarlıkları da yok
etmemiz mümkün. Bunu <table> tagının "rules" elemanı ile
yapabiliriz.
"Rules" Elemanının parametreleri.:
• none : Tüm iç kenarlıkları yok eder.
• rows : Dikey iç kenarlıkları yok eder.
• cols : Yatay iç kenarlıkları yok eder.
Örnek;
<table border="1" bordercolor="blue" rules="cols" cellpadding="5"
cellspacing="0">
<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>
<tr>
<td>3.satır 1.sütun</td>
<td>3.satır 2.sütun</td>
</tr>
</table>
Tarayıcınızda şöyle gözükecektir:
1.satır 1.sütun
1.satır 2.sütun
2.satır 1.sütun
2.satır 2.sütun
3.satır 1.sütun
3.satır 2.sütun
B.) Tablomuzun sadece bazı yerlerindeki dış kenarlıkları yok etmemiz
mümkün. Bu özelliği <table> tagının "frame" elemanı sayesinde
gerçekleştiririz.
Frame" Elemanının Parametreleri.
• void : Tüm dış kenarlıkları yok eder.
• above : Sağ,sol ve alt kenarlığı yok eder.
• below : Sağ,sol ve üst kenarlığı yok eder.
• hsides : Sağ ve sol kenarlıkları yok eder.
• vsides : Üst ve alt kenarlıkları yok eder.
• rhs : Üst, alt ve sol kenarlığı yok eder.
• lhs : Üst, alt ve sağ kenarlığı yok eder.
Örnek;
<table border="1" bordercolor="red" frame="vsides"
cellpadding="5" cellspacing="0">
<tbody>
<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>
<tr>
<td>3.satır 1.sütun</td>
<td>3.satır 2.sütun</td>
</tr>
</tbody>
</table>
Tarayıcınızda şöyle gözükecektir:
1.satır 1.sütun
1.satır 2.sütun
2.satır 1.sütun
2.satır 2.sütun
3.satır 1.sütun
3.satır 2.sütun
Colspan ve Rowspan kullanımı ile ilgili örnekler
1
2
3
4
5
6
7
8
9
<table border="1"
cellpadding="12">
<tr><td colspan="2">1</td><td>2</td><td>3</td></tr>
<tr><td colspan="3">4</td><td>5</td></tr>
<tr><td>6</td><td>7</td><td>8</td><td>9</td></tr>
</table>
1
2
6
3
4
5
7
8
9
<table border="1"
cellpadding="12">
<tr><td>1</td><td>2</td>
<td rowspan="3">6</td><td>3</td></tr>
<tr><td rowspan="2">4</td><td>5</td><td>7</td></tr>
<tr><td>8</td><td>9</td></tr>
</table>
Anket
Son Konular
2012-03-22 19:47 - Geliştirdiğin kodları satmak ister misin
2012-02-12 23:21 - SMF forumu vbulletin foruma aktarmak
2011-12-14 21:50 - Motorlu araçlar otomobil vergisi sorgulama
2011-12-14 21:47 - Sorgulamalar
2011-12-11 14:33 - Ben az önce ne arayacaktım
2011-09-10 22:51 - DSLR Fotograf Makinası sınıflandırması
2011-09-09 17:33 - ‘Crop Factor’ Nedir, hakkında bilgi
2011-09-09 17:30 - Fotograf Rehberi
2011-08-20 21:30 - Samsung LEDTV'lerde .SRF ve XFS süprizi
2011-08-19 00:45 - 2011 yılının web tasarım trendleri
2011-04-09 20:18 - Alan adları gerçek isim sahiplerine verilecek!
2011-01-13 01:43 - SEO İçin Dikkat Edilmesi Gereken Hususlar
2011-01-13 01:42 - Meta tag SEO Optimization
2011-01-13 01:41 - Google Adsense Hakkında Detaylı Bilgi
2011-01-13 01:40 - Soru Ve Cevaplar ile Google Adsense
2011-01-13 01:39 - Arama motoru Google ve Pagerank
2011-01-13 01:38 - Seo Sözlüğü
2011-01-13 01:37 - Google Arama Özellikleri
2011-01-13 01:36 - Adsense Reklam Yerleşimi
2011-01-13 01:35 - Robots.txt Dosyası Kullanım Robotları Yölendirme Kontrol
2011-01-13 01:34 - Sitenizin Google ve Web deki Yeri
2011-01-13 01:33 - Arama Motoru Bilgi ve İpuçları
2011-01-13 01:31 - Arama Motorları Teknikleri
2011-01-13 01:29 - Google Pagerank Detaylı Anlatım
2011-01-13 01:27 - Sitenize Ziyaretçiler En Çok Hangi Kelimeler İle Gelmiş
2011-01-13 01:25 - Pagerank Nedir?
2011-01-13 01:19 - Fireworks Shadow and Glow
2011-01-13 01:18 - Fireworks Sharpen
2011-01-13 01:16 - Fireworks Other
2011-01-13 01:13 - Fireworks Blur
2011-01-13 01:09 - Fireworks Bevel and Emboss
2011-01-13 01:05 - Fireworks Adjust Color
2011-01-13 01:03 - Fireworks Save as Style
2011-01-13 00:58 - Fireworks Text Menüsü
2011-01-13 00:54 - Fireworks Select Menüsü
2011-01-13 00:54 - Fireworks Modify Menüsü
2011-01-13 00:51 - Fireworks View Menüsü
2011-01-13 00:18 - Fireworks Edit Menüsü
2011-01-13 00:16 - Fireworks File Menüsü
2011-01-13 00:05 - İnternet - Web Tarayıcılar (Browser)
2011-01-13 00:04 - İnternet - Web Server Yazılımları
2011-01-13 00:03 - İnternet ve Web İlişkisi
2011-01-13 00:02 - İnternette Kullanılan Protokoller
2011-01-13 00:01 - İnternet - World Wide Web (WWW) Nedir?
2011-01-13 00:00 - İnternet - URL nedir?
2011-01-12 23:43 - İnternet Backorder Nedir?
2011-01-12 23:34 - İnternet - Virüs Nedir?
2011-01-12 23:32 - İnternet Paypal nedir? Nasıl Kullanılır?
2011-01-12 23:31 - İnternet - DNS Nedir?
Günün Konuları
CSS . html . css nedir . Linux . nasıl kurulur . internet . SCADA . MySQL nedir . domain piyasası . PHPRunner . PHPRunner kullanımı . PHPRunner hakkında bilgi . PHPRunner nedir . Top PHP Studio . Top PHP Studio indir . Top PHP Studio nedir . USB ADSL modem . kablosuz ağ . Ubuntu linux . Google Earth . Zone Alarm . CSS kodlama . HMI . HMI nedir . HMI nasıl kullanılır . Scada nedir . Scada nasıl kullanılır . Video . Cacti . Cacti nedir . Cacti kurulumu . Rsyslog . Rsyslog nedir . Rsyslog kurulumu . Nagios . Nagios nedir . Nagios kurulumu . Apache . Apache nedir . Apache kurulumu . MySQL kurulumu . Squid . Squid nedir . Squid kurulumu . Dansguardian . Dansguardian nedir . Dansguardian kurulumu . Postfix . Postfix nedir . Postfix kurulumu . Dovecot . Dovecot nedir . Dovecot kurulumu . Dbmail . Dbmail nedir . Dbmail kurulumu . OpenLDAP . OpenLDAP nedir . OpenLDAP kurulumu . ProFTP . ProFTP nedir . ProFTP kurulumu . Samba . Samba nedir . Samba kurulumu . BIND . BIND nedir . BIND kurulumu . dhcp3 server . DHCP . DHCP nedir . DHCP kurulumu . WIPO Kimdir . WIPO Nedir . WIPO . Aveamüzik Radyo . Sabit disk . Harddisk . Advanced Format nedir . kodlama .














Yeni yorum gönder