Varsayılan HTML tabloları pek iç açıcı görünmüyor; onları bazı güzel CSS efektleriyle canlandırın.

Web sitenize bir tablo eklemek, büyük miktarda bilgiyi net bir şekilde sunmak için yararlı bir yoldur. Tablolar ayrıca alanın verimli bir şekilde kullanılmasını sağlar ve karmaşık verileri daha kolay okumanıza ve karşılaştırmanıza olanak tanır.

CSS kullanarak tabloları görsel olarak daha çekici olacak şekilde tasarlayabilirsiniz. Bunu yapmak, web siteniz için genel kullanıcı deneyimini de geliştirebilir.

Modern Tek Sıra ve Sütun Tasarımı

Tek satırlar ve sütunlar içeren ve birleştirilmiş hücreler içermeyen basit bir tablo tasarımı ekleyebilirsiniz. Tablonun şekillendirilmesi ayrıca web sayfanızın kullanıcı için ilgi çekici olmasını sağlar. Tablo stilinden başka, başka harika HTML efektleri Ve CSS ekran web sitesi düzenleri web sitenize ekleyebilirsiniz.

Bu alıştırmanın kodunu kendi içinde görüntüleyebilirsiniz. GitHub deposu.

  1. Yeni bir HTML dosyasına, temel HTML kod yapısını ekleyin:
    html>
    <html>
    <KAFA>
    <başlık>Benim Basit Tablombaşlık>
    KAFA>
    <vücut>

    vücut>
    html>
    2. instagram viewer
  2. Gövdenin içine tablo etiketleri ekleyin:
    <masa>

    masa>
  3. HTML tablosu öğesi şunları içermelidir: tablo satırı tablonun içindeki her satır için etiketler. Üst sıra genellikle başlıklar için kullanılır. Kullanmak tablo başlığı Tablodaki her sütunu temsil eden HTML etiketleri:
    <tr>
    <inci>Başlık 1inci>
    <inci>Başlık 2inci>
    <inci>Başlık 3inci>
    tr>
  4. Başlık satırının altına daha fazla satır ekleyin. Kullanmak tablo verileri Tablodaki her hücreye veri eklemek için HTML etiketleri:
    <tr>
    <td>1. Satır, 1. Sütuntd>
    <td>Satır 1, Sütun 2td>
    <td>1. Satır, 3. Sütuntd>
    tr>
    <tr>
    <td>2. Satır, 1. Sütuntd>
    <td>Satır 2, Sütun 2td>
    <td>Satır 2, Sütun 3td>
    tr>
    <tr>
    <td>3. Satır, 1. Sütuntd>
    <td>3. Satır, 2. Sütuntd>
    <td>3. Satır, 3. Sütuntd>
    tr>
    <tr>
    <td>Satır 4, Sütun 1td>
    <td>4. Sıra, 2. Sütuntd>
    <td>4. Sıra, 3. Sütuntd>
    tr>
    <tr>
    <td>5. Satır, 1. Sütuntd>
    <td>Satır 5, Sütun 2td>
    <td>5. Sıra, 3. Sütuntd>
    tr>
  5. Head etiketinin içine bir stil etiketi ekleyin. Tabloya gölgeler, yuvarlatılmış tablo köşeleri, yazı tipleri ve kenar boşlukları gibi bazı genel stiller ekleyin:
    <stil>
    masa {
    sınır çöküşü: yıkılmak;
    Genişlik: 100%;
    renk: #333;
    font ailesi: Arial, sans Serif;
    yazı Boyutu: 14piksel;
    Metin hizalama: sol;
    sınır yarıçapı: 10piksel;
    taşma: gizlenmiş;
    kutu gölgesi: 0 0 20pikselrgba(0, 0, 0, 0.1);
    marj: Oto;
    kenar boşluğu: 50piksel;
    kenar boşluğu: 50piksel;
     } 
    stil>
  6. Arka plan rengi ve hizalanmış metin vermek için tablo başlığına stil verin:
    masainci {
    arka plan rengi: #ff9800;
    renk: #ffff;
    yazı tipi ağırlığı: gözü pek;
    dolgu malzemesi: 10piksel;
    metin dönüşümü: büyük harf;
    harf boşluğu: 1piksel;
    sınır üstü: 1pikselsağlam#ffff;
    sınır-alt: 1pikselsağlam#ccc;
    }
  7. Gri ve beyaz renkler arasında geçiş yapmak ve satırın üzerine geldiğinizde bir efekt eklemek için tablo satırlarına stil verin:
    masatr:nth-child (çift)td {
    arka plan rengi: #f2f2f2;
    }
    masatr:vurgulutd {
    arka plan rengi: #ffedcc;
    }
  8. Tablonun hücrelerinin içindeki verileri biçimlendirin:
    masatd {
    arka plan rengi: #ffff;
    dolgu malzemesi: 10piksel;
    sınır-alt: 1pikselsağlam#ccc;
    yazı tipi ağırlığı: gözü pek;
    }
  9. Tabloyu bir web tarayıcısında görüntülemek için HTML dosyanızı açın:

Çok Çizgili Hücre Masa Tasarımı

Bazı tablolar, çok çizgili bir hücre oluşturmak için birleştirilmiş satırlara sahip sütunlar içerir.

  1. Başlıkları olan yalnızca en üsttekini koruyarak mevcut tüm tablo satırlarını kaldırın:
    <masa>
    <tr>
    <inci>Başlık 1inci>
    <inci>Başlık 2inci>
    <inci>Başlık 3inci>
    tr>
    masa>
  2. Rowspan niteliğini kullanarak çok çizgili bir hücre oluşturun. Bu, o hücreyi belirtilen sayıda satır boyunca genişletir.
     Bölüm 1 
    <tr>
    <tdsatır aralığı="2">Çok satırlı hücretd>
    <td>Satır 1, Sütun 2td>
    <td>1. Satır, 3. Sütuntd>
    tr>
    <tr>
    <td>Satır 2, Sütun 2td>
    <td>Satır 2, Sütun 3td>
    tr>
  3. Farklı bir satır aralığı değerine sahip başka bir çok hücreli çizgi eklerken, karşılık gelen sayıyı ekleyin. tablo satırları HTML etiketleri. Bu, hücrenin yayıldığı satırların yüksekliğini veya sayısını eşleştirmek içindir. Örneğin, bir hücrenin satır aralığı 3 ise, tabloyu uygun şekilde hizalamak için diğer sütunlara üç satır eklemeniz gerekir.
     Bölüm 2 
    <tr>
    <tdsatır aralığı="3">Çok satırlı hücretd>
    <td>3. Satır, 2. Sütuntd>
    <td>3. Satır, 3. Sütuntd>
    tr>
    <tr>
    <td>4. Sıra, 2. Sütuntd>
    <td>4. Sıra, 3. Sütuntd>
    tr>
    <tr>
    <td>Satır 5, Sütun 2td>
    <td>5. Sıra, 3. Sütuntd>
    tr>
  4. Tabloyu bir web tarayıcısında görüntülemek için HTML dosyanızı açın:

Birleştirilmiş Satır Tablo Tasarımı

Çok satırlı hücrelere benzer şekilde, tablolar da birden çok sütun üzerinde birleşen satırlara sahip olabilir.

  1. Başlıkları olan yalnızca en üsttekini koruyarak mevcut tüm tablo satırlarını kaldırın:
    <masa>
    <tr>
    <inci>Başlık 1inci>
    <inci>Başlık 2inci>
    <inci>Başlık 3inci>
    tr>
    masa>
  2. Tabloya daha fazla tablo satırı ekleyin. Satırlardan birini 3 sütunda birleştirmek için colspan özelliğini kullanın:
     Bölüm 1 
    <tr>
    <tdstil="arka plan rengi: #ffedcc"kolspan="3">Q1td>
    tr>
    <tr>
    <td>2. Satır, 1. Sütuntd>
    <td>Satır 2, Sütun 2td>
    <td>Satır 2, Sütun 3td>
    tr>
    <tr>
    <td>3. Satır, 1. Sütuntd>
    <td>3. Satır, 2. Sütuntd>
    <td>3. Satır, 3. Sütuntd>
    tr>
    <tr>
    <td>Satır 4, Sütun 1td>
    <td>4. Sıra, 2. Sütuntd>
    <td>4. Sıra, 3. Sütuntd>
    tr>
  3. Tablonun bölümlerini ayırmak için başka bir birleştirilmiş satır ekleyin:
     Bölüm 2 
    <tr>
    <tdstil="arka plan rengi: #ffedcc"kolspan="3">Q2td>
    tr>
    <tr>
    <td>Satır 6, Sütun 1td>
    <td>Satır 6, Sütun 2td>
    <td>6. Sıra, 3. Sütuntd>
    tr>
    <tr>
    <td>7. Satır, 1. Sütuntd>
    <td>7. Satır, 2. Sütuntd>
    <td>7. Satır, 3. Sütuntd>
    tr>
    <tr>
    <td>Satır 8, Sütun 1td>
    <td>Satır 8, Sütun 2td>
    <td>8. Sıra, 3. Sütuntd>
    tr>
  4. Tabloyu bir web tarayıcısında görüntülemek için HTML dosyanızı açın:

Verilerinizden En İyi Şekilde Yararlanmak için Çekici Tablolar Kullanın

HTML tabloları, web sitenizde yapılandırılmış verileri görüntülemenin harika bir yoludur. Varsayılan görünümü iyileştirmek için bunları CSS ile şekillendirebilirsiniz. Ancak, kendinizi kaptırmadığınızdan ve düzen için tabloları kullandığınızdan emin olun; erişilebilirlik nedenleriyle, tabloları kesinlikle veri için saklayın.

Özellikle yayılan sütun ve satırlardan yararlanıyorsanız, daha büyük tabloların oluşturulması ve güncellenmesi zahmetli olabilir. İşaretlemeyi oluşturmak için kendi kodunuzu yazabilir veya Markdown gibi daha dostça söz dizimlerinden yararlanabilirsiniz.