Neden bir tasarımda <table> kullanmamız gerekmiyor?

Tabloları olan web siteleri tasarlamamamız için açık ve mantıklı nedenler nelerdir? Yararları nelerdir, bu fikri sektörde neyin tahrik ettiği? Bir masa kullanmak ne zaman iyidir?

1) Tablolar, sayfa düzenleri için kullanılmamalıdır, çünkü:

• Tarayıcının en iyi şekilde indirmesi gerektiğinden yavaşlatmak için - tablonun hepsini değilse - düzgün şekilde oluşturmak için

• Masa dışı yerleşim düzenlerinden daha fazla HTML gerektirir, bu da daha yüksek yükleme ve görüntü oluşturmanın yanı sıra artan bant genişliği kullanımı anlamına gelir

• Hızlı bir şekilde karmaşıklaşabildikleri için bakımı bir kabus olabilirler.

• Metin kopyalamayı bozabilirler

• Ekran okuyucularını olumsuz etkiler ve içeriğinizi bazı kullanıcılar tarafından erişilemez duruma getirebilir

• Uygun anlamsal işaretleme kullanmak kadar esnek değillerdir.

• Hiçbir zaman sayfa düzenleri için kullanılmaları amaçlanmadı.

• Tabloları duyarlı bir düzen haline getirmek, kontrolü çok zor

2) Tablo verileri için bir tablo kullanın. Masalar bunun için var.

Ayrıca bakınız: İnsanlar neden divs'li masalar yapıyorlar?

Tablolar tasarım değil tablo verileri içindir. İnsanlar genellikle sayfaları "tablosuz" yapmanın ardındaki motivasyonu yanlış anlarlar.

Mizanpajınızı oluşturmak için tablo kullanmak yanlış. Mizanpaj için diğer öğeleri kullanmalısınız (divs, listeler, bölümler, makaleler, başlıklar, altbilgiler, asitler, vb.). Ve minimum HTML / CSS ile harika efektler elde edebilirsiniz (kodunuzu anlamsal olarak anlamlı, hafif ve bakımı kolaydır).

Tabii ki, tablo verileri bir tablo öğesinin içinde olmalıdır. İsterseniz, thead, tfoot, tbody, th, caption vb. Ekleyerek tabloların anlamlarını bile geliştirebilirsiniz. .

Yani, tablo tabanlı tasarıma geçmeyin ve uygun olan herhangi bir HTML / CSS çözümü kullanın. HTML anlam işaretlemesinden başlayın ve ardından tasarımı CSS ile oluşturun. Bu herkesi güvende tutmalı. Bunu kural olarak kullanın.

Tablolar veri içermeli ve tasarım öğeleri içermemelidir.

Tablolar yalnızca tablo verilerini görüntülerken kullanılmalıdır. Aksi takdirde, ekran için genellikle kötü bir seçimdir.

Tablo kullanmamak için asıl sebep:

Bir tablonun varsayılan düzeni: table-layout:fixed

Bu, tarayıcıya tabloyu analiz etmesini ve hücreleri içinde bulunan öğeleri içerecek şekilde sabitlemesini söyler, bu biraz zaman alır. (bu nedenle tablolar karmaşık veriler için çok iyidir)

Alt satır: Tablo, DIV elemanlarını kullanırken tersine, içindeki tüm içerik oluşturulduktan sonra hazırlanır .

Web tasarım yapısı için tabloları sabit olarak karıştırılmış sıvıda kullanıyorum ve pek çoğunun tabloların noobs için olduğunu söylüyorlar, başkalarının eski okul çocukları için olduğunu söylüyorlar, her zaman DIVS'nin en iyisi olduğunu söylüyorlar; diğer şey.

Daha iyi bir nedir <br>ya <p></p>? Aynı şey

Ben ve yeni 2015 web tasarımımdaki eski masalarım, her biri 200px'lik iki yan sütunla karıştırılan% 100 genişliğindeki dost canlısı cep telefonumla herkesi iz bırakabiliyor.

Açıkçası masaların içinde gittikçe daha fazla masa koymak çirkin, bu da DIVS'nin kullanışlı olduğu yer. Tablolar, divs'in yapamadığı şeyleri yapabilir ve divs, tabloların yapamadığı şeyleri yapabilir.

Varsayılan tablo düzenini söyleyenler düzeltildi mi? Sana bir örnek vereyim

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>

Potansiyeli şimdi görüyor musunuz? PC'de ve cep telefonunda bir göz atın. Ah evet ve önyüklemeye ihtiyacım bile yok.

Şimdi divs ile aynı yapmak için hizalama float ve bok görüntülemek için bir sürü CSS kodu yazmak zorunda. Kim daha az kod yazdı? Ben mi! Müşterilerin neye ihtiyacı var? 1 yılda veya 1 ayda bir sayfa biten bir adam?

Şimdi divs ile tasarımı geliştirelim

<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>
<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>

Çok güzel bir 5 sütun tasarım düzeni divs ve tabloları kullanarak.

Cevabınız: ikisi birlikte daha iyi çalışır ve daha hızlıdır ve televizyonlarda ve küçük cep telefonlarında bile her tasarımda iyi görünecektir.