HTML'de Çerçeveler ve Tablolar

Cryptograph 02.05.201315:07 HTML & CSS 8676    
Facebookta Paylaş

Çerçeveler tarayıcımızda birden fazla html döküman açmamızı sağlar. Her çerçeve de ayrı bir html sayfa vardır ve bunların hepsi birbirinden bağımsızdır.
Dezavantajları;

  • İstenilen sayfanın yazıcıya gönderilmesi zordur
  • Her sayfayı takip etmek zordur
Frameset etiketi
<frameset> sayfanın hangi biçimde çerçeveye ayrılacağını belirler, satır veya sütun olarak belirlenir.

Frame etiketi
Her bir çerçevede hangi dökümanın görüntüleneceğini belirtir.

<frameset cols="30%,70%">
   <frame src="frame_1.htm">
   <frame src="frame_2.htm">
</frameset>
Burada iki sütunlu bir çerçeve belirlenmiş, ilk çerçeve için tarayıcının %30 u ikinci çerçeve için tarayıcının %70 i ayrılmıştır.
%30 luk alana frame_1.html, %70 lik alana da frame_2.html dökümanları çağırılmıştır.

Çerçeveler günümüz standartlarında kullanılmayan, W3C tarafından kullanımdan kaldırlmış bir etikettir, bunun yerine daha çok tablolu sayfalar ya da daha da gelişmişi, tablo kullanmadan <div> ler ile yapılan sayfalar kullanımaktadır. <div> leri css ile birlikte anlatacağım.


Tablolar
Table etiketi ile belirlenir, tr ile satırlara, td ile de sütunlara bölünür.
<td> nin anlamı "table data" dır, yani veri hücresi, tablo içerisine eklenecek olan nesneler (resim, paragraf, form elemanları vs) td etiketinin içinde yazılır.

<table border="1">
	<tr>
		<td> 1. Satır, 1. Hücre </td>
		<td> 1. Satır, 2. Hücre </td>
   </tr>
   <tr>
		<td> 2. Satır, 1. Hücre </td>
		<td> 2. Satır, 2. Hücre </td>
	</tr>
</table>

Tablonun ekran çıktısı
1. Satır, 1. Hücre 1. Satır, 2. Hücre
2. Satır, 1. Hücre 2. Satır, 2. Hücre


border parametresi ile kenarlık belirttik, <tr> etiketleri her bir satırı belirtmekte, td ise sütunları, ya da diğer bir değişle hücreleri belirtmekte.


Tablolarda Hücre Birleştirme

Hücre birleştirme iki şekilde olmaktadır: satır birleştirme ve sütun birleştirme.

<table border="1">
	<tr>
		<td> 1. Satır, 1. Hücre </td>
		<td> 1. Satır, 2. Hücre </td>
       <td> 1. Satır, 3. Hücre </td>
   </tr>
   <tr>
		<td> 2. Satır, 1. Hücre </td>
		<td> 2. Satır, 2. Hücre </td>
       <td> 2. Satır, 3. Hücre </td>
	</tr>
    <tr>
		<td> 3. Satır, 1. Hücre </td>
		<td> 3. Satır, 2. Hücre </td>
       <td> 3. Satır, 3. Hücre </td>
	</tr>
</table>

1. Satır, 1. Hücre 1. Satır, 2. Hücre 1. Satır, 3. Hücre
2. Satır, 1. Hücre 2. Satır, 2. Hücre 2. Satır, 3. Hücre
3. Satır, 1. Hücre 3. Satır, 2. Hücre 3. Satır, 3. Hücre

şimdi bu 3x3 lük olan tablo da 1. satırın 1. hücresiyle 2. satırın 1. hücresini ve 3. satırın 1. hücresini; 3. satırın 2. hücresiyle 3. satırın 3. hücresini birleştirelim

<table border="1">
	<tr>
    	<td rowspan="3"> Birleştirilmiş satır </td>
       <td> 1. Satır, 2. Hücre </td>
       <td> 1. Satır, 3. Hücre </td>
   </tr>
   <tr>
       <td> 2. Satır, 2. Hücre </td>
       <td> 2. Satır, 3. Hücre </td>
   </tr>
   <tr>
       <td colspan="2">Birleştirilmiş sütun</td>
    </tr>
</table>
Birleştirilmiş satır 1. Satır, 2. Hücre 1. Satır, 3. Hücre
2. Satır, 2. Hücre 2. Satır, 3. Hücre
Birleştirilmiş sütun


colspan parametresi ile sütunlar birleştirilir
rowspan parametresi ile de satırlar birleştirilir.
Kaç tane satır veya sütunu birleştireceksek sayısını yazarız.

Okuyucu Yorumları (0 Yorum)

Söz Sırası Sizde

​​​​​​​​​​​​​​​​​​​​​​​​​

MERAK EDİLENLER

İLETİŞİM

  • alpay[at]cryptograph.gen.tr
  • İstanbul ikametgah