HTML DERSLERİ 3 bölümünde tablo yapıyoruz. Web sayfaları için vazgeçilmez eleman olan tablolara kapı aralıyoruz.
Konuyu anlıyorum ama kodlayamıyorum…
“Nasıl oluyor da anladığım konuyu yazamıyorum. Öyle saçma şey mi olur?” demeyin. Konunun mantığını anlayıp da kodlamada takılmak, sanki platonik aşık olduğun birine duygularını anlatıyormuşsun gibi hissettirir. Hani böyle bulutlar birbirine çarpar da şey olur ya:) gibi bir şey… Konu başka bir şey söylüyor kod başka bir şey…
Başlarda derslerin mantığını anlamak çok kolay olur. Ama hep böyle devam etmez. Zor olan, kod ile konu arasındaki iletişimi sağlayabilmek. Bu iletişimin başlıca yolu ise pratik yapmaktır…
Tablolar <table> verileri daha düzenli bir biçimde sunmamızı sağlar. Mesela bir önceki liste konusundaki maddeleri tablo halinde daha toplu bir şekilde sitede gösterebiliriz. Tablolar iki amaçlı kullanılır, Yerleşim Amaçlı: Web sayfasında kullanılacak olan metin, resim vb. gibi içerikleri daha tertipli yerleştirmemize yardımcı olur. İkinci amacı ise Tablolu Veriler Oluşturmak için: Herhangi bir konuda sunulacak olan verinin tablo şeklinde kullanılmasına yardımcı olur.
<TABLE>
Tablolar, satır ve sütunlardan oluşur. Bunu browsera göstermek için de etiketleri biraz açalım. Tablo da tıpkı web sayfası gibi <thead> ve <tbody> etiketlerinden oluşur. Tabloya ait başlık ve içerik olacağından dolayı başına kısaca “t” yazarız. Tablo içerisine satır ekleyeceğimiz zaman <tr> ile gösterilir. Bu satır içerisindekileri ise <td> etiketini kullanırız. Konuyu bir örnek üzerinden gösterecek olursak; Klasik bir sınıf listesi yapmamız gerekiyor bu bilgileri kullanarak deneyelim;
Görüldüğü gibi önce tablo olduğunu bildirdik <table>, bu tabloya başlık yazacağımız yeri açtık <thead>, açılan başlıkların içeriğini yazdıktan <th> sonra artık başlık kısmıyla işimiz kalmadı. Şimdi sıra tablonun içerisine geldi.Bunu da <tbody> yazarak gösterdik, satır bilgilerini gireceğimiz yeri göstermek için <tr>, ve onun arasında yazılmış olan <td> etiketi de satırda yer alacak hücreleri oluşturur.
Dipnot: <title> etiketinin altındaki <meta> çalıştığınız program eğer Türkçe karakterleri desteklemiyorsa kullanabilirsiniz
<STYLE> / <TABLE>
Bir önceki serimizde başlatmış olduğumuz style mevzusunu burada da kullanacağız. HTML’de kodlama yaparken stil ve kod bölümleri iki ayrı kısma ayrılır ki kolaylık olsun diye.O yüzden bu tablonun rengi, başlığı, genişliği vs. önce planını çizip sonra kodlarla içeriği dolduruyoruz. Benzer bir örnekte görecek olursak;
Yapılan ders programı tablosunun içeriği daha fazla çoğaltılabilir. Mantığını kavradıktan sonra zaten aynı kodlar birbirini tekrarlıyor. Görüldüğü gibi tablodan önce <style> ayarlaması yapıldı. Bu style özelliklerinin anlamına bakacak olursak:
{font-family:arial; <!– Tabloda kullanılacak olan yazı tipi “arial” olduğunu, –>
border-collapse:collapse; <!– Tablo kenarlıklarının tek bir kenarlığa daraltılması veya standart HTML’de olduğu gibi ayrılması gerekip gerekmediğini –>
width:70; <!– Genişliğini piksel cinsinden belirtir. Ayrıca yükseklik bilgisi de “height:” girilebilir. –> }
th,td için kullanılan style özellikleri:
{border:1px solid red; <!– Kenarlığın 1px kalınlığında, düz çizgi ve renginin kırmızı olması, –>
text-align:left; <!– Hizasının sol tarafta olmasını, –>
padding:8px; <!– (Dolgu) Tablonun içerisinde yer alan verinin haricinde ne kadar alan kaplayacağını belirler. –> }
COLSPAN – ROWSPAN
Tablo içerisinde aynı veriyi tekrar yazmak yerine hücre birleştirme yaparak tek seferde yazabiliriz. Tıpkı Excel programında olduğu gibi. Bunun için kullanacağımız komutlar colspan ve rowspan. İkiz kardeş gibi isimleri olsa da işlev olarak colspan; ismindeki “col” sütunu temsil eder. Birleştireceğiniz hücreyi sütundan seçtiğimizde bu komutu kullanırız. Ama satırları birleştirmek istersek ‘row’span komutunu kullanırız. Bir örnekle daha detaylı inceleyelim…
HTML DERSLERİ 3 yazımızda İlk olarak tablomuzun çerçevesini ve rengini ‘border:2-red’ ayarladıktan sonra no, ad, soyad, sınıf olmak üzere ayrılmış 4 tane sütun mevcut tablomuzda. Bu 4 tane sütunu birleştirip “sınıf listesi” yazmak için colspana, 4 tane sütun birleştir komutunu veririz. Birleştirme işini yaptıktan sonra ne kadar genişlikte ve yükseklikte olacağını da değer vererek girdik. Tablonun içerisinde yer alan Ayşe K.-Ahmet Y. verileri için ortak nokta olan “5” için iki satırı rowspana,”2″ satırı birleştirmesi komutunu verdik.
Basit örnekle konuyu iyice oturtup diğer örneklerin çalışmasına geçmek son konuları öğrenmeyi daha iyi kolaylaştıracaktır. Bu sebeple HTML DERSLERİ 3 yazımızı dikkatle etüt edin. Tablolarla ilgili Tekrar bir çalışma daha yapacağız. Ayrıca ek örnek isterseniz w3school destek alabilirsiniz. Her örnek için farklı bir özellik öğreniyoruz. Arada geriye dönük çalışmak bir önceki yazdığınız kodu geliştirmenize fayda sağlayabilir. Style ve tablo konuları biraz üzerinde durulması gereken konulardan biri. Örnekler antrenman gibidir ne kadar üzerinde durursak o kadar konu hakkındaki bilgimizi güçlendirmiş oluruz. Şimdiden keyifli çalışmalar…
Yeni gelişim ve haberlerden geri kalmayın!…
