Bir HTML Tablosunda Satırları Etkilemeden Sütunlar Arasına Boşluk Nasıl Eklenir?
Dolgu sol ve sağ özellikleri, tablonun genel düzenini etkilemeden sütunlar arasına boşluk eklemek için kullanılır. Bu özellik, geliştiricilerin fazladan boşluk eklemesine olanak tanır ve bu boşluk, satırları etkilemez.
Aşağıdaki adımları izleyin:
1. Adım: Bir Tablo Yapısı Oluşturun
HTML dosyasında dört satır ve üç sütun içeren bir tablo olduğunu varsayalım:
< masa >
< tr >
< inci > İsim < / inci >
< inci > Sınıf < / inci >
< inci > Şehir < / inci >
< / tr >
< tr >
< td > John < / td >
< td > BS Kimya < / td >
< td > Londra < / td >
< / tr >
< tr >
< td > İskender < / td >
< td > BS Matematik < / td >
< td > Tokyo < / td >
< / tr >
< tr >
< td > Yusuf < / td >
< td > BS CS < / td >
< td > New York < / td >
< / tr >
< / masa >
Yukarıdaki kodu çalıştırdıktan sonra web sayfası şöyle görünür:
Çıktı, bir tablo yapısının oluşturulduğunu onaylar.
2. Adım: Yatay Dolgu Uygulama
Sol taraftan sütunlar arasına boşluk eklemek için “ sol dolgu ” CSS özelliği. Bu özelliği uyguladıktan sonra, veriler doğru hizalanmış gibi görünür. Bunun nedeni, dolgunun yalnızca sol taraftan uygulanmasıdır.
Şimdi, satır içi yöntemi kullanılarak uygulanabilen stillerin CSS bölümündeki 'td' öğesini seçin. Ardından, ' dolgusunu ekleyin 50 piksel ” daha iyi görselleştirme amacıyla boşluk eklemek ve kenarlık özelliği eklemek için:
td {sol dolgu: 50px;
sınır : 2 piksel sabit kırmızı;
}
Kodu çalıştırdıktan sonra, web sayfası şöyle görünür:
Çıktı, tablonun sütunları arasına boşluk eklendiğini görüntüler.
Şimdi dolguyu sağ taraftan ayarlamak için “ sağ dolgu ” özelliğinden yararlanılır. Aynı şekilde, ancak şimdi hücre verileri “ Sola hizalı ”. Kod:
td {sol dolgu: 50px;
sınır : 2 piksel sabit kırmızı;
}
Yukarıdaki kodu çalıştırdıktan sonra, web sayfası şöyle görünür:
Çıktı, sağ tarafa dolgu uygulanarak sütunlar arasındaki boşluğun artırıldığını doğrular.
Adım 3: Sol ve Sağ Dolgunun Kombinasyonu
Yukarıdaki adımda olduğu gibi, veriler her iki durumda da merkeze hizalanmamıştır ve bu, verileri profesyonellikten uzak kılar. Tasarım anlayışını bozmadan öne çıkarmak. Her iki özellik de aşağıdaki gibi aynı anda kullanılabilir:
td {sağ dolgu: 60px;
sol dolgu: 60px;
sınır : 2 piksel sabit kırmızı;
}
Yukarıdaki kodu çalıştırdıktan sonra, web sayfası şöyle görünür:
Çıktı, sütunlar arasına boşluk eklendiğini ve verilerin de ortaya hizalandığını onaylar.
Çözüm
Tablo sütunları arasındaki boşluk, sol ve sağ özelliklerinin doldurulması yardımıyla eklenebilir. Bu özellikler, hücreye sağ ve sol yönlerden fazladan boşluk ekler. Her iki özellik aynı anda veya ayrı ayrı kullanılabilir. Bu makale, satırları etkilemeden tablo sütunları arasına nasıl boşluk ekleneceğini başarıyla göstermiştir.