Blogger Tablo / Table Nasıl Oluşturulur?

Arlina Design: 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ı?
  1. Tablo için teşekkürler hocam

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

    YanıtlaSil