| Ana Sayfa  | Ders Programı | Simülasyonlar  | Diğer | İletişim |

Web Sayfasına Tablo Yerleştirmek

Basit bir HTML tablosu; bir tablo etiketinin yanısıra, tr, th, td etiketlerinden oluşur.
table etiketi :HTML sayfasına bir tablonun eklenmeye başladığıı gösterir.
tr (Tablo satırı) etiketi :tablo içerisine bir satırın açıldığını gösterir.
th (Tablo satırındaki başlık kolonu ) etiketi :tr ile açılan satırların içine başlık hücresi eklemek için kullanılır.
td (Tablo satırındaki veri kolonu ) etiketi :tr ile açılan satırların içine veri hücresi eklemek için kullanılır.

Tablo 1 de basit bazı tablo örnekleri verilmiştir.

Tablo 1 : Basit tablo örnekleri 


<html><head>
<title></title></head>
<body >
Bir Satır Bir Kolon Tablo 
<table border='1' >
 <tr>
  <td>Hücre</td>
 </tr>
</table> 

Bir Satır Dört Kolon Tablo 
<table border='1' >
 <tr>
  <td>Kolon 1</td>
  <td>Kolon 2</td>
  <td>Kolon 3</td>
  <td>Kolon 4</td>
 </tr>
</table> 

Dört Satır Bir Kolon Tablo 
<table border='1' >
 <tr>
  <td>Hücre</td>
 </tr>
 <tr>
  <td>Hücre</td>
 </tr>
 <tr>
  <td>Hücre</td>
 </tr>
 <tr>
  <td>Hücre</td>
 </tr>
</table> 

</body>
</html>

Tablo 2 : Çok satır ve çok kolonlu bir tablo örneği 


<html><head>
<title></title></head>
<body >
3 Satır 5 Kolon Tablo 
<table border='1' >

 <tr>
  <td>11</td>
  <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td>
 </tr>

 <tr>
  <td>21</td>
  <td>22</td>
  <td>23</td>
  <td>24</td>
  <td>25</td>
 </tr>

 <tr>
  <td>31</td>
  <td>32</td>
  <td>33</td>
  <td>34</td>
  <td>35</td>
 </tr>

</table> 


</body>
</html>

Tablo 3 : Çok satır ve çok kolonlu biçlendirilmiş bir tablo örneği 


<html><head>
<title></title></head>
<body >
3 Satır 5 Kolon Tablo 
<table align='center' border='10' bgcolor='white' >

 <tr>
  <td>11</td>
  <td>12</td>
  <td bgcolor='red' >13</td>
  <td>14</td>
  <td>15</td>
 </tr>

 <tr>
  <td>21</td>
  <td align='right' >22</td>
  <td><b>23</b></td>
  <td>24</td>
  <td><img src='resim/erlen.png' width='50px' />25</td>
 </tr>

 <tr>
  <td>31</td>
  <td><font size='5'>32</font></td>
  <td>33</td>
  <td bgcolor='green' >34</td>
  <td>35</td>
 </tr>

</table> 


</body>
</html>

colspan veya rowspan parametreleri ile tablodaki hücreler birbiri ile birleştirilebilir. Tablo 4 bu durum örneklenmiştir.

Tablo 4 : Satır ve Kolonlar Birleştirilmiş tablo örneği 


<html><head>
<title></title></head>
<body >
3 Satır 5 Kolon Tablo 
<table border='1' >

 <tr>
  <td>11</td>
  <td rowspan='2' bgcolor='yellow' >12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td>
 </tr>

 <tr>
  <td>21</td>
  <td>22</td>
  <td>23</td>
  <td>24</td>
 </tr>

 <tr>
  <td>31</td>
  <td colspan='2' bgcolor='purple' >32</td>
  <td>33</td>
  <td>34</td>
 </tr>

</table> 


</body>
</html>