8
Kasım

Yazan: WEBMASTERYOLCU  |  Kategori: Uygulamalı Html Dersleri  |  Okunma: 32.717 Defa

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

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

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.



   Paylaş

1 Yorum yapılmış

  • Bahadır
    21 Aralık 2010 | Cevapla

    hocam şu mate kodu kafamı karıştırdı onunla alakalı bi açıklamada yapmamışsınız yaptıysanızda ben göremedim onun orda oluş sebebi ne öğrenebilirmiyim?

Yorum yapın