HTML <table> Etiketi
Örnek
İki sütun ve iki satır içeren basit bir HTML tablosu:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
<table>etiketi bir HTML tablosunu tanımlar .
Bir HTML tablosu, bir <table>öğeden ve bir veya daha fazla <tr> ,
<th> ve <td> öğesinden oluşur.
<tr> öğesi bir tablo satırını, <th> öğesi bir tablo başlığını ve <td> öğesi bir tablo hücresini tanımlar.
Bir HTML tablosu ayrıca <caption> , <colgroup> , < thead> , <tfoot> ve <tbody > öğelerini içerebilir.
Tarayıcı Desteği
| Element | |||||
|---|---|---|---|---|---|
| <table> | Yes | Yes | Yes | Yes | Yes |
Genel Özellikler
Etiket ayrıca HTML'deki Global Nitelikleri<table> de destekler .
Etkinlik Özellikleri
Etiket ayrıca HTML'deki Etkinlik Niteliklerini<table> de destekler .
Daha fazla örnek
Örnek
Bir tabloya daraltılmış kenarlıklar nasıl eklenir (CSS ile):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
Örnek
Bir tablo nasıl sağa hizalanır (CSS ile):
<table style="float:right">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Örnek
Bir tablo nasıl ortalanır (CSS ile):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
}
table.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<table
class="center">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Örnek
Bir tabloya arka plan rengi nasıl eklenir (CSS ile):
<table style="background-color:#00FF00">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Örnek
Bir tabloya dolgu nasıl eklenir (CSS ile):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
Örnek
Tablo genişliği nasıl ayarlanır (CSS ile):
<table style="width:400px">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Örnek
Tablo başlıkları nasıl oluşturulur:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-45-678</td>
</tr>
</table>
Örnek
Altyazılı bir tablo nasıl oluşturulur:
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Örnek
Birden fazla satıra veya sütuna yayılan tablo hücreleri nasıl tanımlanır:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
İlgili Sayfalar
HTML öğreticisi: HTML Tabloları
HTML DOM referansı: Tablo Nesnesi
CSS Eğitimi: Şekillendirme Tabloları
Varsayılan CSS Ayarları
Çoğu tarayıcı, <table>öğeyi aşağıdaki varsayılan değerlerle görüntüler:
Örnek
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}