HTML TABLO UYGULAMASI 2 - FARKLI HÜCRE İÇERİKLERİ

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...