Boş Hücre Ayarı: empty-cells

Tablolarımıza sağ ve sol kısımlarına ve gizlemek istediğimiz hücreleri gizleme tekniğini uygulamayı empty-cells özelliğinin amacı ve kullanım tekniğini dersi işliyoruz.

Boş Hücre Ayarı:empty-cells

Bir tabloya kenarlık degeri atadıgımızda bos olan
hücreler bu degeri görmez, bu durumu düzeltmek için bos olan hücreler
için bos karakter koyarız genelde. empty-cells komutu(özelligi) ile bos kalan
hücrelere nasıl görünmesini gerektigini bildirebiliriz. Göster(show) degeri
ile hücrenin içerigi olan hücreler ile aynı özellikleri almasını saglayabiliriz.
Gizle(hide) degeri ile de hücrenin yokmus gibi davranmasını saglarız.

Not: empty-cells özelliği Internet Explorer tarafından desteklenmemektedir.

Yani özetlersek bir tablomuzda 4 kutu varsa ve 3 kutuyu kullanmak istiyorsak 4'üncü kutuyu göstermye biliriz.
Bunu örneklemek gerekirse.


Örneğin:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Sanal Kurs:Boş Hücre Ayarı:empty-cells</title>

<style>

table.goster { 

empty-cells:show

}

table.gizle {

empty-cells:hide

}

td {

border: 1px solid black; 

padding: 3px;

}

</style>

</head>

<body> 

<table cellspacing="0" class="goster"> // Göstermek istedigimiz hücre.

<tr>

<td></td>

<td>hücre2</td>

</tr>

<tr>

<td>hücre3</td>

<td>hücre4</td>

</tr>

</table>

&nbsp;

<table border="0" cellspacing="0" class="gizle"> // Gizlemek istedigimiz hücre.

<tr>

<td></td>

<td>hücre2</td>

</tr>

<tr>

<td>hücre3</td>

<td>hücre4</td>

</tr>

</table>

</body>

</html>




Gizlemiş Tablomuzu uygulamak istersek:
Örneğin:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Sanal Kurs:Boş Hücre Ayarı:empty-cells</title>

<style>

table.goster { 

empty-cells:show

}

table.gizle {

empty-cells:hide

}

td {

border: 1px solid black; 

padding: 3px;

}

</style>

</head>

<body>

<table border="0" cellspacing="0" class="gizle"> // Gizlemek istedigimiz hücre.

<tr>

<td></td>

<td>Adınız</td>

<td>Soyadınız</td>

<td>Email Adresiniz</td>

<td>Telefon Numaranız</td>

</tr>

<tr>

<td>1</td>

<td>Zafer</td>

<td>BAŞPINAR</td>

<td>byzfr@hotmail.com.tr</td>

<td>sanalkurs</td>

</tr>

</table>

</body>

</html>





Gizlenmemiş Tablomuzu uygulamak istersek:
Örneğin:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Sanal Kurs:Boş Hücre Ayarı:empty-cells</title>

<style>

table.goster { 

empty-cells:show

}

table.gizle {

empty-cells:hide

}

td {

border: 1px solid black; 

padding: 3px;

}

</style>

</head>

<body>

<table cellspacing="0" class="goster"> // Göstermek istedigimiz hücre.

<tr>

<td></td>

<td>Adınız</td>

<td>Soyadınız</td>

<td>Email Adresiniz</td>

<td>Telefon Numaranız</td>

</tr>

<tr>

<td>1</td>

<td>Zafer</td>

<td>BAŞPINAR</td>

<td>byzfr@hotmail.com.tr</td>

<td>sanalkurs</td>

</tr>

</table>

</body>

</html>





Gizlenmemiş Tablomuzu uygulamak Sil / Düzenle eklemek istersek:
Örneğin:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Sanal Kurs:Boş Hücre Ayarı:empty-cells</title>

<style>

table.goster { 

empty-cells:show

}

table.gizle {

empty-cells:hide

}

td {

border: 1px solid black; 

padding: 3px;

}

</style>

</head>

<body>

<table cellspacing="0" class="goster"> // Göstermek istedigimiz hücre.

<tr>

<td>Adınız</td>

<td>Soyadınız</td>

<td>Email Adresiniz</td>

<td>Telefon Numaranız</td>

<td></td>

<td></td>

</tr>

<tr>

<td>Zafer</td>

<td>BAŞPINAR</td>

<td>byzfr@hotmail.com.tr</td>

<td>sanalkurs</td>

<td>Sil</td>

<td>Düzenle</td>

</tr>

</table>

</body>

</html>





Gizlenmiş Tablomuzu uygulamak Sil / Düzenle eklemek istersek:
Örneğin:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Sanal Kurs:Boş Hücre Ayarı:empty-cells</title>

<style>

table.goster { 

empty-cells:show

}

table.gizle {

empty-cells:hide

}

td {

border: 1px solid black; 

padding: 3px;

}

</style>

</head>

<body>

<table border="0" cellspacing="0" class="gizle"> // Gizlemek istedigimiz hücre.

<tr>

<td>Adınız</td>

<td>Soyadınız</td>

<td>Email Adresiniz</td>

<td>Telefon Numaranız</td>

<td></td>

<td></td>

</tr>

<tr>

<td>Zafer</td>

<td>BAŞPINAR</td>

<td>byzfr@hotmail.com.tr</td>

<td>sanalkurs</td>

<td>Sil</td>

<td>Düzenle</td>

</tr>

</table>

</body>

</html>



Örnekneklemelerde vermiş oldugum gibi istedigimiz taraftan tablolarımızın hangi tarafını göstermek ve gizlemek istersek hücre değerlerinin kodlamalarını nasıl uyguladıgımız ögrenmiş olduk.

Peki tarayıcılarımızdaki çıktılar nasıl olur.

Gizlenmiş Hücre:


Gizlenmemiş Hücre:


Gizlemiş Tablomuzu uygulamak istersek:


Gizlenmemiş Tablomuzu uygulamak istersek:


Gizlenmemiş Tablomuzu uygulamak Sil / Düzenle eklemek istersek:


Gizlenmiş Tablomuzu uygulamak Sil / Düzenle eklemek istersek:
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git