Tabloyu ikiye ayırmak istiyorum.

Öncelikle yardımcı olan arkadaşlara çok teşekkür ederim.

Wordpress sitemin ana sayafındaki tabloyu 2 ye ayırmak istiyorum

sağda ve solda toplam 20 post başlığı gözükmesini istiyorum.

Şuanki hali bu durumda


Şu şekilde yapmak istiyorum.



php kodları

<table class="hovertable">
<tr>
<th><center>?</center></th><th>Alan Adlari (Domain)</th><th><center>Satın Al</center></th>
</tr>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		
		<!-- begin post -->
<tr onmouseover="this.style.backgroundColor='#CCCCCC';" onmouseout="this.style.backgroundColor='#fff';">	<td><center><a href="http://sorgu.com/<?php the_title(); ?>" target="_blank" ><img src="https://i.hizliresim.com/gkpNA3.png"></center></td><td><a href="<?php the_permalink(); ?>"><b>site.com</b></a></td>


<td><center><a href="<?php the_permalink(); ?>">Teklif Ver</a>


</center></td></tr>
		

		<?php endwhile; ?>
				
		<?php endif; ?>
		
		</table>

css kodları

table.hovertable {
    margin-top:10px;
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#dd;
	width: 400px;
	border-width: 1px;
	border-color: #999999;
	border-collapse: collapse;
}
table.hovertable th {
	background-color:#c3dde0;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
table.hovertable tr {
	background-color:#fff;
}
table.hovertable td {
	border-width: 1px;
	padding: 4px;
	border-style: solid;
	border-color: #a9c6c9;
}

Aşağıdaki style dosyasını kullanman yeterli.
İşin mantığını tam olarak ögrenmek istersen hakan'ın şu videosunu izlersen mantığında kavramış olursun:


https://vimeo.com/7333454

 table.hovertable {
	float:left;
    margin-top:10px;
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#dd;
    width: 400px;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
}
table.hovertable th {
    background-color:#c3dde0;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
table.hovertable tr {
    background-color:#fff;
}
table.hovertable td {
    border-width: 1px;
    padding: 4px;
    border-style: solid;
    border-color: #a9c6c9;
}