آموزش و يادگيري تگ table در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <table> آشنا مي‌شويم. اين تگ براي ايجاد جداول در صفحات وب استفاده مي‌شود و امکان نمايش داده‌ها به صورت منظم رديفي و ستوني را فراهم مي‌کند.

تگ table در HTML چيست؟

تگ <table> يک ساختار جدولي ايجاد مي‌کند که شامل رديف‌ها (<tr>) و ستون‌ها (<td> يا <th>) است. جداول براي نمايش داده‌هاي جدولي، برنامه‌ريزي، ليست‌ها و نمودارهاي ساده کاربرد دارند.

مثال ساده از تگ table

<table border="1">
  <tr>
    <th>نام</th>
    <th>سن</th>
  </tr>
  <tr>
    <td>علي</td>
    <td>25</td>
  </tr>
  <tr>
    <td>مينا</td>
    <td>30</td>
  </tr>
</table>

در اين مثال يک جدول ساده با دو ستون و دو رديف داده ايجاد شده است. ستون‌هاي عنوان با <th> مشخص شده‌اند.

ويژگي‌هاي مهم تگ table

ويژگي	توضيح
border	مشخص کردن ضخامت حاشيه جدول
cellpadding	فضاي داخلي هر سلول
cellspacing	فاصله بين سلول‌ها
width	عرض جدول

مثال ترکيبي با CSS

<style>
table {
  width: 50%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #333;
  padding: 8px;
  text-align: center;
}
th {
  background-color: #f2f2f2;
}
</style>

<table>
  <tr>
    <th>نام</th>
    <th>سن</th>
  </tr>
  <tr>
    <td>علي</td>
    <td>25</td>
  </tr>
  <tr>
    <td>مينا</td>
    <td>30</td>
  </tr>
</table>

با CSS مي‌توان ظاهر جدول را زيباتر و خواناتر کرد و فاصله و رنگ پس‌زمينه سلول‌ها را تغيير داد.