28 Nisan 2014 Pazartesi

HTML tablo yapımı kodu

Ürün Adı   Adet    Fiyat
Telefon        1       1.000 TL

<table style="width:300px">
<tr>
  <td>Ürün Adı</td>
  <td>Adet</td> 
  <td>Fiyat</td>
</tr>
<tr>
  <td>Telefon</td>
  <td>1</td> 
  <td>1.000 TL</td>
</tr>
</table>

Burada gördüğünüz gibi çerçeve yok,şimdi çerçeve içine almak için şu iki kodu birlikte kullanıyoruz...

<style>
table,th,td
{
border:1px solid black;
}
</style>

Ürün Adı
Adet Fiyat
Telefon 1 1.000 TL

Ürün Adı Adet Fiyat
Telefon 1 1.000 TL
Gördüğünüz gibi bir kod daha ekledik ve renklendirdik tüm verilen kodların hepsini bir yerde kullandık...

<table style="width: 300px;">
<tbody>
<tr>
  <td style="background: #0058F3; color: white;">Ürün Adı</td>
  <td style="background: #0058F3; color: white;">Adet</td> 
  <td style="background: #0058F3; color: white;">Fiyat</td>
</tr>
<tr>
  <td>Telefon</td>
  <td>1</td> 
  <td>1.000 TL</td>
</tr>
</tbody></table>

Kodumuzun son hali aşağıdaki gibi olacak...

<style>
table,th,td
{
border:1px solid black;
}
</style>
<table style="width: 300px;">
<tbody>
<tr>
  <td style="background: #0058F3; color: white;">Ürün Adı</td>
  <td style="background: #0058F3; color: white;">Adet</td> 
  <td style="background: #0058F3; color: white;">Fiyat</td>
</tr>
<tr>
  <td>Telefon</td>
  <td>1</td> 
  <td>1.000 TL</td>
</tr>
</tbody></table>

Hiç yorum yok:

Yorum Gönder