Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu

... konulu sunumlar: "Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu"— Sunum transkripti:

1 Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu
HTML TABLOLAR Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu

2 Html’de Tablolar <table> Etiketi
Tablo ile ilgili tüm etiketleri kapsar(<tr>,<td>) En sık kullanılan özellikleri Align: Tablonun yatayda hizalanmasını için kullanılır Border : Çerçeve kalınlığını belirler CellSpacing: Hücreler arası boşluğu belirler CellPadding: Hücre içeriğinin hücre sınırlarına olan uzaklığını belirler Width/Height: Tablonun genişlik ve yüksekliğini sayısal olarak ya da yüzdelik olarak belirler

3 Html’de Tablolar <tr> Etiketi
Tabloya satır eklemek için kullanılır Tablolar oluşturulurken önce satırlar daha sonra o satır içindeki sütunlar oluşturulur Aldığı özellikler; Align: İçeriğin yatayda hizalanması için kullanılır Valign: İçeriğin dikeyde hizalanmasını sağlar. Top, Middle, Bottom BgColor: Arka plan rengini belirler.

4 Html’de Tablolar <td> Etiketi
Bir satır üzerinde sütun oluşturmak için kullanılır Satır etiketleri arasında kullanılır Aldığı özellikler; Align: İçeriği yatayda hizalar ColSpan/RowSpan: Hücreleri birleştirmek için kullanılır Width/Height: Sütunun genişliğini ve yüksekliğini ayarlamak için kullanılır Valign: Düşeydeki konumunu ayarlar. Bgcolor: Arka plan rengini belirtir

5 Html’de Tablolar Hücreleri Birleştirmek
<td> etiketinin aşağıda verilen özellikleri kullanılır ColSpan: Satırdaki hücreleri birleştirmek için kullanılır. Sütunları birleştirir. Sayısal değerler alır. RowSpan: Aynı sütundaki hücreleri birleştirmek için kullanılır. Satırları Birleştirir. 2. ve 5. hücreler alt altta olduğu için rowspan parametresi 2 hücre birleştirileceği için 2 değeri ile kullanılması gerekmektedir 4 ve 5. hücreler yan yana olduğu için Colspan parametresi 2 hücre birleştirileceği için 2 değeri ile kullanılması gerekmektedir

6 Hücreleri Birleştirmek Aşağıda verilen tabloyu oluşturunuz
Html’de Tablolar Hücreleri Birleştirmek Aşağıda verilen tabloyu oluşturunuz

7 Hücreleri Birleştirmek Aşağıda verilen tabloyu oluşturunuz
Html’de Tablolar Hücreleri Birleştirmek Aşağıda verilen tabloyu oluşturunuz

8 Hücreleri Birleştirmek Aşağıda verilen tabloyu oluşturunuz
Html’de Tablolar Hücreleri Birleştirmek Aşağıda verilen tabloyu oluşturunuz

9 Hücreleri Birleştirmek Aşağıda verilen tabloyu oluşturunuz
Html’de Tablolar Hücreleri Birleştirmek Aşağıda verilen tabloyu oluşturunuz