HTML Tablo yan yana koymak

Selamlar, bir tablo oluşturdum fakat, müşteri bunları yan yana aralarında boşluk olaraktan istiyor.


İstenilen :



Benim yaptığım :



Kodlar:

https://www.w3schools.com/html/tryit...=tryhtml_intro Buradan bakabilirsiniz. Nasıl yapacağım bilemedim.

<table border="" cellpadding="2"> <tbody> <tr> <th style="width: 200px;" colspan="2" align="center"> <div>Pırlanta</div></th> </tr>
<tr> <th> Pırlanta Toplam Karat(CT) Ağırlığı </th> <th>0,23</th> </tr> <tr> <th align="LEFT"> Pırlanta Taş Rengi </th> <th>F-G</th> </tr> <tr> <th align="LEFT"> Pırlanta Taş Karatı(CT) </th> <th>0,14</th> </tr> <tr> <th align="LEFT"> Pırlanta Taş Saflığı </th> <th>SI</th> </tr> <tr> <th align="LEFT"> Pırlanta Taş Kesim Şekli </th> <th>Baget</th> </tr> <tr> <th align="LEFT"> Pırlanta Yan Taş Rengi </th> <th>E-F</th> </tr> <tr> <th align="LEFT"> Pırlanta Yan Taş karatı(CT) </th> <th>0,09</th> </tr> <tr> <th align="LEFT"> Pırlanta Yan Taş Saflığı </th> <th>SI</th> </tr> </tbody></table> <br />
<table border="" cellpadding="2"> <tbody> <tr> <th style="width: 200px;" colspan="2" align="center"> Altın</th> </tr>
<tr> <th align="LEFT"> Maden </th> <th style="text-align: left;">Altın</th> </tr> <tr> <th align="LEFT">Ana Maden</th> <th style="text-align: left;">14 Ayar Beyaz Altın</th> </tr> <tr> <th align="LEFT">Ağırlık</th> <th style="text-align: left;">1,88 gr</th> </tr> <tr> <th align="LEFT">Zincir Dahil Uzunluk</th> <th style="text-align: left;">22</th> </tr> </tbody></table>

Selamlar, tabloları tablo içine alarak da çözebilirsiniz.

<table border="" cellpadding="2" style="float: left; margin: 15px 15px 0 0"> <tbody> <tr> <th style="width: 200px;" colspan="2" align="center"> <div>Pırlanta</div></th> </tr><tr> <th> Pırlanta Toplam Karat(CT) Ağırlığı </th> <th>0,23</th> </tr> <tr> <th align="LEFT"> Pırlanta Taş Rengi </th> <th>F-G</th> </tr> <tr> <th align="LEFT"> Pırlanta Taş Karatı(CT) </th> <th>0,14</th> </tr> <tr> <th align="LEFT"> Pırlanta Taş Saflığı </th> <th>SI</th> </tr> <tr> <th align="LEFT"> Pırlanta Taş Kesim Şekli </th> <th>Baget</th> </tr> <tr> <th align="LEFT"> Pırlanta Yan Taş Rengi </th> <th>E-F</th> </tr> <tr> <th align="LEFT"> Pırlanta Yan Taş karatı(CT) </th> <th>0,09</th> </tr> <tr> <th align="LEFT"> Pırlanta Yan Taş Saflığı </th> <th>SI</th> </tr> </tbody></table> <br /><table border="" cellpadding="2"> <tbody> <tr> <th style="width: 200px;" colspan="2" align="center"> Altın</th> </tr><tr> <th align="LEFT"> Maden </th> <th style="text-align: left;">Altın</th> </tr> <tr> <th align="LEFT">Ana Maden</th> <th style="text-align: left;">14 Ayar Beyaz Altın</th> </tr> <tr> <th align="LEFT">Ağırlık</th> <th style="text-align: left;">1,88 gr</th> </tr> <tr> <th align="LEFT">Zincir Dahil Uzunluk</th> <th style="text-align: left;">22</th> </tr> </tbody></table>

Hocam biraz daha düzeltim

float lefti yapıştır hocam

Allah razı olsun valla

<div class="kapsayici" style="display:flex;justify-content:space-around"><table border="" cellpadding="2"> <tbody> <tr> <th style="width: 200px;" colspan="2" align="center"> <div>Pırlanta</div></th> </tr><tr> <th> Pırlanta Toplam Karat(CT) Ağırlığı </th> <th>0,23</th> </tr> <tr> <th align="LEFT"> Pırlanta Taş Rengi </th> <th>F-G</th> </tr> <tr> <th align="LEFT"> Pırlanta Taş Karatı(CT) </th> <th>0,14</th> </tr> <tr> <th align="LEFT"> Pırlanta Taş Saflığı </th> <th>SI</th> </tr> <tr> <th align="LEFT"> Pırlanta Taş Kesim Şekli </th> <th>Baget</th> </tr> <tr> <th align="LEFT"> Pırlanta Yan Taş Rengi </th> <th>E-F</th> </tr> <tr> <th align="LEFT"> Pırlanta Yan Taş karatı(CT) </th> <th>0,09</th> </tr> <tr> <th align="LEFT"> Pırlanta Yan Taş Saflığı </th> <th>SI</th> </tr> </tbody></table> <br /><table border="" cellpadding="2"> <tbody> <tr> <th style="width: 200px;" colspan="2" align="center"> Altın</th> </tr><tr> <th align="LEFT"> Maden </th> <th style="text-align: left;">Altın</th> </tr> <tr> <th align="LEFT">Ana Maden</th> <th style="text-align: left;">14 Ayar Beyaz Altın</th> </tr> <tr> <th align="LEFT">Ağırlık</th> <th style="text-align: left;">1,88 gr</th> </tr> <tr> <th align="LEFT">Zincir Dahil Uzunluk</th> <th style="text-align: left;">22</th> </tr> </tbody></table></div>

Son bir şey mesela pırlanta ile altın tam yan yana durmamış altın 1 tık alta düşmüş onun sebebi nedir acaba?

<table border="" cellpadding="2" style="float: left; margin: 17px 15px 0 0"> <tbody> <tr> <th style="width: 200px;" colspan="2" align="center"> <div>Pırlanta</div></th> </tr><tr> <th> Pırlanta Toplam Karat(CT) Ağırlığı </th> <th>0,23</th> </tr> <tr> <th align="LEFT"> Pırlanta Taş Rengi </th> <th>F-G</th> </tr> <tr> <th align="LEFT"> Pırlanta Taş Karatı(CT) </th> <th>0,14</th> </tr> <tr> <th align="LEFT"> Pırlanta Taş Saflığı </th> <th>SI</th> </tr> <tr> <th align="LEFT"> Pırlanta Taş Kesim Şekli </th> <th>Baget</th> </tr> <tr> <th align="LEFT"> Pırlanta Yan Taş Rengi </th> <th>E-F</th> </tr> <tr> <th align="LEFT"> Pırlanta Yan Taş karatı(CT) </th> <th>0,09</th> </tr> <tr> <th align="LEFT"> Pırlanta Yan Taş Saflığı </th> <th>SI</th> </tr> </tbody></table> <br /><table border="" cellpadding="2"> <tbody> <tr> <th style="width: 200px;" colspan="2" align="center"> Altın</th> </tr><tr> <th align="LEFT"> Maden </th> <th style="text-align: left;">Altın</th> </tr> <tr> <th align="LEFT">Ana Maden</th> <th style="text-align: left;">14 Ayar Beyaz Altın</th> </tr> <tr> <th align="LEFT">Ağırlık</th> <th style="text-align: left;">1,88 gr</th> </tr> <tr> <th align="LEFT">Zincir Dahil Uzunluk</th> <th style="text-align: left;">22</th> </tr> </tbody></table>

margin 17px yaptım birde böyle dene

2 tabloyu 3. bir tablo içine alarak yada tabloların display özellikerlni block değil inline yada inline-block yaparak çözebilirsin.