وبلاگ

یکی از پرکاربردترین عناصر مورد استفاده در صفحات وب جدول است. جداول به کاربران این قابلیت را می‌دهند که بتوانند مجموعه‌ای از داده‌های تقریبا بزرگ را به راحتی و به صورت ساختاریافته مشاهده نمایند. یک جدول گاهی می‌تواند چنان اطلاعاتی را در بهترین شکل در ذهن مخاطب ثبت کند که شاید چندین پاراگراف توضیح‌نویسی از انجام چنین کاری عاجز باشد. تگ‌های جدول متنوع بوده و شامل اسکلت اصلی، سطرها، سلول‌ها، سرستون‌ها، پاستون‌ها و … می‌شوند.

برای راحتی درک مفاهیم این مقاله به شکل زیر توجه کنید :

تگ جدول

یک جدول دارای استخوان‌بندی اصلی است که با تگ table تعریف می‌شود. این تگ محدوده کلی جدول و هر چیزی که درونش قرار خواهد گرفت را مشخص می‌کند.

<table>
  ...
</table>

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

اگر با صفت‌ها آشنایی ندارید این مقاله را بخوانید.

<table border="1">
  ...
</table>

نکته : برای دسترسی به تنظیمات بیشتر خطوط جدول و خطوط سلول‌ها و … بهتر است از دستورات CSS استفاده شود.

سطرها و سلول‌ها

یک جدول مانند شکل بالا، دارای تعدادی سطر است که با تگ tr تعریف می‌شود. این تگ به صورت تگ زوج می‌باشد. در شکل بالا یک سطر سرستون (نارنجی)، 3 سطر محتوا و یک سطر پاستون (سبز) در مجموع 5 سطر، مشاهده می‌شود. تگ tr یک تگ زوج است.

پس برای شکل بالا، می‌توان اینگونه 5 سطر تعریف کرد :

<table>
  
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  
</table>

هر سطر، شامل تعدادی سلول است. قسمت نارنجی دارای 5 سلول، قسمت سفید دارای 5 سلول و قسمت سبزرنگ دارای 5 سلول. هر سلول را با تگ td تعریف می‌کنیم. تگ td یک تگ زوج است.

اما اگر به قسمت بالا و پایین جدول نگاه کنید می‌بینید که دارای نوع قلم ضخیم‌تر هستند. برای این کار به جای ایجاد سلول‌ها با تگ td، از تگ th می‌توان استفاده کرد. تگ‌های td یا th هر سطر را درون تگ tr می‌نویسیم. داریم :

<table>
  
  <tr>
    <th>ردیف</th>
    <th>نام</th>
    <th>سال تولد</th>
    <th>مرد</th>
    <th>زن</th>
  </tr>
  
  
  <tr>
    <td>1</td>
    <td>علی</td>
    <td>1373</td>
    <td>&check;</td>
    <td></td>
  </tr>
  <tr>
    <td>2</td>
    <td>احمد</td>
    <td>1385</td>
    <td>&check;</td>
    <td></td>
  </tr>
  <tr>
    <td>3</td>
    <td>مریم</td>
    <td>1369</td>
    <td></td>
    <td>&check;</td>
  </tr>
  
  
  <tr>
    <th></th>
    <th></th>
    <th>تعداد</th>
    <th>2</th>
    <th>1</th>
  </tr>
  
</table>

می‌توان از تگ‌های th غیر از سرستون‌ها و پاستون‌ها در هر قسمت از جداول نیز استفاده کرد. مثلا برای ایجاد جدولی با سلول‌های اول ضخیم در هر سطر به صورت زیر عمل می‌کنیم :

<table>
  
  <tr>
    <th>ردیف</th>
    <th>نام</th>
    <th>سال تولد</th>
    <th>مرد</th>
    <th>زن</th>
  </tr>
  
  
  <tr>
    <th>1</th>
    <td>علی</td>
    <td>1373</td>
    <td>&check;</td>
    <td></td>
  </tr>
  <tr>
    <th>2</th>
    <td>احمد</td>
    <td>1385</td>
    <td>&check;</td>
    <td></td>
  </tr>
  <tr>
    <th>3</th>
    <td>مریم</td>
    <td>1369</td>
    <td></td>
    <td>&check;</td>
  </tr>
  
  
  <tr>
    <th></th>
    <th></th>
    <th>تعداد</th>
    <th>2</th>
    <th>1</th>
  </tr>
  
</table>

همانگونه که مشاهده می‌کنید، سلول‌هایی که دارای مقادیر 1، 2، 3 هستند و در ابتدای هر ستون قرار گرفته‌اند نیز از تگ th استفاده می‌کنند.

سه بخش اصلی جدول

می‌توان یک جدول را به سه قسمت شامل سرستون‌ها (thead)، بدنه (tbody) و پاستون (tfoot) تقسیم کرد. این تگ‌ها به صورت زوج تعریف می‌شوند و تمامی سطر و ستون‌های داخل هر سطر، باید درون این تگ‌ها قرار گیرند.

در شکل بالا، می‌توان برای سرستون، سطر اول را درون تگ thead قرار داد. سه سطر وسط را درون تگ tbody و سطر آخر را درون تگ tfoot. پس کد جدید به صورت زیر خواهد بود :

<table>
  
  <thead>
    <tr>
      <th>ردیف</th>
      <th>نام</th>
      <th>سال تولد</th>
      <th>مرد</th>
      <th>زن</th>
    </tr>
  </thead>
  
  
  <tbody>
    <tr>
      <td>1</td>
      <td>علی</td>
      <td>1373</td>
      <td>&check;</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td>احمد</td>
      <td>1385</td>
      <td>&check;</td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td>مریم</td>
      <td>1369</td>
      <td></td>
      <td>&check;</td>
    </tr>
  </tbody>
  
  
  <tfoot>
    <tr>
      <th></th>
      <th></th>
      <th>تعداد</th>
      <th>2</th>
      <th>1</th>
    </tr>
  </tfoot>
  
</table>

ادغام سلول‌های یک جدول

می‌توان سلول‌های یک جدول را با هم به صورت افقی، عمودی یا ترکیب افقی و عمودی ادغام کرد. به شکل زیر نگاه کنید تا ادامه مطالب قابل درک باشند :

ادغام افقی (سلول‌های مجاور)

در شکل بالا، جدول دارای 5 ستون است. قسمت سبزرنگ دارای 3 سلول ادغام شده به صورت افقی است (سلول حاوی تعداد نفرات).

برای این کار، باید از صفت colspan استفاده شود. این صفت یک مقدار عدد طبیعی (1، 2، 3، …) دریافت می‌کند و تعیین می‌کند که چه تعداد سلول باید با هم ادغام شوند. در این مثال مقدار آن 3 خواهد بود. با ادغام 3 سلول اول، فقط دو تگ th برای این سطر باقی می‌ماند (سلول‌های با مقدار 2 و 1).

...
<tr>
  <th colspan="3">تعداد نفرات</th>
  <th>2</th>
  <th>1</th>
</tr>
...

در صورتی که صفت colspan تعریف نشود مقدار پیش‌فرض آن یک خواهد بود.

ادغام عمودی (سلول‌های سطرهای مجاور)

سرستون‌های ردیف، نام و سال تولد هر کدام به اندازه دو سطر فضا اشغال کرده‌اند. برای ایجاد چنین جدولی باید برای هر سلول صفت rowspan تعریف کرد که مانند صفت colspan یک عدد طبیعی دریافت کرده و معین می‌کند هر سلول چند سطر را اشغال می‌کند.

از طرفی سلول جنسیت باید صفت colspan با مقدار 2 داشته باشد.

توجه داشته باشید که اگر در هر سطری، سلولی با صفت rowspan دارید، در سطرهای بعدی یک سلول از آن سطر کم کنید. در این مثال، باید دو سطر برای قسمت نارنجی رنگ تعیین کنیم. از آنجایی که سطر اول، 3 سلول با صفت rowspan دارند، در سطر دوم باید فقط 2 سلول تعریف شوند. (یعنی سلول‌های مرد و زن)

...
<tr>
  <th rowspan="2">ردیف</th>
  <th rowpsna="2">نام</th>
  <th rowpsan="2">سن</th>
  
  <th colspan="2"></th>
</tr>

<tr>
  <th>مرد</th>
  <th>زن</th>
</tr>
...

تگ caption

این تگ برای توضیح‌نویسی یک جدول (معمولا در بالای آن) مورد استفاده قرار می‌گیرد. این تگ بلافاصله پس از تگ آغاز <table> یا قبل از تگ پایان </table> قرار می‌گیرد.

<table>
  <caption>توضیح در مورد جدول</caption>
  ...
</table>

تگ‌های colgroup و col

از این تگ برای دسته‌بندی سلول‌ها استفاده می‌شود و بیشتر برای اجرای دستورات CSS کاربرد دارد. این تگ بعد از تگ <table> تعریف می‌شود ولی اگر جدول تگ caption داشته باشد، بعد از آن قرار می‌گیرد.

در مثال زیر، با استفاده از تگ colgroup و دستور CSS رنگ پس‌زمینه دو ستون اول قرمز خواهد شد.

<table>
  <colgroup>
    <col span="2" style="background-color: red" />
  </colgroup>
  ...
</table>

نکته : دو تگ فوق ممکن است توسط برخی مرورگرها پشتیبانی نشوند.