2.525 kez okundu

Web Tasarım Dersleri Tablo Hücrelerini Birleştirmek Ders 15

10 10 2.525 kez okundu incelendi

Tablo hücrelerini birleştirmeyi görecez nedir bu birleştirme dersek 2 yada daha fazla hücrenin tek hücre olarak birleştirilmesidir.

Colspan

Colspan etiketi arkadaşlar tablo içerisindeki aynı satırda yer alan hücreleri birleştirmek amacıyla kullanabileceğimiz bir etiket yani diyorki 2 satır 3 sütun (hücre) lik bir tablomu olsun 1 satırda yer alan sütunlar (hücreleri) tek sütun yapabileceğimizi belirtiyor.

Colspan Uygulaması

Evet arkadaşlar uygulamamız 2 satır 3 sütunluk bir tablo olacak ama ilk satır 3 sütun yerine tek sütun olmasını istedim normalde bunu başka türlü yapamazsınız colspan etiketi ile yapabiliriz.Aşağıdaki kodları boş bir not defteri açarak yazın arkadaşlar ve farklı kaydet diyerek dosya adı satirbirlestirme.html olarak masaüstüne kaydedin.

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Web Tasarım Dersleri Tablo Hücreleri Birleştirme Ders 15</title>
</head>

<body>

<table border=”1″>
<tr align=”center”>
<td colspan=”3″ width=”200″>1</td>
</tr>

<tr align=”center”>
<td width=”50″>2</td>
<td width=”100″>3</td>
<td width=”50″>4</td>
</tr>
</table>

</body>
</html>

Html Sütun BirleştirmeHtml Sütun Birleştirme

Evet arkadaşlar hemen özetliyim ilk satırda gördüğünü gibi tek sütn kodu görünüyor ama net incelendiğinde ilk etapta 3 sütun olduğu colspan ile 3ü birleştirilip tek sütun haline getirildiği görülmekte isteseydik 2 sütunda yapabilirdik 2 sütunu birleştirip tekine sabit bırakabilirdik bunuda uygulama olarak yapınız.

Evet şimdi sütunları birleştirmeyi öğrendik ya peki aşağı doğru satırları birleştirmeyi nasıl yapacak dersek hemen onuda anlatalım.

Rowspan

Rowspan arkadaşlar aynı sütundaki hücreleri birleştirmek için faydalanabiliriz. Yukarda colspan için anlattığım özellikler bu etiket içinde geçerlidir.

Rowspan Uygulaması

Şimdi arkadaşlar uygulamamız yine 2 satır 3 sütunluk bir tablo ile yapalım ilk sütunları birleştirelim aşağıdaki kodları yazıp farklı kaydet diyerek tablobirlestirme.html olarak masaüstüne kaydedin inceleyin.

<html>
<head>
<title>Web Tasarım Dersleri Colspan Rowspan Ders 15</title>
</head>

<body>

<table width=”200″ border=”1″>
<tr align=”center”>
<td rowspan=”2″ width=”100″>1</td>
<td width=”80″>2</td>
<td width=”50″>3</td>
</tr>

<tr align=”center”>
<td width=”80″>4</td>
<td width=”50″>5</td>
</tr>
</table>

</body>
</html>

Tablo BirleştirmeTablo Birleştirme

Evet arkadaşlar uygulamamızda ilk sütunları tek sütun haline getirmeyi gösterdik

Bugünkü dersimiz bu kadar arkadaşlar bir sonraki dersimizde tablo ve tablo içeriğindeki hücreleri hizalama mesafeleri görüp artık site uygulamasına geçecegiz hosting,cpanel, ftp ile site sayfası oluşturmayı ve internette yayınlamayı birlikte göreceğiz uygulamalar yapacağız.

Gelen aramalar :

Paylaş !

1 Yorum yapıldı “Web Tasarım Dersleri Tablo Hücrelerini Birleştirmek Ders 15”

  1. Bölgesel Zayıflama dedi ki:

    Verdiğiniz Bilgiler Taktir e sayan bilgiler. Barış bey emeğinize teşekkür ederim. Bundan sonra favori sitelerimden birisiniz..

Yorum yap

Önceki yazıyı okuyun:
Web Tasarım Dersleri Tablo Boyutlandırma ve Hizalama

Web Tasarım Dersleri Tablo Boyutlandırma ve Hizalama Bu dersimiz ise tabloların boyutlandırılmasını ve sayfamızda hizalandırmayı göreceğiz.

Kapat
Barış Ozcan Facebook Sayfasi
Barış Ozcan Twitter