İçindekiler
Geçmişte, içeriğin orantılarını korumak, bölümler oluşturmak, bilgileri bölmek vb. için sitelerin düzenini kontrol etmek için HTML tabloları kullanılıyordu. Şu anda bu, aslında öğenin yeni özellikleriyle birlikte kötü bir uygulamadır. tablo HTML5'te, bunun gerçek amacı olan, yani verileri 2 boyutlu dizilerde görüntülemek için kullanılması için her türlü çaba gösterilmiştir.Tablo öğesi
eleman tablo büyük kaptır ve akan herhangi bir öğenin içinde olabilir, örneğin div. iç eleman tablo unsurlara sahip olacağız: resim yazısı, ortak grup, thead, tbody, tfoot, tr, th Y td, tablomuza anayasa vermek için gerekli olan, ayrıca yeni standart aşağıdaki özellikleri bünyesinde geçersiz kılmıştır. tablo ve yalnızca CSS tarafından kullanılmalıdır: özet, hizalama, genişlik, bgcolor, hücre doldurma, hücre aralığı, çerçeve, kurallar. Bu öğe için CSS kuralı şu şekilde olacaktır:
tablo {ekran: tablo; border-collapse: ayrı; sınır aralığı: 2 piksel; sınır rengi: gri; } Tr öğesi
Çok iyi bildiğimiz gibi, tablolar iki temel öğeden oluşur, satırlar ve sütunlar, burada satırlar her bir bilgi kaydını ve sütunlar bilginin yapısını ve türünü temsil eder, şimdi satırları oluşturmak için kullanılan öğeyi görelim, bu öğe tr. Bu, aşağıdaki öğelerin bir çocuğu olabilir: masa, thead, tfoot, tbodyGördüğümüz gibi, bir tablonun doğrudan çocuğu veya tablonun çocukları olan ve yapısını tanımlayan öğelerin çocuğu olabilir. 1 veya daha fazla öğe içermelidir td veya NS uygun olduğu şekilde, bazı eski özellikleri de yeni HTML5 standardına yerleştirilmiştir, bunlar: hizala, char, charoff, valign, bgcolor. Özel olarak CSS tarafından çalıştırılması gereken CSS'nin bir kural olarak aşağıdaki yapıya sahip olduğunu söyledi:
tr {ekran: tablo satırı; dikey hizalama: devralma; kenarlık rengi: devral;} Td öğesi
Bu eleman, tablodaki satırlarımızdaki sütunları tanımlar, bu da bir kayıt içindeki bilgileri ayırmamızı ve böylece ihtiyaçlarımıza göre sınıflandırmamızı sağlar, elemanın çocuğudur. tr, sahip olabileceği geçerli nitelikler şunlardır: colspan, satır aralığı, başlıklar ve artık CSS'de ele alınması gereken eski nitelikler şunlardır: kısaltma, eksen, hizalama, genişlik, karakter, charoff, valign, bgcolor, yükseklik, nowrap, kapsam. Bu öğe için CSS kuralı aşağıdaki gibidir:
td {ekran: tablo hücresi; dikey hizalama: devralma; }ilk masamız
Şimdiye kadar gördüklerimizi uygulamaya koyalım, tablomuz için kapsayıcımız veya üst öğemiz içinde satırlara ve sütunlara ihtiyacımız olduğunu zaten biliyoruz, hadi onu HTML koduna nasıl alacağımıza bakalım:
Örnek
| Elmalar | Yeşil | Orta |
| portakal | turuncu | Büyük |
Bu kod bize 2 satırlı ve 3 sütunlu bir tablonun yapısını verir, gördüğümüz gibi basit bir metindir, bu da bizi şu sonucu görmeye yönlendirir:
