Web Tasarım Dersleri Tablo Hücrelerini Birleştirmek Ders 15
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ş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.
Kategoriler :
Anahtar Kelimeler : 
Verdiğiniz Bilgiler Taktir e sayan bilgiler. Barış bey emeğinize teşekkür ederim. Bundan sonra favori sitelerimden birisiniz..