Tablo (Ders-22)

Java programlama dili hakkında yardım, sorun ve paylaşımlar.
Cevapla
Kullanıcı avatarı
UnreaL
Fast Friend
Fast Friend
Mesajlar: 207
Kayıt: 24-12-2005 17:26

Tablo (Ders-22)

Mesaj gönderen UnreaL »

Tablo Çerçeveleri

Kod: Tümünü seç

<html>
<head>
<title>Tablo parametreleri ve özellikleri</title>
<script language="JavaScript">

function cerceve(x,y)
{
switch(x)
{
case 1: tablo.frame=y;yazi1.innerHTML="frame: "+y; break
case 2: tablo.rules=y;yazi2.innerHTML="rules: "+y; break
tablo.x
}
}

</script>
</head>
<body>

Tablonun hücrelerine tıklayarak istediğiniz parametre değerini atayın<br><br>
<table id="tablo" border="1" bordercolor="black" cellspacing="0" cellpadding="0" width="720">
<tr>
<td onclick="cerceve(1,'above')"><b>frame=</b><em>"above"</em></td>
<td onclick="cerceve(1,'below')"><b>frame=</b><em>"below"</em></td>
<td onclick="cerceve(1,'vsides')"><b>frame=</b><em>"vsides"</em></td>
<td onclick="cerceve(1,'hsides')"><b>frame=</b><em>"hsides"</em></td>
</tr><tr>
<td onclick="cerceve(1,'rhs')"><b>frame=</b><em>"rhs"</em></td>
<td onclick="cerceve(1,'lhs')"><b>frame=</b><em>"lhs"</em></td>
<td onclick="cerceve(1,'box')"><b>frame=</b><em>"box"</em></td>
<td onclick="cerceve(1,'border')"><b>frame=</b><em>"border"</em></td>
</tr><tr>
<td onclick="cerceve(1,'void')"><b>frame=</b><em>"void"</em></td>
<td onclick="cerceve(2,'rows')"><b>rules=</b><em>"rows"</em></td>
<td onclick="cerceve(2,'cols')"><b>rules=</b><em>"cols"</em></td>
<td onclick="cerceve(2,'all')"><b>rules=</b><em>"all"</em></td>
</tr><tr>
<td onclick="cerceve(2,'groups')"><b>rules=</b><em>"groups"</em></td>
<td onclick="cerceve(2,'none')"><b>rules=</b><em>"none"</em></td>
<td> </td>
<td> </td>
</tr></table><br><br>
<a id="yazi1">frame:</a><br>
<a id="yazi2">rules:</a>
</body>

</html>
Bu uygulamayla frame ve rules parametre kombinasyonlarını oluşturabiliyoruz. HTML ve CSS derslerinde bunun gibi daha birçok parametre ve stil özelliği görmüştük. Hepsini; DHTML dersindeki DOM başlığı altında anlatıldığı gibi, uygulayabiliyoruz.

Satır Dizisi ve Satır Komutları

Tablo satırlarını tabloismi.rows(satır no) dizisi ile bir tanımlayabiliyoruz. Örneğin beyaztablo.rows(0) komut ifadesiyle beyaztablo isimli tablonun birinci satırını belirtmiş oluyoruz. Satırların yüksekliğini height komutu ile, satırların yatay hizalama şeklini align komutu ile belirleyebiliriz. (Bunu daha önce olduğu gibi, <tr> koduna id parametresi ile isim verdikten sonra parametre atayarak da yapabiliriz.)

Kod: Tümünü seç

<html>
<head>
<title>rows dizisi</title>
<script language="JavaScript">

function satir()
{
var x=document.forms.form_satir.yuksek.selectedIndex
var y=document.forms.form_satir.hiza.selectedIndex
var z=document.forms.form_satir.satir_no.selectedIndex
tablo.rows[z].height=document.forms.form_satir.yuksek.options[x].text
tablo.rows[z].align=document.forms.form_satir.hiza.options[y].text
}

</script>
</head>
<body>

Aşağıdaki komutları ve bu komutları uygulayacağınız satır numarasını seçin ve düğmeye basın:<br>
<form name="form_satir">
height:
<select name="yuksek">
<option>10
<option>25
<option>50
<option>75
<option>100
</select>
    
align:
<select name="hiza">
<option>left
<option>center
<option>right
</select>
    
Satır no:
<select name="satir_no">
<option>1
<option>2
<option>3
<option>4
<option>5
</select><br><br>
<input type="button" value="bas" onclick="satir()"><br>
</form>
<table id="tablo" border="1" cellspacing="2" cellpadding="2" width="500">
<tr><td>satır1sütun1</td><td>satır1sütun2</td></tr>
<tr><td>satır2sütun1</td><td>satır2sütun2</td></tr>
<tr><td>satır3sütun1</td><td>satır3sütun2</td></tr>
<tr><td>satır4sütun1</td><td>satır4sütun2</td></tr>
<tr><td>satır5sütun1</td><td>satır5sütun2</td></tr>
</table><br><br>
</body>

</html> 
Uygulamada da görüldüğü üzere insertRow() ile sadece satır ekleriz ama satırların içine hücre ekleyemeyiz.
Hücre Dizisi ve Hücre Komutları

Tabloda önce satırlar, sonra satırların içinde hücreler tanımlanır. Tablodaki satırları rows dizisi ile ifade edilebileceğini görmüştük, şimdi de satırlardaki hücreleri cells dizisi ile ifade edeceğiz. cells dizisi rows dizisindeki hücreleri ifade ediyor: tablo_adi.rows[1].cells[0] kodu ile tablodaki ikinci satırın ilk hücresini belirtmiş oluruz.

rows dizisine align ve height parametrelerini komut olarak atayabiliyorduk, cells dizisine komut olarak atanabilen parametreler şunlardır: align, valign, colSpan ve rowSpan. Aşağıdaki uygulama ile colspan parametresinin cells dizisine nasıl komut olarak atandığını göreceğiz:

Kod: Tümünü seç

<html>
<head>
<title>Colspan Parametre Komutu</title>
<script language="JavaScript">

function hucre()
{
var x=document.forms.form_hucre.secenek.selectedIndex
tablo.rows[0].cells[0].colSpan=document.forms.form_hucre.secenek.options[x].text
tablo.rows[0].cells[1].colSpan=document.forms.form_hucre.secenek.options[4-x].text
}

</script>
</head>
<body>

<form name="form_hucre">
Hücre1 için <b>colspan</b>:
<select name="secenek">
<option>1
<option>2
<option>3
<option>4
<option>5
</select>
<input type="button" value="bas" onclick="hucre()"><br>
</form>
<table id="tablo" border="1" cellspacing="2" cellpadding="2" width="500">
<tr><td colspan="3">hücre1</td><td colspan="3">hücre2</td></tr>
<tr>
<td>hücre3</td><td>hücre4</td>
<td>hücre5</td><td>hücre6</td>
<td>hücre7</td><td>hücre8</td>
</tr></table>

</body>
</html> 


Volkan Derinbay'a tşkler.
Cevapla
  • Benzer Konular
    Cevaplar
    Görüntüleme
    Son mesaj

Kimler çevrimiçi

Bu forumu görüntüleyen kullanıcılar: Hiç bir kayıtlı kullanıcı yok ve 1 misafir