HTML - Tablolar
HTML tabloları, web yazarlarının metin, resimler, bağlantılar, diğer tablolar vb. Gibi verileri hücre satırları ve sütunları halinde düzenlemesine olanak tanır.
HTML tabloları, <table> etiketi <tr> etiketi tablo satırları oluşturmak için kullanılır ve <td>etiketi, veri hücreleri oluşturmak için kullanılır. <td> altındaki öğeler normaldir ve varsayılan olarak sola hizalanır
Misal
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Burada border<table> etiketinin bir özniteliğidir ve tüm hücrelere bir sınır koymak için kullanılır. Kenarlığa ihtiyacınız yoksa, border = "0" kullanabilirsiniz.
Tablo Başlığı
Tablo başlığı kullanılarak tanımlanabilir <th>etiket. Bu etiket, gerçek veri hücresini temsil etmek için kullanılan <td> etiketinin yerini alacak. Normalde en üst sıranızı aşağıda gösterildiği gibi tablo başlığı olarak koyarsınız, aksi takdirde herhangi bir satırda <th> elemanını kullanabilirsiniz. <th> etiketinde tanımlanan başlıklar ortalanır ve varsayılan olarak kalındır.
Misal
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Cellpadding ve Cellspacing Nitelikleri
Denilen iki özellik vardır cellpadding ve cellspacing size tablo hücrelerinde beyaz boşluk ayarlamak için kullanacaktır. Cellspacing özelliği, tablo hücreleri arasındaki boşluğu tanımlar, hücre dolgusu ise hücre sınırları ile hücre içindeki içerik arasındaki mesafeyi temsil eder.
Misal
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Colspan ve Rowspan Nitelikleri
Kullanacaksın colspaniki veya daha fazla sütunu tek bir sütunda birleştirmek istiyorsanız öznitelik. Benzer şekilde kullanacaksınrowspan iki veya daha fazla satırı birleştirmek istiyorsanız.
Misal
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Tablo Arka Planları
Aşağıdaki iki yoldan birini kullanarak tablo arka planını ayarlayabilirsiniz -
bgcolor öznitelik - Tüm tablonun veya yalnızca bir hücre için arka plan rengini ayarlayabilirsiniz.
background öznitelik - Tüm tablo veya yalnızca bir hücre için arka plan resmi ayarlayabilirsiniz.
Ayrıca kenarlık rengini de ayarlayabilirsiniz. bordercolor öznitelik.
Note- HTML5'te kullanımdan kaldırılan bgcolor , background ve bordercolor özellikleri. Bu nitelikleri kullanmayın.
Misal
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
İşte kullanmanın bir örneği backgroundöznitelik. Burada / images dizininde bulunan bir resmi kullanacağız.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Bu, aşağıdaki sonucu verecektir. Burada arka plan görüntüsü tablonun başlığına uygulanmadı.
Masa Yüksekliği ve Genişliği
Kullanarak bir tablo genişliği ve yüksekliği ayarlayabilirsiniz. width ve heightÖznitellikler. Tablo genişliğini veya yüksekliğini piksel cinsinden veya mevcut ekran alanının yüzdesi cinsinden belirtebilirsiniz.
Misal
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Tablo başlığı
captionetiketi, tablo için bir başlık veya açıklama görevi görür ve tablonun üst kısmında görünür. Bu etiket, HTML / XHTML'nin yeni sürümünde kullanımdan kaldırılmıştır.
Misal
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
Tablo Üstbilgisi, Gövde ve Altbilgi
Tablolar üç bölüme ayrılabilir - bir başlık, bir gövde ve bir ayak. Baş ve ayak, her sayfa için aynı kalan sözcükle işlenmiş belgedeki üstbilgi ve altbilgilere oldukça benzer, gövde ise tablonun ana içerik tutucusudur.
Bir masanın başını, gövdesini ve ayağını ayırmak için kullanılan üç unsur şunlardır:
<thead> - ayrı bir tablo başlığı oluşturmak için.
<tbody> - tablonun ana gövdesini belirtmek için.
<tfoot> - ayrı bir tablo altbilgisi oluşturmak için.
Bir tablo, farklı sayfaları veya veri gruplarını belirtmek için birkaç <tbody> öğesi içerebilir . Ancak <thead> ve <tfoot> etiketlerinin <tbody> 'den önce görünmesi dikkat çekicidir.
Misal
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>Bu, aşağıdaki sonucu verecektir -
İç içe Tablolar
Bir tabloyu başka bir tablonun içinde kullanabilirsiniz. Sadece tablolar değil, tablo veri etiketi <td> içindeki neredeyse tüm etiketleri kullanabilirsiniz.
Misal
Aşağıda, bir tablo hücresi içinde başka bir tabloyu ve diğer etiketleri kullanma örneği verilmiştir.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Bu, aşağıdaki sonucu verecektir -