Temel Seviye
İleri Seviye
Sayfamıza tablolar eklemek için "<table> " etiketini kullanacağız. Bu etiketi sadece ve sadece verilerin tablo şeklinde gözükmesi için kullanmalıyız. Bu etiket sayfa tasarımı yapma, sayfayı bölümlere ayırma gibi sebeplerle kullanılmamalıdır. "<table> " etiketi sayfaya ekstra yük getirmektedir ve sayfanın açılış süresini uzatmaktadır. Bizde hızlı bir sayfa istediğimiz için "<table> " etiketini olabildiğince az kullanacağız, hatta elimizden geldiğince kullanmayacağız. Tasarımlarımız için "<div> " etiketini kullanacağız "<div> " etiketini bir sonra ki konuda ele alacağız.
Örnek olarak görelim...
Bu kodu tarayıcıda görmek için tıklayınız.
Row satırı ifade eder, rowspan ise satırların birleştirilmesini ifade eder. Bir satırı 1'den fazla satır büyüklüğünde göstermek istiyorsak " rowspan " özniteliğini kullanmalıyız. Örneğin Meyvelerin kilolarına göre fiyatlarının yazılı olduğu bir tabloda "1 kilo elma, 2 kilo elma, 3 kilo elma " olarak yazmak yerine elmayı sadece 1 kere yazsak ve her " Kilo " satırında gözükse bizi fazla kod yazmaktan kurtarmış olmaz mı?
Örnek olarak görelim...
Bu kodu tarayıcıda görmek için tıklayınız.
Col, ingilizce "Column" ifadesinden bir kısaltmadır. "Column" sütun anlamına gelir, "colspan" ise sütunların birleştirilmesini ifade eder. Bir sütunu 1'den fazla sütun büyüklüğünde göstermek istiyorsak "colspan" özniteliğini kullanacağız. Örneğin, Arkadaşlarımızın doğdukları ayları içeren bir tablo yapacağız ama her ismin ve ayın üzerine ayrı ayrı "Arkadaşlarımın Doğduğu Ay" yazmak istemiyoruz o yüzden "colspan" özniteliğimize "2" vererek fazla kod yazmaktan kurtuluyoruz ve tablomuz güzel bir görünüme kavuşuyor.
Örnek olarak görelim...
Bu kodu tarayıcıda görmek için tıklayınız.
Hücre içerisinde yazdığımız kelimeyi, kelime etrafında ki çerçeveden uzaklaştırmak istiyorsak yani kelimeye biraz daha fazla alan bırakalım istiyorsak "cellpadding" özniteliğini kullanacağız.
Örnek olarak görelim...
Bu kodu tarayıcıda görmek için tıklayınız.
Hücreler arası boşluğu ayarlamak istiyorsak "cellpadding" özniteliğini kullanacağız.
Örnek olarak görelim...
Bu kodu tarayıcıda görmek için tıklayınız.