مثال :

<table>
  <tr>
    <th>شرکت</th>
    <th>مدیر عامل</th>
    <th>کشور</th>
  </tr>
  <tr>
    <td>آلفردز فوترکیست</td>
    <td>ماریا آندرس</td>
    <td>آلمان</td>
  </tr>
  <tr>
    <td>سنترال کومرشیال موچزوما</td>
    <td> فرانسیسکو چنگ</td>
    <td>مکزیک</td>
  </tr>
    
</table>

تعریف یک جدول در HTML

یک جدول در زبان HTML با استفاده از تگ <table> تعریف می شود.
هر ردیف از جدول با تگ <tr> تعریف شده و سرتیتر آن نیز با تگ <th> قابل تعریف است. سرتیتر های جداول به صورت پیش فرض ، ضخیم و وسط چین هستند. هر سلول/داده از ردیف های جداول نیز با تگ <td> تعریف می شود.

مثال :

<table style="width:100%" dir="rtl">
  <tr>
    <th>نام </th>
    <th>نام خانوادگی</th> 
    <th>سن</th>
  </tr>
  <tr>
    <td>آرمان</td>
    <td>علایی</td>
    <td>32</td>
  </tr>
</table>

اضافه کردن خط حاشیه به جدول در HTML

اگر برای جدول مود نظر خط حاشیه تعیین نکنید ، جدول بدون حاشیه نمایش داده خواهد شد. خط حاشیه با استفاده از صفت border در CSS تنظیم می شود.

مثال :

table, th, td {
    border: 1px solid black;
}

خطوط حاشیه تکی در جدول های HTML

اگر می خواهید خطوط حاضیه جدول در یک خط برای هر 4 جهت خلاصه شود ، از صفت border-collapse در CSS استفاده کنید :

مثال :

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

اضافه کردن فضای حاشیه

padding در جداول بین محتوا و حاشیه سلول های جدول در HTML فضای خالی ایجاد می کند. اگر padding تعیین نشود ، سلول های جدول بدون فضای حاشیه ، نمایش داده می شوند.
برای تنظیم padding از صفت padding در CSS استفاده می شود.

مثال :

th, td {
    padding: 15px;
}

تراز بندی سرتیتر های جدول در HTML

سرتیتر های جداول به صورت پیش فرض ضخیم و وسط چین هستند. برای راست چین یا چپ چین کردن سرتیتر های جدول از صفت text-align در CSS استفاده می کنیم

مثال :

th {
    text-align: left;
}

فضای بین سلول ها در جداول HTML

برای اضافه کردن فضا میان سلول های جدول در HTML از صفت border-spacing در CSS استفاده می شود.

مثال :

table {
    border-spacing: 5px;
}

نکته ! اگر جدول شامل border-collapse می شود ، border-spacing تاثیری نخواهد داشت.

 

سلول های دارای ستون های متعدد

در HTML برای اضافه کردن ستون در یک سلول از صفت colspan استفاده می کنیم .

مثال :

<table style="width:100%">
  <tr>
    <th>نام</th>
    <th colspan="2">تلفن</th>
  </tr>
  <tr>
    <td>جناب خان</td>
    <td>061-11112222</td>
    <td>061-11112222</td>
  </tr>
</table>

سلول های دارای ردیف های متعدد

برای اضافه کردن ردیف های بیشتر به یک سلول در جدول های HTML از صفت rowspan استفاده می کنیم.

مثال :

<table style="width:100%">
  <tr>
    <th>نام : </th>
    <td> جناب خان</td>
  </tr>
  <tr>
    <th rowspan="2">تلفن : </th>
    <td>061-11112222</td>
  </tr>
  <tr>
    <td>061-11113333</td>
  </tr>
</table>

اضافه کردن عنوان به جدول در HTML

برای اضافه کردن یک عنوان یا همان caption از تگ <caption> استفاده می کنیم.

مثال :

<table style="width:100%">
  <caption>پس اندازهای ماهانه</caption>
  <tr>
    <th>ماه</th>
    <th>پس انداز</th>
  </tr>
  <tr>
    <td>فروردین</td>
    <td>75 T</td>
  </tr>
  <tr>
    <td>اردیبهشت</td>
    <td>60 T</td>
  </tr>
</table>

استایل منحصر بفرد برای یک جدول

برای اضافه کردن استایل خاص به جدولی بخصوص ، به آن جدول صفت id اضافه کنید.

حال می توانید به آن جدول استایل مورد نظر را اضافه کنید :

مثال :

 <table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table> 

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
   background-color:#fff;
}
table#t01 th {
    background-color: black;
    color: white;
}