HTML Tablo Oluşturma
HTML de bir tablo <table> etiketi ile tanımlanır. Satır tanımlamak için <tr>, sütun tanımlamak için <td> etiketi kullanılır. Tablo başlığı tanımlamak için <th> etiketi kullanılır. Th etiketi default olarak kalın yazılı ve ortalanmış şekildedir. Şimdi bir örnekle inceleyelim.
<html> <head></head> <body> <table> <tr> <th>Sayı</th> <th>Ad</th> <th>Soyad</th> </tr> <tr> <td>1</td> <td>Furkan</td> <td>Aktaş</td> </tr> <tr> <td>2</td> <td>Ali</td> <td>Ak</td> </tr> </table> </body> </html>
Eğer kenarlık eklemek istiyorsanız <table>,<tr>,<td> etiketlerine style=”border:” stilini eklemeniz gerekmektedir.
<html> <head></head> <body> <table style="border:2px solid blue; border-collapse:collapse;"> <!-- Collapse komutu sayesinde 1. şekilde çift çizgiler ikinci şekildeki gibi teke düşüyor. --> <tr style="border:2px solid blue;"> <th style="border:2px solid blue;">Sayı</th> <th style="border:2px solid blue;">Ad</th> <th style="border:2px solid blue;">Soyad</th> </tr> <tr style="border:2px solid blue;"> <td style="border:2px solid blue;">1</td> <td style="border:2px solid blue;">Furkan</td> <td style="border:2px solid blue;">Aktaş</td> </tr> <tr style="border:2px solid blue;"> <td style="border:2px solid blue;">2</td> <td style="border:2px solid blue;">Ali</td> <td style="border:2px solid blue;">Ak</td> </tr> </table> </body> </html>
Eğer tabloya bir başlık eklemek isterseniz bunu <caption> etiketi kullanarak yapabilirsiniz. Başlık olduğu için default olarak ortalanmış şekilde gelir.
<html> <head></head> <body> <table style="border:2px solid blue;width:100%; border-collapse:collapse;"> <caption>HTML TABLOSU</caption> <tr style="border:2px solid blue;"> <th style="border:2px solid blue;">Sayı</th> <th style="border:2px solid blue;">Ad</th> <th style="border:2px solid blue;">Soyad</th> </tr> <tr style="border:2px solid blue;"> <td style="border:2px solid blue;">1</td> <td style="border:2px solid blue;">Furkan</td> <td style="border:2px solid blue;">Aktaş</td> </tr> </table> </body> </html>
Eğer sütun yada satırları birleştirmek isterseniz:
- colspan: Sütun birleştirme
- rowspan: Satır birleştirme nitelikleri kullanılır.
<html> <head></head> <body> <table style="border:2px solid blue; border-collapse:collapse;"> <tr style="border:2px solid blue;"> <th style="border:2px solid blue;">Sayı</th> <th colspan="2" style="border:2px solid blue;">İsim</th> </tr> <tr style="border:2px solid blue;"> <td style="border:2px solid blue;">1</td> <td style="border:2px solid blue;">Furkan</td> <td rowspan="2" style="border:2px solid blue;">Aktaş</td> </tr> <tr style="border:2px solid blue;"> <td style="border:2px solid blue;">2</td> <td style="border:2px solid blue;">Ali</td> </tr> </table> </body> </html>
