HTML Tabloları
HTML tabloları, web geliştiricilerinin verileri satırlar ve sütunlar halinde düzenlemesine olanak tanır.
Örnek
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Bir HTML Tablosu Tanımlayın
HTML'deki bir tablo, satırlar ve sütunlar içindeki tablo hücrelerinden oluşur.
Örnek
Basit bir HTML tablosu:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria
Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro
comercial Moctezuma</td>
<td>Francisco
Chang</td>
<td>Mexico</td>
</tr>
</table>
Tablo Hücreleri
Her tablo hücresi bir
<td>ve </td>etiketi ile tanımlanır.
td
tablo verileri anlamına gelir.
<td>ve arasındaki her şey </td>tablo hücresinin içeriğidir.
Örnek
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Not: tablo veri öğeleri, tablonun veri kapsayıcılarıdır.
Her türden HTML öğesini içerebilirler; metin, resimler, listeler, diğer tablolar vb.
Tablo Satırları
Her tablo satırı a ile başlar
ve bir etiketle <tr>biter .</tr>
tr
tablo satırı anlamına gelir.
Örnek
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Bir tabloda istediğiniz kadar satır olabilir, sadece her satırdaki hücre sayısının aynı olduğundan emin olun.
Not: Bir satırın diğerinden daha az veya daha fazla hücreye sahip olabileceği zamanlar vardır. Bunu daha sonraki bir bölümde öğreneceksiniz.
Tablo Başlıkları
Bazen hücrelerinizin başlık olmasını istersiniz, bu durumlarda
<th>etiket yerine etiketi kullanın
<td>:
Örnek
İlk satırın tablo başlıkları olmasına izin verin:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person
3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Varsayılan olarak, <th>öğelerdeki metin kalın ve ortalanmıştır, ancak bunu CSS ile değiştirebilirsiniz.
HTML Alıştırmaları
HTML Tablo Etiketleri
| 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 |
Mevcut tüm HTML etiketlerinin tam listesi için HTML Etiket Referansımızı ziyaret edin .