Html tablo etiketleri ve tablo oluşturma makalesinde, tablo yapısının eski web sitelerinin çatısını oluşturduğundan bahsetmiştim. Tablo hüzcreleri içerisinde sadece yazılar değil , herhangi bir içerikte eklenebilir; resim, tablo, liste vs gibi..
CSS kullanmadan HTML ile sayfa içeriklerini derli toplu düzenlemek, yerleştirmek tablolarla sağlanabilir. Yukarıdaki örnekte , tablo çatısı içerisinde , resiim , link ve tablo kullandık.
TABLO GENEL YAPI
Ana tabloya dikkat ederseniz 4 satır 4 sütüundan oluştuğunu göreceksiniz. 1. 3. ve 4. satırlarda sütunlar colspan="4" ile birleştirilirken , 2. satırda sütunlar ayrı ayrı içerik almışlar. Ayrıca daha güzel bir görünüm için kenarlık,kenarlık rengi , hücreler arası boşluk,hücre içi boşluk , genişlik ve hizalama aşağıdaki gibi yapılmış.
- 4x4 (4 satır 4 sütun)
- Yazı tipi : Calibri
- Kenarlık : 1
- Kenarlık rengi : #ddd
- Hücre içi boşluk : 30
- Hücreler arası boşluk : 0
- Genişlik : 90% (kısaltabilirsiniz)
- Hizalama : orta
<table border="1" cellpadding="30" cellspacing="0" width="90%" align="center" bordercolor="#ddd">
1. SATIR
Tablonun ilk satırında tüm hücreler birleştirilmiş , içerik ortalanmış ve WEB TABANLI UYGULAMA GELİŞTİRME başlığı yazılmış. Bunu H1 etiketi ile yazabiliiz.
Hizalama : Orta
Arkaplan rengi : #eee
Sütun birleştirme : 4
<!-- 1. SATIR -->
<tr>
<td colspan="4" align="center" bgcolor="#eee">
<h1> WEB TABANLI UYGULAMA GELİŞTİRME</h1>
</td>
</tr>
2. SATIR
Tablonun 2. satırında 4 sütun ayrı ayrı içerik ve almış genişlikleride eşitlenmiş. Sütunlarda H2 ile başlık , resim ve onun altında bir link eklenmiş. Sütun içeriği ortalanmış ve sütunun üst ve alttan daha fazla boşluk bırakması için <br> kullanılmış.
Sütun genişliği: 25%
Sütun hizalama : orta
Resim genişliği : 90%
<!-- 2. SATIR -->
<tr>
<td align="center" width="25%">
<br>
<h2> HTML </h2>
<img src="resim/html.jpg" alt="" width="90%" > <br><br>
<a href=""><b>HTML DERSLERİ İÇİN TIKLAYIN</b></a>
<br><br>
</td>
<td align="center" width="25%">
<br>
<h2> CSS </h2>
<img src="resim/css.jpg" alt="" width="90%" > <br><br>
<a href=""><b>CSS DERSLERİ İÇİN TIKLAYIN</b></a>
<br><br>
</td>
<td align="center" width="25%">
<br>
<h2> JAVASCRIPT </h2>
<img src="resim/js.jpeg" alt="" width="90%" > <br><br>
<a href="" ><b>JS DERSLERİ İÇİN TIKLAYIN</b></a>
<br><br>
</td>
<td align="center" width="25%">
<br>
<h2> PHP </h2>
<img src="resim/php.jpg" alt="" width="90%" > <br><br>
<a href=""><b>PHP DERSLERİ İÇİN TIKLAYIN</b></a>
<br><br>
</td>
</tr>
3. SATIR
Tablonun 3. satırında yine tüm hücreler birleştirilmiş , içerik ortalanmış ve AZ VE SADE KOD İLE TASARIM başlığı yazılmış. Bunu H2 etiketi ile yazabiliiz. Başlık altında rengi ve boyutu font etiketi ile ayarlanmış bir paragraf bulunuyor.
Hizalama : Orta
Sütun birleştirme : 4
Yazı rengi : #888
Yazı boyutu : 4
<!-- 3. SATIR -->
<tr>
<td colspan="4" align="center">
<h2>AZ ve SADE KOD İLE TASARIM</h2>
<font size="5" color="#888">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Blanditiis incidunt minima vitae, sed illum delectus? Officiis quas sit
mnis exercitationem voluptatem inventore, libero,
sequi repudiandae, adipisci eveniet enim quaerat quidem.
</p>
</font>
</td>
</tr>
4. SATIR
Tablonun 4. satırında yine tüm hücreler birleştirilmiş , içerik ortalanmış ve yeni bir tablo eklenmiş. Bu tablo 1 satır 4 sütun ve kenarlık,kenarlık rengi , hücreler arası boşluk,hücre içi boşluk , genişlik ile hizalaması aşağıdaki gibi ayarlanmış..
- 1x4 (1 satır 4 sütun)
- Kenarlık : 1
- Kenarlık rengi : #ddd
- Hücre içi boşluk : 15
- Hücreler arası boşluk : 20
- Genişlik : 80% (kısaltabilirsiniz)
- Hizalama : orta
Ayrıca tablonun sütunlarında strong ile kalın yazı kullanılmış ve yazılar sütunlara ortalanmış..
<!-- 4. SATIR -->
<tr>
<td colspan="4" align="center">
<!-- tablo içinde tablo-->
<table border="1" cellpadding="15" cellspacing="20" width="80%" align="center" bordercolor="#ddd">
<tr align="center">
<td><strong> SUBLIME TEXT</strong></td>
<td><strong>BOOTSTRAP</strong></td>
<td><strong>JQUERY</strong></td>
<td><strong>MYSQL</strong></td>
</tr>
</table>
</td>
</tr>
NOT : Uygulamanın mobil makale sayfasında daha düzgün görünebimesi için , sayfaya bir iki CSS özelliği ekledim. Tarayıcıda açıp, sayfa kaynağına baktığınızda görebilirsiniz. Onları eklemenize gerek yok, tasarımınız etkilenmeyecektir.
Görüşmek üzere...