HTML tabloları, web geliştiricilerinin verileri satırlar ve sütunlar halinde düzenlemesine olanak tanır.
Bir HTML tablosu <table>..</table> etiketleri arasında tanımlanır. Fakat <table> etiketi tek başına tablo tanımlamak için yeterli değildir. Tablodaki satırlar(<tr>) ve satırların içindeki hücreleri (<td>,<th>) tanımlamak için bir kaç tane daha etikete ihtiyaç duyulmaktadır.
Daha önce excel tablolar ile çalıştıysanız, excel tablolarda satırlar, sütünların kesişinine hücre denildiğini duymuşsunuzdur. HTML’de hücreleri satır, sütunların kesişimi diye ifade etmek mümkün değildir.
HTML Tablo Oluşturma
<table>: table etiketi tablonun dış çerçevesini oluşturmak için kullanılır. Tablo tanımlamak, tablonun ekranda görünmesi için yeterli olmaz. border değeri verilerek tablodaki nesnelere kenarlık verilebilir.
|
1 2 3 4 5 |
<table border=1></table> <!-- border=1 değeri tablonun ekranda belirgin olarak görünmesi için eklendi. yazilimbilisim.net --> |
tr: Tablo içindeki satırları ifade etmek için kullanılan etikettir. Hücreleri bu etiket içine yerleştiriz.
|
1 2 3 4 5 6 7 8 9 |
<table border=1> <tr></tr> <tr></tr> <tr></tr> </table> <!-- border=1 değeri tablonun ekranda belirgin olarak görünmesi için eklendi. yazilimbilisim.net --> |
td: satırlar içindeki hücreleri ifade etmek için kullanılır.
th:satırlar içindeki hücreleri ifade etmek için kullanılır. td etiketinden farklı olarak bu hücrelerdeki veriler genellikle başlık olarak kullanılır.Varsayılan stili kalın ve ortalıdır.
Yukarıdaki tabloyunun son şekli aşağıdaki kodlarla tamamlanacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<table border=1> <tr> <td>10</td> <td>20</td> <td>30</td> </tr> <tr> <td>40</td> <td>50</td> <td>60</td> </tr> <tr> <td>70</td> <td>80</td> <td>90</td> </tr> </table> <!-- border=1 değeri tablonun ekranda belirgin olarak görünmesi için eklendi. yazilimbilisim.net --> |
Tablodan hücre silinirse Ne Olur?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<table border=1> <tr> <td>10</td> </tr> <tr> <td>40</td> <td>50</td> <td>60</td> </tr> <tr> <td>70</td> <td>80</td> <td>90</td> </tr> </table> <!-- border=1 değeri tablonun ekranda belirgin olarak görünmesi için eklendi. yazilimbilisim.net --> |
Tablo içinden bir hücre silinirse görüntüde silinecektir. Silinen hücre tabloda boşluk oluşmasına neden olacaktır.
Hücre genişletme (ColSpan)
Yukarıdaki resim ile devam edelim. Tablodaki bazı hücrelerin diğerlerinden daha geniş olması gerekebilir. Hücreleri uzatmak için ColSpan niteliğine kaç hücrelik genişletileceği girilir. yazilimbilisim.net
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<table border=1> <tr> <td colspan="3">10</td> </tr> <tr> <td>40</td> <td>50</td> <td>60</td> </tr> <tr> <td>70</td> <td>80</td> <td>90</td> </tr> </table> <!-- border=1 değeri tablonun ekranda belirgin olarak görünmesi için eklendi. yazilimbilisim.net --> |
Hücre Kaydırma(rowspan)
Hücrelerinin bir alt hücreye uzatılması yada bir alt satırla birleştirilmesi anlamına gelen kavram olarak açıklayabiliriz. rowspan kullanılırken dikkat edilmesi gereken en önemli nokta uzatılan hücrenin alt satırlarda boşluk oluşturacağıdır. Bu nedenle hücre uzatma işlemi yapıldıktan sonra alt satırlardaki fazlalık olan hücreler silinmesi gerekir. Hücreler silinmezse alt satırlardaki hücrelerin sayısı fazla olacağı için tablo genişletilecek ve tablonun sonunda boşluklar oluşacaktır. Animasyonda göründüğü gibi 90 değeri olan hücre silinmezse belirli bir boşluk oluşmasına neden olmaktadır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<table border=1> <tr> <td colspan="3">10</td> </tr> <tr> <td>40</td> <td rowspan="2">50</td> <td>60</td> </tr> <tr> <td>70</td> <td>80</td> </tr> </table> <!-- border=1 değeri tablonun ekranda belirgin olarak görünmesi için eklendi. yazilimbilisim.net--> |
Tablo Örnekleri ve Tablo kavramı ile ilgili diğer açıklamalar
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<table> <tr> <td>Şirket</td> <td>Ad Soyad</td> <td>Telefon</td> </tr> <tr> <td>Wordy GSM</td> <td>Ahmet ÖZSOY</td> <td>+90 505 555 55 55</td> </tr> <tr> <td>VoiceData LTD</td> <td>Mehmet KILIÇ</td> <td>+90 545 757 77 77</td> </tr> <tr> <td>Kestel A.Ş</td> <td>Murat ÖZTÜRK</td> <td>+90 515 844 44 44</td> </tr> <tr> <td>Sportif A.Ş</td> <td>Özay BAYRAK</td> <td>+90 585 212 22 22</td> </tr> </table> |
- Table Border
Kenarlılık Eklemek isterseniz aşağıdaki stil tanımlaması HTML dökümamınıza eklemelisiniz. Border parametresi, hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır.
|
1 2 3 4 5 |
table, th, td { border: 1px solid black; } |
- Border Spacing
|
1 2 3 4 5 |
table { border-spacing: 5px; } |
- Cell Padding
Hücrelerin içindeki verilerin, hücre sınırlarından uzaklığının ne kadar olacağını belirlemek için kullanılır. yazilimbilisim.net
th, td {
padding: 15px;
}
- ColSpan
Sütun düzeyinde hücre birleştirmek için kullanılır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table> |
- RowSpan
Satır düzeyinde hücre birleştirmek için kullanılır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table> |
- Caption
Tablonuza bir başlık satırı eklemek için kullanılır. yazilimbilisim.net
|
1 2 3 4 5 6 7 |
<table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> ..... |
Add Comment