استفاده از جداول در صفحات HTML

به مجموعه ای از سطرها و ستون ها جدول گفته می شود. هنگامی که قصد داشته باشید اطلاعات در ساختاری جدول مانند نمایش داده شوند می توانید از تگ <table> استفاده نمایید. این تگ جزء تگ های قدیمی html می باشد و به دلیل کند بودن لود آن پیشنهاد می شود تنها در مواقع ضروری از آن استفاده شود.

نحوه استفاده

برای استفاده از جدول ابتدا تگ <table> را قرار می دهیم. هر جدول html شامل سه بخش مهم <thead>، <tbody> و <tfoot> می باشد.

<table>
    <thead>
        عناوین
    </thead>
    <tbody>
        محتوای اصلی
    </tbody>
    <tfoot>
        پا نوشته
    </tfoot>
</table>

در هریک از این بخش ها برای قرار دادن محتوا می بایست سطر و ستون تعریف نمایید. برای تعریف سطر از تگ <tr> و برای تعیین ستون از دستور <td> یا <th> استفاده می شود. اگر ستون تعریف شده در قسمت <tbody> باشد از <td> و اگر در قسمت <thead> باشد از <th> استفاده می شود.

مثال: جدولی طراحی کنید که مشخصات درس های آموزشی آکادمی بنو در آن درج شده باشد.

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>گروه</th>
            <th>عنوان</th>
            <th>مدرس</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>برنامه نویسی</td>
            <td>آموزش سی شارپ</td>
            <td>مدیر سایت</td>
        </tr>
        <tr>
            <td>2</td>
            <td>برنامه نویسی</td>
            <td>آموزش جاوا اسکریپت</td>
            <td>مدیر سایت</td>
        </tr>
        <tr>
            <td>3</td>
            <td>برنامه نویسی</td>
            <td>آموزش پایتون</td>
            <td>مدیر سایت</td>
        </tr>
        <tr>
            <td>4</td>
            <td>طراحی سایت</td>
            <td>html</td>
            <td>مدیر سایت</td>
        </tr>
        <tr>
            <td>5</td>
            <td>طراحی سایت</td>
            <td>css</td>
            <td>مدیر سایت</td>
        </tr>
    </tbody>
</table>

Attribute های مهم جدول

این تگ دارای سه attribute به شکل زیر می باشد:

  • border: در صورتی که مقدار آن برای 1 قرار داده شود حاشیه جدول فعال می شود.
  • cellpadding: فاصله بین محتوا تا خطوط حاشیه را مشخص می کند.
  • cellspacing: فاصله بین سلول ها را مشخص می کند.

معمولا مقادیر cellpaddig و cellspacing را مساوی صفر  قرار می دهند.

<table border="1" cellpadding="0" cellspacing="0">

تنظیمات بیشتر روی جداول را می توانید در بخش آموزش CSS مشاهده نمایید.