OGYAZILIM - İnternet Hakkında Herşey

Ana Sayfa
HTML

HTML Tablo Kodu Oluşturma - 2023

Tablolar, HTML'de verileri düzenlemek ve sunmak için kullanılan önemli bir yapıdır. İşte bir örnek HTML tablosu kodu ogyazilim sayfasında!
HTML Tablo Kodu Oluşturma - 2023

HTML Tablo Kodu Oluşturma

Tablolar, HTML'de verileri düzenlemek ve sunmak için kullanılan önemli bir yapıdır. İşte bir örnek HTML tablosu kodu:

<!DOCTYPE html>
<html>
<head>
    <title>Örnek Tablo</title>
    <style>
        table {
            border-collapse: collapse; /* Sınırları birleştirir */
            width: 100%; /* Tablo genişliği */
        }
        
        th, td {
            border: 1px solid black; /* Hücre sınırları */
            padding: 8px; /* Hücre içi dolgu alanı */
            text-align: left; /* Hücre içindeki metnin hizalanması */
        }
        
        th {
            background-color: #000000; /* Başlık hücresi arka plan rengi */
        }
    </style>
</head>
<body>
    <h2>Örnek Tablo</h2>
    <table>
        <tr>
            <th>İsim</th>
            <th>Soyisim</th>
            <th>Yaş</th>
        </tr>
        <tr>
            <td>Ahmet</td>
            <td>Yılmaz</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Canan</td>
            <td>Kara</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Mehmet</td>
            <td>Demir</td>
            <td>35</td>
        </tr>
    </table>
</body>
</html>

Yukarıdaki örnek, basit bir tabloyu temsil etmektedir. Tablo, `<table>` etiketiyle başlar ve `</table>` etiketiyle sonlanır. İçindeki veriler ise `<tr>` (tablo satırı) ve `<td>` (tablo hücresi) etiketleri kullanılarak tanımlanır. Tablo başlığı ise `<th>` etiketiyle oluşturulur.

CSS kullanarak tablonun görünümünü özelleştirebiliriz. Örneğin, yukarıdaki kodda kullanılan stil etiketi içerisindeki CSS kuralları tablonun görünümünü belirler. `border-collapse` özelliği, hücre sınırlarını birleştirir ve daha düzgün bir görünüm sağlar. `width` özelliği, tablonun genişliğini yüzde olarak belirler. `border` ve `padding` özellikleri, hücre sınırlarını ve hücre içi dolgu alanını tanımlar. `text-align` özelliği, hücre içindeki metnin hizalanmasını belirler. `background-color` özelliği, tablo başlığı hücresinin arka plan rengini belirler.

Alt kısımda olan tablo üst kısımda ki kodun çıktısıdır! Örnek Tablo

Örnek Tablo

İsim Soyisim Yaş
Ahmet Yılmaz 25
Canan Kara 30
Mehmet Demir 35

Tablo verileri `<tr>` etiketleri arasında yer alır ve her bir veri hücresi `<td>` etiketiyle tanımlanır. Tablo başlığı ise `<th>` etiketi kullanılarak oluşturulur. Tablo satırları, `<tr>` etiketi ile belirtilir ve içindeki hücreler `<td>` veya `<th>` etiketleriyle tanımlanır. Tablo satırları ve hücreleri, sırayla oluşturulmalı ve düzenlenmelidir.

Yukarıdaki örnekte, tablonun başlık sırası `İsim`, `Soyisim` ve `Yaş` şeklindedir. Ardından her satırda ilgili veriler bulunur.

Bu şekilde HTML tablosu oluşturarak, verileri düzenli ve yapısallaştırılmış bir şekilde sunabilirsiniz. Tablonun stilini istediğiniz gibi özelleştirebilirsiniz, CSS kullanarak görünümü değiştirebilirsiniz.

Daha fazla yazılım bilgisi için buradan bakabilirsiz.

Windows 11 Açılış HızlandırmaLink Kısaltarak Para Kazanma