HTML Tablo Nedir?

HTML Tablo, Web sitelerinde daha çok eski zamanlarda kalan web sitesi yapmak için kullanılan mimaridir. Html Tablo Örnekleri: Satır ve sütunlardan oluşan bu belirli ölçülerde hücrelerin olduğu aynı zamanda hücrelere yazı rengi, arka plan, çerçeve kalınlığı gibi bir çok özelliği de ekleyebileceğiniz html yapısıdır.  Html Tablo web sitesi yapımında oldukça işinize yarar tablonun sizlere bir çok kullanım alanından bahsedeceğim.

HTML tablo günümüzde yaygın bir şekilde kullanılmamaktadır. Bunun sebebi alternatif responsive yazılımların çıkması ve mobil cihazların artmasından kaynaklanan uyum sorunlarının olmasıdır. Bu nedenle kullanıcıların mobil görünüme sahip olmayan bir web sitesinde zaman geçirmeleri düşünülemez bile. Bunun yanı sıra hemen hemen her makalemizde bahsettiğimiz gibi arama motorları için tabloların kullanımı pek iyi sayılmamakla birlikte web sitemizin bazı bölümlerinde kullanılabilir.

Web Sitesinde Tablo Kullanımı

Web sitemizde tablo kullanımını sitenin ana iskeletini çıkartırken önerilmez ancak web sitemizin ana şablonunu dinamik bir şablondan yani responsive bir şablondan çıkartıp diğer aşağıda belirttiğimiz yerlerini html tablodan destek alarak yapabiliriz.

  • İletişim Formları.
  • Düzen gerektirecek alt alta maddeler.
  • Yazıyla fotoğrafın tam olarak yan yana gelmesini istediğimiz yerlerde kullanabiliriz.
  • Tablo düzeninde saat veya tarih aralığı belirtilen alanlar.
  • Giriş (Login) sayfalarında alt alta düzen için tablo kullanılabilir.

Yukarıdaki gibi web sitenizin şablonunu oluşturmadığınız yerlerde vb durumlarda gerçekten HTML tablodan verim alabilirsiniz.

 

HTML Tablo Örnekleri

HTML Tablo Örneklerine gelecek olursak sizlerle bu yazımda temelde kullanılan özellikleri belirteceğim kodlarını da sizinle paylaşacağım HTML tablo örnekleri yapacağım. Aşağıda maddeler halinde hangi tablo örneklerini yapacağımı belirteceğim.

  • Tablo oluşturma
  • Tabloda 2 satır oluşturma
  • Tabloda 2 sütun oluşturma
  • Standart özellikli bir tablo (2 satır 2 sütun)
  • Tablo çerçevelerine renk verme
  • Tablo çerçevesi kalınlığı ayarlama
  • Tablo arka plan özelliği verme
  • Tablo genişliği belirleme
  • Tablo hücre genişliği
  • Tablo uzunluğu belirleme
  • Tabloda sütun birleştirme örneği
  • Tabloda satır birleştirme örneği
  • Başlıklı tablo oluşturma
  • İç içe tablo kullanımı

Tablo örneklerimize artık başlayabiliriz.

Tablo oluşturma

Tablo oluşturma oldukça basittir aşağıda kodla belirtiyor olacağım. Tüm tablo kodlarımız oluşturduğumuz tablo etiketinin içerisine yazacağız.

<table></table>

 

Tabloda 2 Satır oluşturma

Tablo oluşturduğumuza göre alt alta 2 satır olacak şekilde tablomuzu oluşturalım.

<table>
	<tr>
		<td>Satır 1</td>
		<td>Satır 2</td>
	</tr>
</table>

 

Tabloda 2 Sütun oluşturma

Tabloda Satır oluşturduğumuza göre artık alt alta 2 adet sütun oluşturalım.

<table>
	<tr>
		<td>Sütun 1</td>
	</tr>
	<tr>
		<td>Sütun 2</td>
	</tr>
</table>

 

Standart Özellikli Bir Tablo

Tablolarımızı satır ve sütun olarak eklediniz ve bunları öğrendiğimize göre artık sıra bir sonraki adıma yani 2 satır 2 sütun olacak şekilde tablo oluşturmaya geldi. Html tablo örnekleri olarak kullanılabilir.

<table>
	<tr>
		<td>Deneme Hücre 1</td>
		<td>Deneme Hücre 2</td>
	</tr>
	<tr>
		<td>Deneme Hücre 3</td>
		<td>Deneme Hücre 4</td>
	</tr>
</table>

 

Tablo Çerçevelerine Renk Verme

Tablo çerçevesine renk vermek için “bordercolor” özelliğini kullanmamız gerekmektedir. Bir örnekle daha anlaşılır yapalım. Html tablo örnekleri olarak kullanılabilir.

<table border="1" bordercolor="orange">
	<tr>
		<td>Deneme Hücre 1</td>
		<td>Deneme Hücre 2</td>
		<td>Deneme Hücre 3</td>
	</tr>
	<tr>
		<td>Deneme Hücre 4</td>
		<td>Deneme Hücre 5</td>
		<td>Deneme Hücre 6</td>
	</tr>
</table>

 

Tablo Çerçevesi Kalınlığı Ayarlama

Tablomuza renk vermemiz için “border” özelliğini kullanmalıyız bu özellik genellikde çerçevenin dikkat çekmesi veya okunmasını arttırmak için kullanılmaktadır. Html tablo örnekleri olarak kullanılabilir.

<table border="2" bordercolor="red">
	<tr>
		<td>Deneme Hücre 1</td>
		<td>Deneme Hücre 2</td>
	</tr>
	<tr>
		<td>Deneme Hücre 3</td>
		<td>Deneme Hücre 4</td>
	</tr>
</table>

 

Tablo arka plan özelliği verme

Tablo arka plan özelliği ile arka plan fotoğrafı (background) ve rengi (bg-color) verebilirsiniz. Bunu size bir örnekle gösterelim. Html tablo örnekleri olarak kullanılabilir.

Arka plan fotoğrafı örneği:

<table border="2" background="..." >
	<tr>
		<td>Deneme Hücre 1</td>
		<td>Deneme Hücre 2</td>
	</tr>
	<tr>
		<td>Deneme Hücre 3</td>
		<td>Deneme Hücre 4</td>
	</tr>
</table>

Arka plan rengi örneği:

<table border="2" bgcolor="red" >
	<tr>
		<td>Deneme Hücre 1</td>
		<td>Deneme Hücre 2</td>
	</tr>
	<tr>
		<td>Deneme Hücre 3</td>
		<td>Deneme Hücre 4</td>
	</tr>
</table>

 

Html Tablo Genişliği Belirleme

Tablomuza genişlik vermek için aşağıdaki örneğe bakarak yardım alabilirsiniz. Uzunluğu ise height=”200px” yazarak ayarlayabilirsiniz. Html tablo örnekleri olarak kullanılabilir.

<table border="2" bgcolor="red" width="500px">
	<tr>
		<td>Deneme Hücre 1</td>
		<td>Deneme Hücre 2</td>
	</tr>
	<tr>
		<td>Deneme Hücre 3</td>
		<td>Deneme Hücre 4</td>
	</tr>
</table>

 

Html Tablo Hücre Genişliği

Tablonuzun hücresinin genişliğini belirlemeden width=”150px” şeklinde kullanabilirsiniz. Html tablo örnekleri olarak kullanılabilir.

<table border="2" bgcolor="red" >
	<tr>
		<td width="150px">Deneme Hücre 1</td>
		<td>Deneme Hücre 2</td>
	</tr>
	<tr>
		<td>Deneme Hücre 3</td>
		<td>Deneme Hücre 4</td>
	</tr>
</table>

Html Tablo Uzunluğu Belirleme

Tablonuzun uzunluğunu belirlemede height=”50px” şeklinde kullanabilirsiniz. Html tablo örnekleri olarak kullanılabilir.

<table border="2" bgcolor="red" >
	<tr>
		<td height="50px">Deneme Hücre 1</td>
		<td>Deneme Hücre 2</td>
	</tr>
	<tr>
		<td>Deneme Hücre 3</td>
		<td>Deneme Hücre 4</td>
	</tr>
</table>

 

Html Tabloda Sütun Birleştirme Örneği

Tabloda 2 satırı birleştirme özelliğini kullanabilmek için aşağıdaki örneği uygulayabilirsiniz. Html tablo örnekleri olarak kullanılabilir.

<table border="2" bgcolor="red" >
	<tr>
		<td rowspan="2">Deneme Hücre 1</td>
		<td>Deneme Hücre 2</td>
	</tr>
	<tr>
		<td>Deneme Hücre 4</td>
	</tr>
</table>

 

Html Tabloda Satır Birleştirme Örneği

Tabloda 2 sütun birleştirme özelliğini kullanabilmek için aşağıdaki örneği uygulayabilirsiniz. Html tablo örnekleri olarak kullanılabilir.

<table border="2" bgcolor="red" >
	<tr>
		<td colspan="2">Deneme Hücre 1</td>
	</tr>
	<tr>
		<td>Deneme Hücre 3</td>
		<td>Deneme Hücre 4</td>
	</tr>
</table>

 

Html Başlıklı Tablo Oluşturma

Tablolara başlık özelliği ekleme. Html tablo örnekleri olarak kullanılabilir. Html tablo örnekleri olarak kullanılabilir.

<table border="2">
	<tr>
		<th>Başlık 1</th>
		<th>Başlık 2</th>
	</tr>
	<tr>
		<td>Deneme Hücre 1</td>
		<td>Deneme Hücre 2</td>
	</tr>
	<tr>
		<td>Deneme Hücre 3</td>
		<td>Deneme Hücre 4</td>
	</tr>
</table>

Html İç İçe Tablo Kullanımı

İç içe 2 veya daha fazla tablo kullanmak için aşağıdaki örneği inceleyin. Html tablo örnekleri olarak kullanılabilir.

<table border="2">
	<tr>
		<th>Başlık 1</th>
		<th>Başlık 2</th>
	</tr>
	<tr>
		<td>Deneme Hücre 1</td>
		<td>Deneme Hücre 2</td>
	</tr>
	<tr>
		<td>Deneme Hücre 3</td>
		<td>
			<table border="2">
				<tr>
					<th>Başlık 1</th>
					<th>Başlık 2</th>
				</tr>
				<tr>
					<td>Deneme Hücre 1</td>
					<td>Deneme Hücre 2</td>
				</tr>
				<tr>
					<td>Deneme Hücre 3</td>
					<td>Deneme Hücre 4</td>
				</tr>
			</table>
		</td>
	</tr>
</table>

 

Yukarıdaki örnekleri anlattığım gibi yaptığınız taktirde Web siteniz için olumlu sonuçlar alabilirsiniz.

HTML Tablo Örnekleri