- Katılım
- 2 Ağustos 2010
- Mesajlar
- 393
- Reaction score
- 0
Selamun aleyküm arkadaşlar bu dersimizde tablo hücrelerini birleştirmeyi görecez nedir bu birleştirme dersek 2 yada daha fazla hücrenin tek hücre olarak birleştirilmesi bu derse geçmeden önce bir önceki dersimizi inceleme imkanı bulamayan arkadsaşlar aşağıdan göz atsınlar.
Bir Önceki Dersimiz: Web Tasarım Dersleri Tablo Boyutlandırma ve Hizalama Ders 14
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ş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ş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.
Derslerim yazılarım istediğiniz gibi paylaşabilirsiniz www.webmasteryolcu.com kaynek belirtmeniz koşuluyla.
Bir Önceki Dersimiz: Web Tasarım Dersleri Tablo Boyutlandırma ve Hizalama Ders 14
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ştirmeEvet 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ştirmeEvet 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.
Derslerim yazılarım istediğiniz gibi paylaşabilirsiniz www.webmasteryolcu.com kaynek belirtmeniz koşuluyla.