HTML Tablo Örnekleri

  • HTML’de tablo oluşturmak için kullanılan etiket table etiketidir. Bu etiket td ve tr etiketleri ile birlikte kullanılır.
  • tr ve td etiketleri table etiketi içerisinde yer alır.
  • tr etiketi tablonun satırını ifade ederken,td etiketi tablonun sütununu ifade eder.
  • Aşağıda tr, td, thead, tbody, tfoot etiketlerine ait tablo örnekleri verilmiştir.

HTML Tablo Örnekleri

<table>
    <tbody>
        <tr>
            <td>Angular</td>
            <td>React</td>
            <td>Vue</td>
        </tr>
        <tr>
            <td>Php</td>
            <td>Java</td>
            <td>Ruby</td>
        </tr>
        <tr>
            <td>Bootstrap 4</td>
            <td>Foundation 6</td>
            <td>Semantic UI</td>
        </tr>
     </tbody>
</table>

HTML tablolar tr etiketi

HTML etiketlerinden biri olan tr etiketi table etiketi ile birlikte kullanılır ve tablonun satırlarını ifade eder.

 <table>
      <tr>
         <td>satır 1, sütun 1</td>
      </tr>
      <tr>
         <td>satır 2, sütun 1</td>
      </tr>
 </table>
satır 1, sütun 1
satır 2, sütun 1
 <table>
      <tr>
         <td>satır 1, sütun 1</td>
      </tr>
      <tr>
         <td>satır 2, sütun 1</td>
      </tr>
       <tr>
         <td>satır 2, sütun 1</td>
      </tr>
 </table>
satır 1, sütun 1
satır 2, sütun 1
satır 2, sütun 1

HTML tablolar td etiketi

HTML etiketlerinden biri olan td etiketi table etiketi ile birlikte kullanılır ve tablonun sütunlarını ifade eder.

<table>
     <tr>
         <td>satır 1, sütun 1</td>
         <td>satır 1, sütun 2</td>
         <td>satır 1, sütun 3</td>  
     </tr> 
</table>
satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 3
<table>
     <tr>
         <td>satır 1, sütun 1</td>
         <td>satır 1, sütun 2</td>
         <td>satır 1, sütun 3</td>  
         <td>satır 1, sütun 4</td>  
     </tr> 
</table>
satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 3 satır 1, sütun 4

HTML tablolar thead etiketi

HTML etiketlerinden biri olan thead etiketi tablonun başlıklarının olduğu kısımdır ve th etiketlerini kapsar.

<table>
  <thead>
    <tr>
      <th>Ay</th>
      <th>Gelir</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Nisan</td>
      <td>3 Milyar</td>
    </tr>
    <tr>
      <td>Mayıs</td>
      <td>2.5 Milyar</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Toplam</td>
      <td>5.5 Milyar</td>
    </tr>
  </tfoot>
</table>
Ay Gelir
Nisan 3 Milyar
Mayıs 2.5 Milyar
Toplam 5.5 Milyar

HTML tablolar tbody etiketi

HTML etiketlerinden biri olan tbody etiketi tablonun içeriğinin olduğu kısımdır.

<table>
  <thead>
    <tr>
      <th>Ay</th>
      <th>Gelir</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Nisan</td>
      <td>3 Milyar</td>
    </tr>
    <tr>
      <td>Mayıs</td>
      <td>2.5 Milyar</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Toplam</td>
      <td>5.5 Milyar</td>
    </tr>
  </tfoot>
</table>
Ay Gelir
Nisan 3 Milyar
Mayıs 2.5 Milyar
Toplam 5.5 Milyar

Html tablolar tfoot etiketi

HTML etiketlerinden biri olan tfoot etiketi tablonun altında yer alan ve altbilgiyi görüntüleyen kısımdır.

<table>
  <thead>
    <tr>
      <th>Ay</th>
      <th>Gelir</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Nisan</td>
      <td>3 Milyar</td>
    </tr>
    <tr>
      <td>Mayıs</td>
      <td>2.5 Milyar</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Toplam</td>
      <td>5.5 Milyar</td>
    </tr>
  </tfoot>
</table>
Ay Gelir
Nisan 3 Milyar
Mayıs 2.5 Milyar
Toplam 5.5 Milyar
388 Views
46820cookie-checkHTML Tablo Örnekleri

Leave a Reply

Your email address will not be published. Required fields are marked *