Blogger Tablo / Table Nasıl Oluşturulur?

16.6.16

Blogger Tablo / Table Nasıl Oluşturulur? - Blogger web sitenizde yazılarınızın altında veya üstünde yazınızla ilgili sayısal veriler yada grup isimler paylaşmak için blog sayfasında tablo / table oluşturmanız gerekmektedir. Peki blog üzerinde tablo / table nasıl oluşturulur ipuçlarını paylaşıyoruz.

Blogger Tablo / Table Nasıl Oluşturulur?


1. Blogger hesabınıza giriş yapın ve blogunuzu seçin. Blogunuzun kumanda panelinden (arayüz) Şablon > HTML'i Düzenle yolunu takip ederek CTRL+F yardımıyla ]]></b:skin> yada </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

.post-body table {width:100%;}
.post-body table td,.post-body table caption{background:#f8f8f8;border:1px solid rgba(0,0,0,0.05);padding:10px;text-align:left;vertical-align:top}
.post-body table th{background:#f98329;color:#fff;border:1px solid rgba(0,0,0,0.05);border-bottom:0;padding:10px;text-align:left;vertical-align:top}
.post-body table.tr-caption-container {border:1px solid rgba(0,0,0,0.14);margin:0;}
.post-body th{font-weight:700;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #ddd;}
.post-body th{}
.post-body th:hover{color:#fff;}
.post-body td a{color:#444;}
.post-body td a:hover{color:#f98329;}
.post-body table.tr-caption-container td{border:0;padding:8px;background:#f8f8f8;line-height:17px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:#000;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body li {list-style-type:square;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px!important;}

2. Aşağıdaki HTML kodları oluşturmuş olduğunuz blog yayının altına yada üstüne ekleyerek kod içerisinde renkli alanları kendinize göre düzenleyerek tablolu yayınınızı oluşturabilirsiniz.

<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr>
<th>Tablo Üstbilgi 1</th>
<th>Tablo Üstbilgi 2</th>
<th>Tablo Üstbilgi 3</th>
</tr>
<tr>
<td>Bölünme 1</td>
<td>Bölünme 2</td>
<td>Bölünme 3</td>
</tr>
<tr>
<td>Bölünme 1</td>
<td>Bölünme 2</td>
<td>Bölünme 3</td>
</tr>
<tr>
<td>Bölünme 1</td>
<td>Bölünme 2</td>
<td>Bölünme 3</td>
</tr>
</tbody>
</table>


Blog sitesinde tablo oluşturma ile ilgili CSS ve HTML kodları hakkında bilgiler paylaştık, CSS kodları içerisinde değişiklikler yaparak blogunuza daha uygun tablo oluşturabilirsiniz.
Faydalı mı?
Blogger
Disqus
Yorum Ekle

2 yorum

Tablo için teşekkürler hocam

Cevap

turuncu rengin kodu bu #f98329 siz şablonkodları arasında gri renk kodu ile bu kodu değiştirin

Cevap