header ads
header ads

Blogger'da Tablo Oluşturma

Admin - Nisan 01, 2019
Blogger'da tablo oluşturmak için editörde herhangi bir kısayol bulunmadığından bunu kodlarla kendimiz eklemek durumunda kalıyoruz. Size blogger için tablo ekleme konusunda çeşitli tablo kodları ve kendinize göre düzenleyip kullanabilmeniz için fikirler sundum.


Klasik tablo için

Önizleme:
Tablo Başlığı 1 Tablo Başlığı 2 Tablo Başlığı 3
Tablo İçeriği 1 Tablo İçeriği 1 Tablo İçeriği 1
Tablo İçeriği 2 Tablo İçeriği 2 Tablo İçeriği 2
Tablo İçeriği 3 Tablo İçeriği 3 Tablo İçeriği 3

Kod:
 <table border="1">  
 <tbody>  
 <tr>  
 <th>Tablo Başlığı 1</th>  
 <th>Tablo Başlığı 2</th>  
 <th>Tablo Başlığı 3</th>  
 </tr>  
 <tr>  
 <td>Tablo İçeriği 1</td>  
 <td>Tablo İçeriği 1</td>  
 <td>Tablo İçeriği 1</td>  
 </tr>  
 <tr>  
 <td>Tablo İçeriği 2</td>  
 <td>Tablo İçeriği 2</td>  
 <td>Tablo İçeriği 2</td>  
 </tr>  
 <tr>  
 <td>Tablo İçeriği 3</td>  
 <td>Tablo İçeriği 3</td>  
 <td>Tablo İçeriği 3</td>  
 </tr>  
 </tbody></table>

Tam sayfa eşit sütunlu tablo için

Önizleme:
Tablo Başlığı 1 Tablo Başlığı 2 Tablo Başlığı 3
Tablo İçeriği 1 Tablo İçeriği 1 Tablo İçeriği 1
Tablo İçeriği 2 Tablo İçeriği 2 Tablo İçeriği 2
Tablo İçeriği 3 Tablo İçeriği 3 Tablo İçeriği 3

Kod:
 <table border="1" style="width: 100%;">  
 <tbody>  
 <tr>  
 <th>Tablo Başlığı 1</th>  
 <th>Tablo Başlığı 2</th>  
 <th>Tablo Başlığı 3</th>  
 </tr>  
 <tr>  
 <td>Tablo İçeriği 1</td>  
 <td>Tablo İçeriği 1</td>  
 <td>Tablo İçeriği 1</td>  
 </tr>  
 <tr>  
 <td>Tablo İçeriği 2</td>  
 <td>Tablo İçeriği 2</td>  
 <td>Tablo İçeriği 2</td>  
 </tr>  
 <tr>  
 <td>Tablo İçeriği 3</td>  
 <td>Tablo İçeriği 3</td>  
 <td>Tablo İçeriği 3</td>  
 </tr>  
 </tbody></table>

Çerçevesiz tablo oluşturmak için 

Önizleme:
Tablo Başlığı 1 Tablo Başlığı 2 Tablo Başlığı 3
Tablo İçeriği 1 Tablo İçeriği 1 Tablo İçeriği 1
Tablo İçeriği 2 Tablo İçeriği 2 Tablo İçeriği 2
Tablo İçeriği 3 Tablo İçeriği 3 Tablo İçeriği 3

Kod: 
 <table style="width: 100%;">  
 <tbody>  
 <tr>  
 <th>Tablo Başlığı 1</th>  
 <th>Tablo Başlığı 2</th>  
 <th>Tablo Başlığı 3</th>  
 </tr>  
 <tr>  
 <td>Tablo İçeriği 1</td>  
 <td>Tablo İçeriği 1</td>  
 <td>Tablo İçeriği 1</td>  
 </tr>  
 <tr>  
 <td>Tablo İçeriği 2</td>  
 <td>Tablo İçeriği 2</td>  
 <td>Tablo İçeriği 2</td>  
 </tr>  
 <tr>  
 <td>Tablo İçeriği 3</td>  
 <td>Tablo İçeriği 3</td>  
 <td>Tablo İçeriği 3</td>  
 </tr>  
 </tbody></table>

Tam sayfa farklı boy sütunlu tablo için

Önizleme
Tablo Başlığı 1 Tablo Başlığı 2 Tablo Başlığı 3
Tablo İçeriği 1 Tablo İçeriği 1 Tablo İçeriği 1
Tablo İçeriği 2 Tablo İçeriği 2 Tablo İçeriği 2
Tablo İçeriği 3 Tablo İçeriği 3 Tablo İçeriği 3

Kod:
 <table border="1" style="width: 100%;">  
 <tbody>  
 <tr>  
 <th style="width: 50%;">Tablo Başlığı 1</th>  
 <th>Tablo Başlığı 2</th>  
 <th>Tablo Başlığı 3</th>  
 </tr>  
 <tr>  
 <td style="width: 50%;">Tablo İçeriği 1</td>  
 <td>Tablo İçeriği 1</td>  
 <td>Tablo İçeriği 1</td>  
 </tr>  
 <tr>  
 <td>Tablo İçeriği 2</td>  
 <td>Tablo İçeriği 2</td>  
 <td>Tablo İçeriği 2</td>  
 </tr>  
 <tr>  
 <td>Tablo İçeriği 3</td>  
 <td>Tablo İçeriği 3</td>  
 <td>Tablo İçeriği 3</td>  
 </tr>  
 </tbody></table>

Tüm tablo için arkaplan rengi belirleme

Bunun için background-color alanındaki "#F9F9F9" yere istediğiniz renk kodunu eklemeniz gerekir.

Önizleme
Tablo Başlığı 1 Tablo Başlığı 2 Tablo Başlığı 3
Tablo İçeriği 1 Tablo İçeriği 1 Tablo İçeriği 1
Tablo İçeriği 2 Tablo İçeriği 2 Tablo İçeriği 2
Tablo İçeriği 3 Tablo İçeriği 3 Tablo İçeriği 3

Kod: 
 <table border="1" style="background-color: #F9F9F9">  
 <tbody>  
 <tr>  
 <th style="width: 50%;">Tablo Başlığı 1</th>  
 <th>Tablo Başlığı 2</th>  
 <th>Tablo Başlığı 3</th>  
 </tr>  
 <tr>  
 <td style="width: 50%;">Tablo İçeriği 1</td>  
 <td>Tablo İçeriği 1</td>  
 <td>Tablo İçeriği 1</td>  
 </tr>  
 <tr>  
 <td>Tablo İçeriği 2</td>  
 <td>Tablo İçeriği 2</td>  
 <td>Tablo İçeriği 2</td>  
 </tr>  
 <tr>  
 <td>Tablo İçeriği 3</td>  
 <td>Tablo İçeriği 3</td>  
 <td>Tablo İçeriği 3</td>  
 </tr>  
 </tbody></table>

Belirlediğiniz satır veya blok için arkaplan rengi belirleme

Bunun için background-color alanındaki "#ffdb58" yere istediğiniz renk kodunu eklemeniz gerekir.

Önizleme
Tablo Başlığı 1 Tablo Başlığı 2 Tablo Başlığı 3
Tablo İçeriği 1 Tablo İçeriği 1 Tablo İçeriği 1
Tablo İçeriği 2 Tablo İçeriği 2 Tablo İçeriği 2
Tablo İçeriği 3 Tablo İçeriği 3 Tablo İçeriği 3

Kod: 
 <table border="1">  
 <tbody>  
 <tr>  
 <th style="width: 50%;">Tablo Başlığı 1</th>  
 <th>Tablo Başlığı 2</th>  
 <th>Tablo Başlığı 3</th>  
 </tr>  
 <tr>  
 <td style="width: 50%;">Tablo İçeriği 1</td>  
 <td style="background-color: #ffdb58;">Tablo İçeriği 1</td>  
 <td>Tablo İçeriği 1</td>  
 </tr>  
 <tr>  
 <td>Tablo İçeriği 2</td>  
 <td>Tablo İçeriği 2</td>  
 <td>Tablo İçeriği 2</td>  
 </tr>  
 <tr style="background-color: #7cdc98;">  
 <td>Tablo İçeriği 3</td>  
 <td>Tablo İçeriği 3</td>  
 <td>Tablo İçeriği 3</td>  
 </tr>  
 </tbody></table>
Tags:

Yorum Gönder

0 Yorumlar