Html ile Tablo Ozeliklleri Onemli Bilgiler


April 2019 (0) Iptv 11/21/2024


Bir HTML dosyasında tablo oluşturmak için 3 temel kodu bilmemiz yeterli:


KodAnlamı
<table> Tabloya başlamak.
<tr> Satıra başlamak.
<td> Sütuna başlamak.

HTML Kodu

<table>
<tr>
<td>satır 1, sütun 1</td>
<td>satır 1, sütun 2</td>
</tr>
<tr>
<td>satır 2, sütun 1</td>
<td>satır 2, sütun 2</td>
</tr>
</table>

HTML Görünümü

satır 1, sütun 1 satır 1, sütun 2
satır 2, sütun 1 satır 2, sütun 2
Burada dikkat edilmesi gereken birkaç nokta var. Birincisi mutlaka satırlardaki sütun sayıları eşit olmalıdır. Eğer iki sütunu birleştireceksek colspan="" ya da iki satırı birleştireceksek rowspan="" özelliğini td kodu içerisinde kullanarak tırnak işareti arasına kaç sütun ya da satır birleştiğini yazmamız gereklidir.

HTML Kodu

<table border="1">
<tr>
<td colspan="2">satır 1, sütun 1 ve 2 birleşti</td>
</tr>
<tr>
<td rowspan="2">satır 2 ve 3 birleşti, sütun 1</td>
<td>satır 2, sütun 2</td>
</tr>
<tr>
<td>satır 3, sütun 2</td>
</tr>
</table>

HTML Görünümü

satır 1, sütun 1 ve 2 birleşti
satır 2 ve 3 birleşti, sütun 1 satır 2, sütun 2
satır 3, sütun 2
Dikkat edilirse rowspan="2" kullandığımız satırdan sonra sadece tek sütun kullandık. Bu da satır 3, sütun 2'yi oluşturdu. Bu sayılarda yapacağınız yanlışlık tabloda görünümde sorunlar çıkaracaktır.

Tablo Özellikleri

ÖzellikAnlamı
border="0" Tablo kenarlığı boyutu.
cellspacing="0" Sütunlar arası kenarlık boşluğu.
cellpadding="0" Satırlar arası kenarlık boşluğu.
width="genislik" Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir.
class="stil" Tablo stili belirtilebilir (CSS bölümünde açıklanıyor).
TD (Sütun) Özellikleri

ÖzellikAnlamı
align="hiza" Kutu hizası, left, right, center kullanılabilir.
width="genislik" Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir.
height="yukseklik" Tablo yüksekliği. Piksel ya da yüzde olarak ifade edilebilir.
class="stil" Tablo stili belirtilebilir (CSS bölümünde açıklanıyor).
NOT: Eğer bir sütuna hiçbir şey yazmadan boş bırakırsak sütun görünmeyecektir. Bu sorunu çözmek için &nbsp; kullanarak kutuda boşluk karakterine yer verirseniz kenarlıkların göründüğünü göreceksiniz.


Yorum yapabilmek için giriş yapınız

Giriş Yap

Sitede Ara

En Çok Okunanlar

Android Cihazlara POP3 E-Posta Hesabı Kurulumu (1773)
Windows simgelerinde beyaz ikon sorunu ve çözümü (1359)
SQL REPLACE() Kullanımı (907)
Yerel Ağ Bağlantısına girmek istediğimde ''Bağlantı özelliklerine erişmek için yeterli yetkiniz yok.Yöneticinize başvurun'' uyarısı.. (522)
Access violation at address 0518fde4 inmodule NETINFO.dll Read of adress 00000000 (467)
CMD komutları ile Windows Aktivasyonu (380)
PatchCleaner v1.4.2.0 indir Windows Installer Temizleme Programı (370)
Bedava Netflix Hesapları 2022 (Ücretsiz Premium Hesaplar) (369)
MailEnable Webmail Unknown or Disabled User Hatası (360)
Server communication failure. Please refresh your browser and try again. (341)
Turbobit Premium Hesaplar Bedava Güncel Üyelikler 2022 (334)
There is already an object named in the database Cozum (332)
Turbobit Premium Hesaplar Güncel Liste 2022 (327)
Windows 10 Gereksiz Servislerin Kapatılması - Resimli Anlatım (307)
Yazıcı hata kodu 0x0000011b sorun ve cozumu (306)
Windows Bileşen Deposu (WinSxS) Klasörünü Temizleme (290)
Adobe After Effects CC 2019 Full İndir – v16.1.1.4 (243)
Linq ile inner Join Kullanımı (239)
ASP.NET MVC Email Doğrulama Sayfası (Verification) (238)
Dinozor Nesline Son Veren Silen Asteroit Felaketi, Nasıl Gerçekleşti? (227)
3 Adımda Server olay loglarının silinmesi (214)
Windows 10 durdurulabilecek hizmetler (199)
Bedava Turbobit Premium Hesap 2022 (%100 Güncel Hesaplar) (193)
Visual Studio 2017 Dil Ekleme/Değiştirme (185)
Yedekleme, Düzenleme, Redmi Note 10 Lite QCN Dosyasını Geri Yükleme ve IMEI’yi Onarma (168)

Son Yorumlar