İyi bir gelecek, size iyi gelecek | Weeb Akademi
bilgi@weebakademi.com | 0 850 303 88 15 | |
 
 

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 Renk

Tablo 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 kaydedin

Bu 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 Resmi

Tablolara 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.

 
 

Referanslarımız



Facebook Sayfamıza gitmek için TıklayınTwitter Sayfamıza gitmek için Tıklayın