HTML TABLO OLUŞTURMA

EğitimAilesi.Com » EğitimAilesiKodlama Eğitimi » HTML TABLO OLUŞTURMA
Son Güncellenme Tarihi: 7 Eylül 2021
Yazar: ÜMİT SANCAR


HTML Tablo Oluşturma, htmlde tablo oluşturma, html tablo nasıl yapılır, html table, html table css, htmlde tablo nasıl yapılır, html tablo oluşturmak, html tablo örnekleri, html tablo css, htmlde tabloya css verme, html tablo yapma gibi sorularınız varsa doğru yerdesiniz…

HTML’de tablo oluşturmak için kullanmamız gereken html etiketi table olacaktır. Yani oluşturmak istediğimiz tabloyu <table></table> kodları arasında barındıracağız. Öncelikle başlıklar için <tr></tr> etiketini, satırlar için <tr></tr> etiketini ve sütunlar için <td></td> etiketini kullanacağız.
Tabloyu sadece bu etiketler arasında kullanmak bize istediğimiz sonucu vermeyecektir. Bu yüzden etiketlere stil vererek istediğimiz tabloları oluşturabiliriz.
Şimdi aşağıdaki örneklerle tek tek hem tabloyu hem verdiğimiz stillerin anlamlarına bakalım. Ayrıca her örnekte tablolara yeni bir stil atayarak tablolarımızı ayrıntılı inceleyelim.

HTML Tablo Oluşturma Örnek-1

  
    <html>
    <head>
    <style>
      table {
        border-collapse: collapse;
        width:70%;
      }
      table td {
        border: 1px solid #ddd;
        padding: 8px;
      }
      table th {
        padding: 10px;
        border: 1px solid #ddd;
        background-color: #666;
        color: #cecece;
      }
      </style>
  </head>
  <body>
      <table>
        <tr>
          <th>İL</th>
          <th>İLÇE</th>
          <th>NÜFUS</th>
        </tr>
        <tr>
          <td>Antalya</td>
          <td>Alanya</td>
          <td>333.104</td>
        </tr>
            <tr>
              <td>Aydın</td>
              <td>Kuşadası</td>
              <td>121.493</td>
            </tr>
        <tr>
          <td>İzmir</td>
          <td>Çeşme</td>
          <td>46.093</td>
        </tr>
        <tr>
          <td>Muğla</td>
          <td>Marmaris</td>
          <td>95.851</td>
        </tr>
      </table>
  </body>
  </html>
  
  

Tablonun Görseli :

İL İLÇE NÜFUS
Antalya Alanya 333.104
Aydın Kuşadası 121.493
İzmir Çeşme 46.093
Muğla Marmaris 95.851

Tablodaki stillerin anlamları:

border-collapse: collapse; ==> Tabloda border kullandığımız için her td th etiketinin kendi kenarları vardır. Buradaki amaç ortak bir kenar kullanmalarını sağlamaktır.
width:70%; ==> Tablomuzun genişliğini ifade eder.
border: 1px solid #ddd; ==> Sütunların kenar kalınlığını, şeklini ve rengini ifade eder.
padding: 8px; ==> sütunların içindeki verinin alt, üst ve yan kenarlara olan uzaklığını ifade eder.
padding: 10px 0px; ==> Tablodaki başlığın içindeki verinin alt ve üst kenarlara olan uzaklığı ile yan kenarlara ulan uzaklığı ayrı ayrı ifade edilir.
border: 1px solid #ddd; ==> Sütunların kenar kalınlığını, şeklini ve rengini ifade eder.
background-color: #666; ==> Tablodaki başlığın arka plan rengini ifade eder.
color: #cecece; ==> Tablodaki başlığın yazı rengini ifade eder.

HTML Tablo Oluşturma Örnek-2

      
        <html>
        <head>
        <style>
          table {
            border-collapse: collapse;
            width:70%;
          }
          table td {
            border: 1px solid #ddd;
            padding: 8px;
          }
          table th {
            padding: 10px;
            border: 1px solid #ddd;
            background-color: #666;
            color: #cecece;
          }
          table tr:nth-child(even){background-color: #ffff00;}
  
          </style>
      </head>
      <body>
          <table>
            <tr>
              <th>İL</th>
              <th>İLÇE</th>
              <th>NÜFUS</th>
            </tr>
            <tr>
              <td>Antalya</td>
              <td>Alanya</td>
              <td>333.104</td>
            </tr>
            <tr>
              <td>Aydın</td>
              <td>Kuşadası</td>
              <td>121.493</td>
            </tr>
            <tr>
              <td>İzmir</td>
              <td>Çeşme</td>
              <td>46.093</td>
            </tr>
            <tr>
              <td>Muğla</td>
              <td>Marmaris</td>
              <td>95.851</td>
            </tr>
          </table>
      </body>
      </html>
      
      

Tablonun Görseli :

İL İLÇE NÜFUS
Antalya Alanya 333.104
Aydın Kuşadası 121.493
İzmir Çeşme 46.093
Muğla Marmaris 95.851

Tablodaki stillerin anlamları:

Bir önceki tabloda yer alan stil dosyasına ek olarak
*table tr:nth-child(even){background-color: #ffff00;} kodunu ekledik.
Bu kod tabloda yer alan satırların her ikisinden birine renk vermemizi sağlıyor. Biz bu tabloda her iki satırdan birine sarı rengi verdik.

HTML Tablo Oluşturma Örnek-3

      
        <html>
        <head>
        <style>
          table {
            border-collapse: collapse;
            width:70%;
          }
          table td {
            border: 1px solid #ddd;
            padding: 8px;
          }
          table th {
            padding: 10px;
            border: 1px solid #ddd;
            background-color: #666;
            color: #cecece;
          }
          table tr:nth-child(even){background-color: #ffff00;}
          table tr:hover {background-color: #ddd;}
  
          </style>
      </head>
      <body>
          <table>
            <tr>
              <th>İL</th>
              <th>İLÇE</th>
              <th>NÜFUS</th>
            </tr>
            <tr>
              <td>Antalya</td>
              <td>Alanya</td>
              <td>333.104</td>
            </tr>
            <tr>
              <td>Aydın</td>
              <td>Kuşadası</td>
              <td>121.493</td>
            </tr>
            <tr>
              <td>İzmir</td>
              <td>Çeşme</td>
              <td>46.093</td>
            </tr>
            <tr>
              <td>Muğla</td>
              <td>Marmaris</td>
              <td>95.851</td>
            </tr>
          </table>
      </body>
      </html>
      
      

Tablonun Görseli :

İL İLÇE NÜFUS
Antalya Alanya 333.104
Aydın Kuşadası 121.493
İzmir Çeşme 46.093
Muğla Marmaris 95.851

Tablodaki stillerin anlamları:

Bir önceki tabloda yer alan stil dosyasına ek olarak
*table tr:hover {background-color: #ddd;} kodunu ekledik.
Bu kod tabloda yer alan satırların üzerine fare ile gelindiği takdirde okun üzerinde bulunduğu satır renk almış olacaktır. Tablonun görselinde deneyiniz.

HTML ile tablo oluşturmak bu kadar basit arkadaşlar. Eğer farklı konularda sorularınız varsa veya anlamadığınız bir nokta bulunuyorsa yorum kısmından bizlere ileterek istediğiniz konuda yardımcı olmak isteriz.

html tablo oluşturma, html’de tablo oluşturma, html table, html table css, html table style, html tablo css




  • Kategoriler

  • Son Yazılar

  • Arşivler

  • Yorum yapmak, öneride bulunmak veya soru sormak için aşağıdaki boş alanları doldurunuz.

    E-posta hesabınız yayımlanmayacak.

    Eğitim Ailesi Olarak KPSS Matematik 2022 Konu Anlatım Videoları Youtube Kanalımıza Yüklenmeye Başladı. Youtube Kanalımızı Takip İçin Lütfen Tıklayınız.