HTML TEMELLERİ
HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)
HTML5
İLERİ SEVİYE
HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)
CSS TEMELİ
CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)
css tabloları
css tablosu
css'de tablolar
css de tablo oluşturma
css tablo ekleme
css hazır tablo
css ile tablo oluşturma
css ile tablo
css ile tablo yapma
css tablo yapımı
css tablo kenarlıkları kaldırma
css table borders all
css collapse table border
css a table border
css table width
table width and height in css
css horizontal align bottom
css for horizontal alignment
a css vertical align
css vertical-align
css horizontal divider
css horizontal menu divider
css hoverable table
css striped table
css striped table example
css for striped table
css table header color
css change table header color
css responsive table example
css responsive tables

CSS Tables(Tablolar)

CSS Tables(Tablolar)

Tablolarınızı Css ile özelleştirebilirsiniz. Kenarlık ekleyebilir. Bu kenarlıkların kalınlığını ayarlayabilir, rengini değiştirebilirsiniz.Tabloların kenarlıklarını daraltabilir, genişliğini ve yüksekliğini ayarlayabilirsiniz. Yatayda ve dikeyde hizalayabilir. Tablo elemanlarının tablo ile arasındaki boşluğu ayarlayabilirsiniz. Bunun gibi daha bir çok özelleştirme elbetteki olur. Bizde en çok kullanılan örnekleri ele alalım.

1-Table Borders(Tablo Kenarlıkları)

Tablonun etrafına,satırlarına ve sütunlarına çizgiler ekleyerek tam özellikli bir tablo oluşturabilirsiniz.Tabi bunun da değişik versiyonları oluyor.Bu örneğimizde her bir hücresi saran çizgi le hoş bir görünüm elde etmeye çalıştım.

Kullanımı:

Css
table, th , td {
border: 1px solid black;
}
Html
<h2>Her bir hücresi çevreli tablo:</h2>
<table>
<tr>
<th>Adı</th>
<th>Soyadı</th>
</tr>
<tr>
<td>Enes</td>
<td>Kılıç</td>
</tr>
<tr>
<td>Büşra</td>
<td>Kıratlı</td>
</tr>
</table>

2-Collapse Table Borders(Dar Tablo Kenarlıkları)

Tek çizgi ile oluşturulmuş tablo kenarlıkları ile de güzel görünümlü tablolar oluşturabilirsiniz.

Kullanımı:

Css
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
Html
<h2>Tek çizgi ile kullanılmış tablo:</h2>
<table>
<tr>
<th>Adı</th>
<th>Soyadı</th>
</tr>
<tr>
<td>Enes</td>
<td>Kılıç</td>
</tr>
<tr>
<td>Büşra</td>
<td>Kıratlı</td>
</tr>
</table>

3-Table Width and Height(Tablo Genişlik ve Yüksekliği)

Tablolarınızın genişlik ve yüksekliği en temel ayarlamanız gereken özellikler arasında gelir. Tablonun kendisi ne kadar yere sahip olacak yine tablonun satır ve sütunları ne kadar yükseklikte ve genişlikte olacak.Bu şekilde belirlemek zorundasınız.

Kullanımı:

Css
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
td{
padding:3px;
}
th {
height: 50px;
}
Html
<h2>Yükseklik ve Genişlik Değerleri</h2>
<p>Tablo başlıklarına 50 px boşluk vererek daha belirgin hale getirdik.</p>
<table>
<tr>
<th>Adı</th>
<th>Soyadı</th>
<th>Ücret</th>
</tr>
<tr>
<td>Enes</td>
<td>Kılıç</td>
<td>$350</td>
</tr>
<tr>
<td>Pelin</td>
<td>Işık</td>
<td>$280</td>
</tr>
<tr>
<td>Lale</td>
<td>Yemenli</td>
<td>$300</td>
</tr>
<tr>
<td>Pınar</td>
<td>Kırmalı</td>
<td>$250</td>
</tr>
</table>

4-Horizontal Alignment(Yatayda Hizalama)

Tablonun içeriğindeki verileri istediğiniz şekilde sola, sağa veya ortaya hizalayabilirsiniz.

Kullanımı:

Css
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
text-align: center;
}
Html
<h2>Yatayda Hizalama</h2>
<table>
<tr>
<th>Adı</th>
<th>Soyadı</th>
<th>Ücret</th>
</tr>
<tr>
<td>Enes</td>
<td>Kılıç</td>
<td>$350</td>
</tr>
<tr>
<td>Pelin</td>
<td>Işık</td>
<td>$280</td>
</tr>
<tr>
<td>Lale</td>
<td>Yemenli</td>
<td>$300</td>
</tr>
<tr>
<td>Pınar</td>
<td>Kırmalı</td>
<td>$250</td>
</tr>
</table>

5-Vertical Alignment(Dikeyde Hizalama)

Tablolarınız içindeki hücre verilerini istediğiniz gibi hizalayabilirsiniz. Üste, alta, ortaya, sağa veya sola tablonuzdaki veri türüne, tasarımınıza bağlı olarak istediğiniz şekilde ayarlayabilirsiniz.

Kullanımı:

Css
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
height: 50px;
vertical-align: bottom;
}
Html
<h2>Dikeyde Hizalama</h2>
<table>
<tr>
<th>Adı</th>
<th>Soyadı</th>
<th>Ücret</th>
</tr>
<tr>
<td>Enes</td>
<td>Kılıç</td>
<td>$350</td>
</tr>
<tr>
<td>Pelin</td>
<td>Işık</td>
<td>$280</td>
</tr>
<tr>
<td>Lale</td>
<td>Yemenli</td>
<td>$300</td>
</tr>
<tr>
<td>Pınar</td>
<td>Kırmalı</td>
<td>$250</td>
</tr>
</table>

6-Horizontal Dividers (Yatay Bölücü-Çizgileri)

Profesyonel tablo tasarımlarında artık bölücü çizgi ağırlıklı çalışılmaktadır. Göze daha hoş görünen bu çizgiler ile gözü yormayan çok çizgili tablo yapısını artık sektör geride bırakıyor. Onun yerine gözü daha az yoran tasarımları tercih ediyorlar.

Kullanımı:

Css
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
Html
<table>
<tr>
<th>Adı</th>
<th>Soyadı</th>
<th>Ücret</th>
</tr>
<tr>
<td>Enes</td>
<td>Kılıç</td>
<td>$350</td>
</tr>
<tr>
<td>Pelin</td>
<td>Işık</td>
<td>$280</td>
</tr>
<tr>
<td>Lale</td>
<td>Yemenli</td>
<td>$300</td>
</tr>
<tr>
<td>Pınar</td>
<td>Kırmalı</td>
<td>$250</td>
</tr>
</table>

7-Hovarable Table(Belirteçli Tablolar)

Mouse ile üzerine geldiğiniz ilgili satırı belirgin hale getirmek için genelde hafif bir renk tonu ile tablonun ilgili satırının rengini değiştiririz ki aynı satırdaki her hücreyi gözümüz daha iyi seçebilsin hem bizim hem ziyaretçilerin gözü yorulmasın diye.

Kullanımı:

Css
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {background-color:#f5f5f5;}
Html
<table>
<tr>
<th>Adı</th>
<th>Soyadı</th>
<th>Ücret</th>
</tr>
<tr>
<td>Enes</td>
<td>Kılıç</td>
<td>$350</td>
</tr>
<tr>
<td>Pelin</td>
<td>Işık</td>
<td>$280</td>
</tr>
<tr>
<td>Lale</td>
<td>Yemenli</td>
<td>$300</td>
</tr>
<tr>
<td>Pınar</td>
<td>Kırmalı</td>
<td>$250</td>
</tr>
</table>

8-Striped Tables(Çizgili Tablolar)

Bölücü çizgi tabloların ardından daha hoş görünümlü hangi hücrenin hangi satırda olduğunu anlayacağınız satırların sadece tek renkten değilde iki renkten oluşunca daha güzel görüneceği tablo yapısını inceleyeceğiz.

Kullanımı:

Css
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {background-color: #f2f2f2;}
Html
<table>
<tr>
<th>Adı</th>
<th>Soyadı</th>
<th>Ücret</th>
</tr>
<tr>
<td>Enes</td>
<td>Kılıç</td>
<td>$350</td>
</tr>
<tr>
<td>Pelin</td>
<td>Işık</td>
<td>$280</td>
</tr>
<tr>
<td>Lale</td>
<td>Yemenli</td>
<td>$300</td>
</tr>
<tr>
<td>Pınar</td>
<td>Kırmalı</td>
<td>$250</td>
</tr>
</table>

9-Table Headers Color(Tablo Başlıkları Rengi)

Tablolarınızın başlıklarının ögeleri ile ayırmak için öğeleri ile başlıkları farklı renklerde yapabilirsiniz.Bu sayede daha iyi bir tablo başlıklarına sahip olabilirsiniz.

Kullanımı:

Css
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #4CAF50;
color: white;
}
Html
<table>
<tr>
<th>Adı</th>
<th>Soyadı</th>
<th>Ücret</th>
</tr>
<tr>
<td>Enes</td>
<td>Kılıç</td>
<td>$350</td>
</tr>
<tr>
<td>Pelin</td>
<td>Işık</td>
<td>$280</td>
</tr>
<tr>
<td>Lale</td>
<td>Yemenli</td>
<td>$300</td>
</tr>
<tr>
<td>Pınar</td>
<td>Kırmalı</td>
<td>$250</td>
</tr>
</table>

9-Responsive Table(Duyarlı-Uyumlu Tablolar)

Tablolar ile ilgili en önemli konu bu.Aslında sadece tablolar değil tüm web sitenizde her elemanın her cihaza uyumlu olması gerekmektedir.Bunu çoğu zaman varsayılan tarayıcı otomatik olarak yapmaz.Tarayıcıya her türlü içerik ve içeriklerindeki özellikte olduğu gibi sizin ayarlayıp yapmanız gerekmektedir. Tablolarda olduğu gibi bu nedenle her site elemanını bu açıdan mutlaka ele alınız.

Kullanımı:

Css
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {background-color: #f2f2f2;}
Html
<p>overflow-x:auto özelliği sayesinde taşan tablolara otomatik kaydırma çubuğu atarız.</p>
<div style="overflow-x:auto;">
<table>
<tr>
<th>Enes</th>
<th>Kılıç</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Pelin</td>
<td>Işık</td>
<td>60</td>
<td>60</td>
<td>60</td>
<td>60</td>
<td>60</td>
<td>60</td>
<td>60</td>
<td>60</td>
<td>60</td>
<td>60</td>
</tr>
<tr>
<td>Lale</td>
<td>Yemenli</td>
<td>95</td>
<td>95</td>
<td>95</td>
<td>95</td>
<td>95</td>
<td>95</td>
<td>95</td>
<td>95</td>
<td>95</td>
<td>95</td>
</tr>
<tr>
<td>Pınar</td>
<td>Kırmalı</td>
<td>69</td>
<td>69</td>
<td>69</td>
<td>69</td>
<td>69</td>
<td>69</td>
<td>69</td>
<td>69</td>
<td>69</td>
<td>69</td>
</tr>
</table>
</div>


Paylaş:

Enes KILIÇ
Webmaster