Table Tagı Nasıl Kullanılır?
HTML ile tablolar oluşturmak için kullanılır.
Blok yapılarındaki web siteleri kullanılmadan önce web siteleri table tagları arasında tasarlanırdı. Bu hız sorunları ve kod ayıklama, hata bulma yüzünden artık kullanılmamaktadır.
<table border="1">
<caption>Tablo Başlığı</caption>
<colgroup>
<col style="background-color: aqua">
<col style="background-color: chartreuse;">
</colgroup>
<tr>
<th>başlık 1, hücre 1</th>
<th>başlık 1, hücre 2</th>
</tr>
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 3, hücre 1</td>
<td>satır 3, hücre 2</td>
</tr>
</table>
<caption>Tablo Başlığı</caption>
<colgroup>
<col style="background-color: aqua">
<col style="background-color: chartreuse;">
</colgroup>
<tr>
<th>başlık 1, hücre 1</th>
<th>başlık 1, hücre 2</th>
</tr>
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 3, hücre 1</td>
<td>satır 3, hücre 2</td>
</tr>
</table>
Table Tag Parametleri
Tag | Description |
---|---|
<table> | Defines a table |
<th> | Defines a header cell in a table |
<tr> | Defines a row in a table |
<td> | Defines a cell in a table |
<caption> | Defines a table caption |
<colgroup> | Specifies a group of one or more columns in a table for formatting |
<col> | Specifies column properties for each column within a <colgroup> element |
<thead> | Groups the header content in a table |
<tbody> | Groups the body content in a table |
<tfoot> | Groups the footer content in a table |
<table border="1">
<thead>Ders Dağılımı</thead>
<caption align="bottom">
Tablo 1.1: Bölümlere göre dersler
</caption>
<tr>
<th>Bilgisayar</th>
<th>Elektronik</th>
<th>Elektrik</th>
</tr>
<tbody>
<tr>
<td>Web Tasarımı</td>
<td>Uydu Alıcısı</td>
<td>Çağırma Tes.</td>
</tr>
<tr>
<td>Programlama</td>
<td>İletişim Tek.</td>
<td>Dağıtım Panoları</td>
</tr>
</tbody>
</table>
<thead>Ders Dağılımı</thead>
<caption align="bottom">
Tablo 1.1: Bölümlere göre dersler
</caption>
<tr>
<th>Bilgisayar</th>
<th>Elektronik</th>
<th>Elektrik</th>
</tr>
<tbody>
<tr>
<td>Web Tasarımı</td>
<td>Uydu Alıcısı</td>
<td>Çağırma Tes.</td>
</tr>
<tr>
<td>Programlama</td>
<td>İletişim Tek.</td>
<td>Dağıtım Panoları</td>
</tr>
</tbody>
</table>
Rowspan ve Colspan
HTML sayfalarında tablolarda bazı hücreleri birleştirmek gerekebilir. Eğer aynı satırdaki hücreleri birleştirmek istiyorsak Colspan, aynı sütundaki hücreleri birleştirmek istiyorsak Rowspan kullanmamız gerekir.
<table border="1" >
<tr>
<td>C</td><td>Delphi</td><td>Pascal</td></tr>
<tr>
<td>XML</td><td>Borland C</td><td>HTML</td>
</tr>
<tr>
<td>PHP</td><td>Basic</td><td>ASP</td></tr>
</table>
<tr>
<td>C</td><td>Delphi</td><td>Pascal</td></tr>
<tr>
<td>XML</td><td>Borland C</td><td>HTML</td>
</tr>
<tr>
<td>PHP</td><td>Basic</td><td>ASP</td></tr>
</table>
<table border="1" >
<tr>
<td colspan="2">Delphi</td>
<td>Pascal</td></tr>
<tr>
<td>XML</td>
<td>Borland C</td>
<td rowspan="2">HTML</td></tr>
<tr>
<td>PHP</td>
<td>Basic</td></tr>
</table>
<tr>
<td colspan="2">Delphi</td>
<td>Pascal</td></tr>
<tr>
<td>XML</td>
<td>Borland C</td>
<td rowspan="2">HTML</td></tr>
<tr>
<td>PHP</td>
<td>Basic</td></tr>
</table>
Örnek 1:
<!doctype html>
<html>
<head>
<title>Tablo Uygulaması</title>
<meta charset="utf-8"/>
</head>
<body>
<table border=2 bordercolor="Red" >
<tr>
<td colspan="2" width="100">5B Sınıfı</td>
</tr>
<tr>
<td>Kız</td>
<td>Erkek</td>
</tr>
<tr>
<td>12</td>
<td>18</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Tablo Uygulaması</title>
<meta charset="utf-8"/>
</head>
<body>
<table border=2 bordercolor="Red" >
<tr>
<td colspan="2" width="100">5B Sınıfı</td>
</tr>
<tr>
<td>Kız</td>
<td>Erkek</td>
</tr>
<tr>
<td>12</td>
<td>18</td>
</tr>
</table>
</body>
</html>
Örnek 2:
<!doctype html>
<html>
<head>
<title>Tablo Uygulaması</title>
<meta charset="utf-8"/>
</head>
<body>
<table border=2 bordercolor="Red" >
<tr>
<td colspan="3" width="100">STOKLAR</td>
</tr>
<tr>
<td width="100">Sıra No</td>
<td width="100">Stok Adı</td>
<td width="100">Stok Adeti</td>
</tr>
<tr>
<td>1</td>
<td>Kalem</td>
<td rowspan="3">50</td>
</tr>
<tr>
<td>2</td>
<td>Kitap</td>
</tr>
<tr>
<td>3</td>
<td>Silgi</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Tablo Uygulaması</title>
<meta charset="utf-8"/>
</head>
<body>
<table border=2 bordercolor="Red" >
<tr>
<td colspan="3" width="100">STOKLAR</td>
</tr>
<tr>
<td width="100">Sıra No</td>
<td width="100">Stok Adı</td>
<td width="100">Stok Adeti</td>
</tr>
<tr>
<td>1</td>
<td>Kalem</td>
<td rowspan="3">50</td>
</tr>
<tr>
<td>2</td>
<td>Kitap</td>
</tr>
<tr>
<td>3</td>
<td>Silgi</td>
</tr>
</table>
</body>
</html>
Örnek 3:
<!doctype html>
<html>
<head>
<title>Tablo Uygulaması</title>
<meta charset="utf-8"/>
</head>
<body>
<table border=2 bordercolor="Red" >
<tr>
<td align="center" colspan="3" width="100">STOKLAR</td>
</tr>
<tr>
<td width="100">Sıra No</td>
<td width="100">Stok Adı</td>
<td width="100">Stok Adeti</td>
</tr>
<tr>
<td>1</td>
<td>Kalem</td>
<td align="center" rowspan="3">50</td>
</tr>
<tr>
<td>2</td>
<td>Kitap</td>
</tr>
<tr>
<td>3</td>
<td>Silgi</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Tablo Uygulaması</title>
<meta charset="utf-8"/>
</head>
<body>
<table border=2 bordercolor="Red" >
<tr>
<td align="center" colspan="3" width="100">STOKLAR</td>
</tr>
<tr>
<td width="100">Sıra No</td>
<td width="100">Stok Adı</td>
<td width="100">Stok Adeti</td>
</tr>
<tr>
<td>1</td>
<td>Kalem</td>
<td align="center" rowspan="3">50</td>
</tr>
<tr>
<td>2</td>
<td>Kitap</td>
</tr>
<tr>
<td>3</td>
<td>Silgi</td>
</tr>
</table>
</body>
</html>
Örnek 4:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Alış Veriş Tablosu</title>
</head>
<body>
<table border="2">
<tr>
<td colspan="4">Alış Veriş Tablosu</td>
</tr>
<tr>
<td>Tür</td>
<td>Ürün</td>
<td>Fiyat</td>
<td>İndirim Oranı</td>
</tr>
<tr>
<td rowspan="5">Beyaz Eşya</td>
<td>Buzdolabı</td>
<td>1.750</td>
<td rowspan="3">%25</td>
</tr>
<tr>
<td>Fırın</td>
<td>650</td>
</tr>
<tr>
<td>Çamaşır Makinesi</td>
<td>1.100</td>
</tr>
<tr>
<td>Bulaşık Makinesi</td>
<td>750</td>
<td rowspan="2">%35</td>
</tr>
<tr>
<td>Dondurucu</td>
<td>600</td>
</tr>
<tr>
<td rowspan="2">Küçük Ev Aletleri</td>
<td>Mikser</td>
<td>138</td>
<td rowspan="2">%10</td>
</tr>
<tr>
<td>Saç Kurutma</td>
<td>151</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Alış Veriş Tablosu</title>
</head>
<body>
<table border="2">
<tr>
<td colspan="4">Alış Veriş Tablosu</td>
</tr>
<tr>
<td>Tür</td>
<td>Ürün</td>
<td>Fiyat</td>
<td>İndirim Oranı</td>
</tr>
<tr>
<td rowspan="5">Beyaz Eşya</td>
<td>Buzdolabı</td>
<td>1.750</td>
<td rowspan="3">%25</td>
</tr>
<tr>
<td>Fırın</td>
<td>650</td>
</tr>
<tr>
<td>Çamaşır Makinesi</td>
<td>1.100</td>
</tr>
<tr>
<td>Bulaşık Makinesi</td>
<td>750</td>
<td rowspan="2">%35</td>
</tr>
<tr>
<td>Dondurucu</td>
<td>600</td>
</tr>
<tr>
<td rowspan="2">Küçük Ev Aletleri</td>
<td>Mikser</td>
<td>138</td>
<td rowspan="2">%10</td>
</tr>
<tr>
<td>Saç Kurutma</td>
<td>151</td>
</tr>
</table>
</body>
</html>
Örnek 5:
<!doctype html>
<html>
<head>
<title>Tablo Örnekleri</title>
<meta charset="utf-8">
</head>
<body>
<h1>Tablo Örnekleri</h1>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td align="center" rowspan="2" colspan="2" >6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Tablo Örnekleri</title>
<meta charset="utf-8">
</head>
<body>
<h1>Tablo Örnekleri</h1>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td align="center" rowspan="2" colspan="2" >6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
</table>
</body>
</html>
Örnek 6:
<!doctype html>
<html>
<head>
<title>Tablo Örnekleri</title>
<meta charset="utf-8">
<meta name="description" content="Tablo Örnekleri">
</head>
<body>
<table border="2" width="200">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td colspan="2" align="center">5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Tablo Örnekleri</title>
<meta charset="utf-8">
<meta name="description" content="Tablo Örnekleri">
</head>
<body>
<table border="2" width="200">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td colspan="2" align="center">5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
Örnek 7:
<!doctype html>
<html>
<head>
<title>Tablo Örnekleri</title>
<meta charset="utf-8">
<meta name="description" content="Tablo Örnekleri">
</head>
<body>
<table border="2" width="200">
<tr>
<td rowspan="3">1</td>
<td>2</td>
<td colspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="3">7</td>
</tr>
<tr>
<td rowspan="2">8</td>
<td colspan="2" align="center">9</td>
<td>10</td>
</tr>
<tr>
<td colspan="2">11</td>
<td>12</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Tablo Örnekleri</title>
<meta charset="utf-8">
<meta name="description" content="Tablo Örnekleri">
</head>
<body>
<table border="2" width="200">
<tr>
<td rowspan="3">1</td>
<td>2</td>
<td colspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="3">7</td>
</tr>
<tr>
<td rowspan="2">8</td>
<td colspan="2" align="center">9</td>
<td>10</td>
</tr>
<tr>
<td colspan="2">11</td>
<td>12</td>
</tr>
</table>
</body>
</html>
Örnek 8:
<!doctype html>
<html>
<head>
<title>Tablo Örnekleri</title>
<meta charset utf="8">
</head>
<body>
<table border="3" width="50%" height ="200" align="center">
<tr>
<td align="center">1</td>
<td rowspan="2" align="center">2</td>
<td rowspan="2" colspan="2" align="center">3</td>
<td align="center">4</td>
</tr>
<tr>
<td align="center">5</td>
<td align="center">6</td>
</tr>
<tr>
<td align="center">7</td>
<td rowspan="3" align="center">8</td>
<td align="center">9</td>
<td rowspan="2"align="center">10</td>
<td align="center">11</td>
</tr>
<tr>
<td align="center">12</td>
<td align="center">13</td>
<td rowspan="2"align="center">14</td>
</tr>
<tr>
<td align="center">15</td>
<td colspan="2" align="center">16</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Tablo Örnekleri</title>
<meta charset utf="8">
</head>
<body>
<table border="3" width="50%" height ="200" align="center">
<tr>
<td align="center">1</td>
<td rowspan="2" align="center">2</td>
<td rowspan="2" colspan="2" align="center">3</td>
<td align="center">4</td>
</tr>
<tr>
<td align="center">5</td>
<td align="center">6</td>
</tr>
<tr>
<td align="center">7</td>
<td rowspan="3" align="center">8</td>
<td align="center">9</td>
<td rowspan="2"align="center">10</td>
<td align="center">11</td>
</tr>
<tr>
<td align="center">12</td>
<td align="center">13</td>
<td rowspan="2"align="center">14</td>
</tr>
<tr>
<td align="center">15</td>
<td colspan="2" align="center">16</td>
</tr>
</table>
</body>
</html>
Kaynak
Yorumunuzu Ekleyin