1.317 kez okundu

Web Tasarım Dersleri Tablolara Arkaplan Nasıl Verilir

10 10 1.317 kez okundu incelendi

Merhaba değerli arkadaşalr bir önceki dersimizde tablolara girmiştik ve basitçe tablo eklemyi görmüştük bu dersimizdede tablo hücrelerine arkaplan rengi ve arkaplan resmi kullanmayı göreceğiz.

Tablolara Arkaplan Renk Vermek

Daha öncede değinmiştim arkaplan renk konusuna işte orda öğrendiğiniz hemen buarada karşınıza çıkacak ve hıır gibi yetişecek arkadaşlar.

Bgcolor

Bgcolor ile arkaplan rengi vereceğimizi belirtiyorduk arkadaşlar daha önce sayfamızın arkaplan rengi için kullandık şimdi ise tablomuzun hücre veya hücrelerine arkaplan rengi vermek için kullanacağız.Dikkat etmeniz gereken bgcolor parametresi table etiketi ile kullanılırsa tüm tabloya renk verir<tr> parametresi ile kullanılırsa tüm satırın arkaplan rengini düzenler etki eder değerli arkadaşalr.

<td> etiketi ile kullanıldığında ise yalnıca istediğiniz belirttiğiniz hücrenin arkaplan rengini ayarlar.

Tablolara Arkaplan Rengi Uygulaması

Evet değerli arkadaşlar açıyoruz not defterimizi ve başlıyoruz aşağıdaki kodları yazmaya aşağıdaki örnek 2 satır 2 sütunluk bir tablonun ilk satırına tüm satır olmak üzere arkaplan rengi kırmızı olacak 2. satır ise sadece bir hücreye yeşil rengi vereceğim kodları yazıp farklı kaydetten tablorenk.html olarak masaüstüne kaydedin.

<html>
<head>
<title>Web Tasarım Dersleri Tablolara Arkaplan rengi Ders 13</title>
</head>
<body>

<table border=”1″>
<tr bgcolor=”red”>
<td>1. Satır 1. Sütun</td>
<td>1. Satır 2. Sütun</td>
</tr>

<tr>
<td bgcolor=”green”> 2. Satır 1. Sütun</td>
<td>2. Satır 2. Sütun</td>
</tr>
</table>

</body>
</html>

Evet arkadaşlar yukardaki örneği özetliyim hemen 2 uygulama yaptık <tr bgcolor=”red”> burda ilk satır olarak ne dedim satıra renk vereceğim dedim satır kodumuz neydi <tr> o nedenle tr içine arkaplan kodunu ekledim.

2. satır ise sadece bir hücreye (Sütun) renk vereceğim dedim bunun içinse tüm satırı kaplamak yerine renk vereceğim hücrenin koduna eklemek gerekti <td bgcolor=”green”> ve 2. satırda 2 hücre vardı bense ilk hücreye ekledim.

Tablo Arkaplan RenkTablo Arkaplan Renk

Evet arkadaşlar tabloya arkaplan rengini vermeyi öğrendik ve şimdi geçiyoruz tablomuzda arkaplan resmi kullanmaya yani istediğimiz bir resmi tablomuzda arkaplan resmi yapacaz yani şunuda unutmayın o resim sizin içerik eklemenizi eklemez yazıda ekleyebilir tabloya şık görünüm sağlar.

Tablolara Arkaplan Resmi Ekleme

Background Daha öncede bu konuyu görmüştük arkadaşlar arkaplan resmi ekleme dersinde şimdi bunu tabloda uygulama yapacağız istediğimiz bir resmi arkaplan resmi yapma öncelikle yukarda tüm tabloyamı yada satıramı yada istediğimiz bir sütunamı renk verecez şeklinde anlattım yine aynı durum geçerli resmi tüm tabloyamı tüm satıramı yada istediğiniz hücreye eklemek için yukardaki teknik geçerli yine.

Dikkat etmeniz gereken tablo boyutunuz ile resim boyutu aynı olsun yoksa resim büyük olursa resmin bir kısmı görünmez bu uygulamamızda hepimiz aynı resmi kullanalım aşağıda vereceğim resmi masaüstüne arkaplanresmi.jpg olarak kaydedin arkadaşlar.

ve aşağıdaki kodları not defterinizle yazın ve tabloda bir fark olacak tabloya boyut vereceğim onu siz görmediniz onu bir sonraki derste detaylı göreceğiz ve kodları yazınca tabloresim.html şeklinde masaüstüne kaydedin resim ve sayfamı aynı yerde olmalı yoksa resim yolu belirtmediğimiz için resim görüntülenmez.

Uygulamada ben tüm tabloya arkaplan resmi uygulayacağım.

Bu Resmi Masaüstünüze arkaplanresmi.jpg adı ile kaydedinBu Resmi Masaüstünüze arkaplanresmi.jpg adı ile kaydedin

<html>
<head>
<title>Web Tasarım Dersleri Tablolara Arkaplan Resmi Ders 13</title>
</head>
<body>

<table width=”400″ height=”250″ border=”1″ background=”arkaplanresmi.jpg”>
<tr>
<td>1. Satır 1. Sütun</td>
<td>1. Satır 2. Sütun</td>
</tr>

<tr>
<td>2. Satır 1. Sütun</td>
<td>2. Satır 2. Sütun</td>
</tr>
</table>

</body>
</html>

Tablolara Arkaplan ResmiTablolara Arkaplan Resmi

Evet arkadaşlar bu örnekte tüm tabloya uygulanması için tablo koduma müdahale ettim satıra yada sütuna eklemek isteseydim ilk örneğimizdeki kurallar geçerli olacaktı.

Bugünkü dersimiz bu kadar arkadaşlar bir sonraki dersimizde tablo boyutlandırmaları göreceğiz tablomuz bizim istediğimiz gibi olacak sayfamızın istediğimiz kısmına gerekirse tüm sayfayı kaplarız.

Arkadaşlar ben bunları size html site yapın diye anlatmıyorum tasarımın temelini bilin diye öğretiyorum bunları bitirip veritabanlı sitelere geçicez bu mantığı öğrenince onlarda kral gibi eserler ortaya koyacaksınız az daha sabredin Allaha emanet olun.

Gelen aramalar :

Paylaş !

Yorum yap

Önceki yazıyı okuyun:
Web Tasarım Dersleri Html Tablolama

Tablolar sitelerin en çok kullanılan özelliklerinden biri olup tablo kullanmamızın amacı sayfamızdaki resim, yazı, video vs vs içeriğimizi sayfamızın istediğimiz...

Kapat
Barış Ozcan Facebook Sayfasi
Barış Ozcan Twitter