Web Tasarım Dersleri Tablo Özellikleri

Tablo Özellikleri

HTML Web Tasarım Dersleri Tablo Özellikleri

Merhabalar değerli ziyaretçilerimiz bugünkü web tasarım derslerimizde tablo özelliklerini işliyoruz.

Tablo özellikleri; Tabloların konum ve hizalama ayarları için kullanılır. Kullanılan özellikleri; border-collapse, border-spacing, caption-side, empty-cells, table-layout, olarak sıralayabiliriz.

SINIR İNDİRGEME

(BORDER-COLLAPSE) ÖZELLİĞİ,

Tablodaki satırların ve hücrelerin teke indirgenip indirgenmeyeceğini hücrelerin birbirlerinden ayrı kenarlıklarının olmasını sağlarken, collapse; satırların ve hücrelerin birbirlerine bitişerek kenarlığın teke indirgenmesini sağlar.

<code>

<head>

<style type=”text/css”>

.tablo1 {border-collapse;}

.tablo2 {border-collapse:separate;}

.tablo1 td, .tablo2 td {border:solid 2px red;}

</style>

</head>

<body>

<table class=”tablo1″>

<tr>

<td> Hücre 1 </td>

<td> Hücre 2 </td>

</tr>

<tr>

<td> Hücre 3 </td>

<td> Hücre 4 </td>

</tr>

</table>

<br/>

<table class=”tablo2″>

<tr>

<td> Hücre 1 </td>

<td> Hücre 2 </td>

</tr>

<tr>

<td> Hücre 3 </td>

<td> Hücre 4 </td>

</tr>

</table>

</body>

Web Tasarım Dersleri Tablolar

Web Tasarım Dersleri Tablolar

SINIR ARALIĞI,

(BORDER-SPACING) ÖZELLİĞİ

Hücreler arasındaki aralığın ölçüsünü belirlemek için kullanılır. Değer olarak; px, em, cm… vd uzunluk değerlerini alır. Tek uzunluk değeri atandığı durumlarda, söz konusu değer hem yatay hem de dikey aralıklar için geçerli olur.

İki değer atandığında ilki yatay aralığı ikincisi ise dikey aralığı ölçülendirmek için kullanılır.

<code>

<head>

<style type=”text/css”>

table.ilk

{

border-collapse:separate;

border-spacing:10px;

}

table.iki

{

border-collapse:separate;

border-spacing:10px 50px;

}

</style>

</head>

<body>

<table class=”ilk” border=”1″>

<tr>

<td> XHTML </td>

<td> CSS </td>

</tr>

<tr>

<td> XML </td>

<td> javascript </td>

</tr>

</table>

<br/>

<table class=”iki” border=”1″>

<tr>

<td> XHTML </td>

<td> CSS </td>

</tr>

<tr>

<td> XML </td>

<td> javascript </td>

</tr>

</table>

</body>

web-tasarim-dersleri-sinir-araligi-border-spacing

web-tasarim-dersleri-sinir-araligi-border-spacing

BAŞLIK YANI (CAPTION-SIDE) ÖZELLİĞİ

Tablo başlığının konumunu ayarlamak için kullanılır. Kullanılan değerlerden; top; tablo başlığını konum olarak tablonun  üst kısmına, bottom ise alt kısmına konumlandırır. left tablo başlığının tablonun soluna right da tablonun sağına konumlandırılır.

<code>

<head>

<style type=”text/css”>

caption {caption-side:bottom};

</style>

</head>

<body>

<table border=”1″>

<caption> Alt Başlık </caption>

<tr>

<td> XHTML </td>

<td> CSS </td>

</tr>

<tr>

<td> XML </td>

<td> JAVASCRIPT </td>

</tr>

</table>

</body>

<code>

caption-side-baslik-yani-web-tasarim-dersleri html

caption-side-baslik-yani-web-tasarim-dersleri

BOŞ HÜCRELER (EMPTY-CELLS) ÖZELLİĞİ

Bu özelliği tablomuzdaki boş hücrelerin gösterilip gösterilmeyeceğini belirlemek için kullanacağız. Özelliğe hide değeri atanırsa boş hücrelerin çizgileri gösterilmez. Değer olarak show değeri atandığında ise çizgiler gösterilir.

<code>

<head>

<style type=”text/css”>

table

{

border-collapse:separate;

empty-cells:hide;

}

</style>

</head>

<body>

<table border=”1″>

<tr>

<td> XHTML </td>

<td> JAVASCRIPT </td>

</tr>

<tr>

<td> CSS</td>

<td> </td>

</tr>

</table>

</body>

</code>

web-tasarim-dersleri-bos-hucreler-empty-cells html dersleri

web-tasarim-dersleri-bos-hucreler-empty-cells

web tasarım derslerimizde tablo özelliklerini kodlamayı öğrendik, yarın ki konumuz tabloların yapısı. sitemizi ziyaret ettiğiniz için teşekkür ederiz. bir sonraki konumuzda görüşmek üzere iyi çalışmalar dileriz.

 

Web Tasarım Dersleri Tablo Özellikleri
5 (100%) 2 oy

By | 2017-05-13T10:41:49+00:00 Mart 25th, 2017|Categories: BLOG, Html 5, Web Tasarım, Web Tasarım Dersleri|0 Comments

About the Author:

 
%d blogcu bunu beğendi:
EV SSL