Merhaba, bir projemde C# HTML Div ile Tablo Düzeni Oluşturma işlemi yapmak gerekiyordu. Yani HTML Div etiketini kullanarak bir tablo yapısı üretmem gerekiyordu. İnternette html table generator diye bir arama yaparsanız aslında ne demek istediğimi tam olarak anlayabilirsiniz. Kısacası dışarıdan girilecek olan satır ve sütun sayısına göre bir tablo oluşturacak kodlar…
C# HTML Div ile Tablo Düzeni Oluşturma
HTML hakkında bilgisi olan arkadaşlar bilir ki CSS olmadan aslında bu düzeni yapmak mümkün değil. Yapsak bile bir şey göremeyiz. Çünkü kenarlıkları vs olmayacağı için üretilse bile görünmez. Ben bu işlem için bir yerden hazır tablo CSS ayarları buldum ve onları kullandım. Bu CSS’ler bir HTML sayfasında zaten eklenmiş olması gerekiyor.
Ben projemde kullandığım şekilde sizlere anlatacağım.
Yapmak istediğim şey HTML kodları ile bir tablo düzeni oluşturup bunu başka HTML dosyalarında kullanabilmekti. Giriş kısmında da dediğim gibi internette html table generator diye arama yaparsanız demek istediğimi anlarsınız. Benim sizlerle paylaşacağım şey de, C# kullanarak bir generator (oluşturucu) yapmak.
Tablo İçin CSS Kodları
Şimdi tablo düzeni için gerekli CSS kodları aşağıdaki gibidir.
.divTable {
display: table;
width: 794px;
}
.divTableRow {
display: table-row;
clear:left;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell, .divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
float:left;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
Elinizde zaten bir HTML dosya olduğunu ve CSS’in head etiketleri arasında eklenmiş olduğunu varsayıyorum. Yukarıdaki CSS’leri kullanarak C# kodlarımızı yazacağız. Yani Div ‘lere yukarıdaki CSS’leri vereceğiz.
Tablo İçin C# Kodları
Şimdi 4 tane değişken belirliyoruz.
string Class1, Class2, Class3, Class4;
// satir ve sütun sayısı sorduğumuz formdan gelen veriler.
int rows = fr.satir, column = fr.sutun;
if (fr.chk_responsive.CheckState == CheckState.Checked)
{
Class1 = "'container-fluid'";
Class2 = "";
Class3 = "'row'";
Class4 = "'col-xs-" + column.ToString() + " col-sm-" + column.ToString() + " col-md-" + column.ToString() + " col-lg-" + column.ToString() + " col-xl-" + column.ToString() + "' ";
}
else
{
Class1 = "'divTable'";
Class2 = "'divTableBody'";
Class3 = "'divTableRow'";
Class4 = "'divTableCell'";
}
Ben burada iki farklı yöntem kullanıyorum aslında. Biri responsive olmayan bir tablo, diğeri ise Boostrap ile responsive bir tablo bu sebeple Css Class adlarını bir değişkene atama yaparak kullanıyorum.
Eğer responsive checkbox’u işaretlenmişse Div’lerin class’ları bootsrap classları olacak değil ise benim önceden ayarladığım class’lar olacak.
Col-xs kısmınu Boostrap bilenler anlamıştır. Anlamadıysanız bu yazımı inceleyebilirsiniz yada Boostrap Grid System’i araştırabilirsiniz.
Şimdi C# html div tablo oluşturma kodlarını vereceğim.
if (rows > 0 && column > 0)
{
Table_HTML = "<div class=" + Class1 + ">";
if (fr.chk_responsive.CheckState == CheckState.Unchecked)
{
Table_HTML += "<div class=" + Class2 + ">";
}
for (int row = 0; row < rows; row++)
{
Table_HTML += "<div class=" + Class3 + ">";
for (int col = 0; col < column; col++)
{
Table_HTML += "<div class=" + Class4 + "> </div>";
}
Table_HTML += "</div>";
}
Table_HTML += "</div>";
Table_HTML += "</div> ";
}
else
MessageBox.Show("Satır ve Sütun 0 dan büyük olmalıdır.");
Kodları açıklamam gerekirse;
- ilk olarak satır ve sütun 0 olamaz dedik.
- Eğer satır ve sütün 0 değilse Table_HTML değişkenini kullanarak tablomuzu oluşturuyoruz.
- Burada responsive olmayan tablo için 4 seviye, responsive olan tablo için 3 seviye class var.
- Class1 kısmında en dıştaki kapsayıcı olarak anabileceğimiz div var. Bu Div’in classı, Class1 değişkenindeki değer olacak. container-fluid yada divTable
- Class2 kısmında eğer tablomuz responsive olmayacak ise bir seviye daha ekleniyor. Responsive olacak ise 3 seviye yeterli.
- Dış iki seviyeyi yazdırdıktan sonra satır ve sütunları oluşturmak için döngü kuruyoruz.
- İlk döngümüz satırlar için. Diyelim ki 5 satır dedik, önce ilk satır oluşturulacak sonra bu satır içindeki sütunlar (hücreler) oluşturulacak. Böylece satır ve sütunlar tamamlanacak.
- Satırlar için Class3 değişkenini kullanıyoruz. Burada seçimimize göre satırlar row yada divTableRow classını alacak.
- İkinci döngümüz ise sütunları (hücreleri) oluşturacak. Diyelim ki 10 sütun dedik. İlk satırın içerisine 10 tane sütun (hücre) eklenecek.
- Parantez içerisinde hücre diyorum çünkü aslında Tablolar hücrelerden oluşur. Yatay sıraya satır, dikey sıraya da sütun denir.
- Sütunlar için Class4 değişkenini kullanıyoruz. Burada seçimimize göre sütunlar col-xs, sm, md, lg,xl vs. yada divTableCell classını alacak.
- Döngüler bittikten sonra, döngüye başlamadan önce açtığımız Div’lerin kapanışlarını ekliyoruz.
Bu şekilde bir tablo üretilmiş oluyor arkadaşlar.
Sonuç
3 satır 5 sütunluk bir tablo hazırlamış olalım. Çıktı aşağıdaki gibi olacak.
<div class='divTable'> <div class='divTableBody'> <div class='divTableRow'> <div class='divTableCell'> </div> <div class='divTableCell'> </div> <div class='divTableCell'> </div> <div class='divTableCell'> </div> <div class='divTableCell'> </div> </div> <div class='divTableRow'> <div class='divTableCell'> </div> <div class='divTableCell'> </div> <div class='divTableCell'> </div> <div class='divTableCell'> </div> <div class='divTableCell'> </div> </div> <div class='divTableRow'> <div class='divTableCell'> </div> <div class='divTableCell'> </div> <div class='divTableCell'> </div> <div class='divTableCell'> </div> <div class='divTableCell'> </div> </div> </div> </div>
Bu kodları bir html dosyasına yazıp çalıştırdığımızda ise görüntüsü şöyle olacak.
NOT: Buradaki kırmızı çizgi, benim oluşturduğum HTML dosyasında Body etiketine border CSS’i eklemiş olmamdan dolayıdır.
Gördüğünüz gibi 3, satır 5 sütunlu bir tablo oluştu.
C# HTML Div ile Tablo Düzeni Oluşturma yazımda bu kadardı arkadaşlar. Umarım faydası olmuştur.
Diğer derslerimizde görüşmek üzere…
C# Eğitim Seti sayfasına gitmek için tıklayınız. Derslerime özel olarak hazırladığım Github Projeme bağlantıdan ulaşabilirsiniz…
455. Yazı Bitti… :)
Beğendim!
Harika!
İlginç!
Beğenmedim
