جدول ها در HTML — راهنمای گام به گام

۷۷ بازدید
آخرین به‌روزرسانی: ۰۱ دی ۱۳۹۷
زمان مطالعه: ۴ دقیقه
جدول ها در HTML — راهنمای گام به گام

صفحات وب پر از اطلاعاتی مانند نتایج مسابقات فوتبال، نتایج تورنمنت‌ها، فهرست اسامی و آدرس ایمیل کارمندان و مواردی از این دست است. جدول‌های HTML امکان نمایش اطلاعات را به روشی که به نام «داده‌های جدولی» (tabular data) نامیده می‌شود فراهم می‌سازند. در ادامه انواع مختلف جدول های HTML را بررسی می‌کنیم.

جدول ساده

ما می‌توانیم یک جدول HTML را با استفاده از عنصر table ایجاد کنیم. این عنصر دارای تگ باز کردن و بستن است و همه ردیف‌ها و ستون‌های جدول درون آن قرار می‌گیرند.

<table></table>

همه جدول‌ها شامل ردیف‌هایی هستند که اطلاعات در آن‌ها قرار می‌گیرند. اگر بخواهیم در این جدول ردیفی درج کنیم باید از عنصر <tr> استفاده کنیم.

با این وجود، هیچ عنصری برای تعیین ستون جدول وجود ندارد. ستون‌های جدول به تعداد سلول‌های جدول که درون هر ردیف قرار می‌گیرند وابسته هستند. عنصر <td> برای ایجاد یک سلول در جدول HTML استفاده می‌شود. بنابراین اساساً تعداد عنصرهای <td> که درون عنصر <tr> جای داده می‌شوند برابر با تعداد ستون‌های آن ردیف از جدول خواهند بود.

به طور خلاصه:

  • <table>: عنصر table که داده‌ها را به صورت یک سری از ردیف‌ها و ستون‌ها نمایش می‌دهد. جدول‌ها تنها برای نمایش داده‌های جدولی به کار می‌آیند و هرگز نباید از آن‌ها به منظور صفحه‌بندی استفاده کرد.
  • <tr>: عنصر ردیف جدول که ردیفی از سلول‌ها را در جدول تعریف می‌کند. ردیف‌های جدول می‌تواند با سلول‌های جدول و سلول‌های عنوان جدول پر شوند.
  • <td>: عنصر سلول جدول که شامل داده‌هایی است و یک سلول منفرد جدول را نمایش می‌دهد و هر سلول جدول باید درون یک ردیف جدول قرار داشته باشد:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <table>
          <tr>
            <td>Country</td>
            <td>Capital</td>
            <td>Language</td>
          </tr>
          <tr>
            <td>India</td>
            <td>New Delhi</td>
            <td>Hindi</td>
          </tr>
          <tr>
            <td>France</td>
            <td>Paris</td>
            <td>French</td>
          </tr>
          <tr>
            <td>New Zealand</td>
            <td>Wellington</td>
            <td>English</td>
          </tr>
      </table>
    </body>
</html>
عناصر جدول
عنصرهای ردیف جدول (<tr>) و سلول جدول (<td>) که برای تشکیل جدول استفاده می‌شوند.

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

عنصر عنوان جدول (Table Header)

ما یک جدول ساده ایجاد کردیم؛ اما روشن نیست که ردیف اول آن در جدول به منظور برچسب‌گذاری ستون‌ها استفاده می‌شود یا نه. هم اینک ردیف نخست ظاهری مانند همه ردیف‌های دیگر دارد.

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

اکنون باید سلول‌های جدول را در ردیف نخست به سلول‌های هدر تغییر دهیم. بدین منظور باید <td> را با <th> عوض کنیم.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <table>
          <tr>
            <th>Country</th>
            <th>Capital</th>
            <th>Language</th>
          </tr>
          <tr>
            <td>India</td>
            <td>New Delhi</td>
            <td>Hindi</td>
          </tr>
          <tr>
            <td>France</td>
            <td>Paris</td>
            <td>French</td>
          </tr>
          <tr>
            <td>New Zealand</td>
            <td>Wellington</td>
            <td>English</td>
          </tr>
      </table>
    </body>
</html>

اکنون متن ردیف نخست درشت‌تر از ردیف‌های دیگر است، زیرا عنصر <th> درون <tr> اول استفاده شده است.

عناصر هدر و متن (Head & Body) جدول

همانند ساختار بخش‌های دیگر اسناد HTML که دارای head و body است، می‌توانیم این بخش‌ها را به جدول‌ها نیز اضافه کنیم. ما قطعاً از همان عناصر HTML در این مورد نمی‌توانیم استفاده کنیم، زیرا در این صورت کد HTML نامعتبر می‌شود. در مورد جدول ما تگ <thead> را برای head و تگ <tbody> را برای body داریم.

  • <thead> - عنصر head برای جدول که نباید با عنصر سلول هدر جدول اشتباه گرفته شود. این عنصر مجموعه‌ای از ردیف‌ها را تعریف می‌کند که هدر یک جدول را تشکیل می‌دهند.
  • <tbody>  - متن جدول که یک یا چند ردیف را تشکیل می‌دهد و محتوای اصلی یا body جدول را تعریف می‌کند.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <table>
        <thead>
          <tr>
            <th>Country</th>
            <th>Capital</th>
            <th>Language</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>India</td>
            <td>New Delhi</td>
            <td>Hindi</td>
          </tr>
          <tr>
            <td>France</td>
            <td>Paris</td>
            <td>French</td>
          </tr>
          <tr>
            <td>New Zealand</td>
            <td>Wellington</td>
            <td>English</td>
          </tr>
        </tbody>
      </table>
    </body>
</html>

عنصر Foot جدول

در بخش پیش دیدیم که هر جدول می‌تواند عناصر head و body داشته باشد. در این بخش اشاره می‌کنیم که جدول می‌تواند عنصر پانویس یا foot نیز داشته باشد. اما سؤال اینجاست که وقتی برای جدول ردیف هدر را داریم که برچسب‌های هر ستون را تعریف می‌کند، دیگر چه نیازی به foot داریم؟

به طور کلی، عنصر پانویس (footer) یک جدول شامل خلاصه‌ای از جدول است. مثلاً این‌ها می‌توانند برخی سلول‌های نهایی باشند که مجموع، مجموع کل، یا میانگین هر ستون را نمایش می‌دهند. همچنین ممکن است شامل فراداده‌هایی مانند اطلاعات کپی‌رایت یا منبع داده‌های درون جدول باشد.

اکنون ممکن است فکر کنید که پانویس جدول باید در انتهای جدول باشد. اما در عمل ممکن است بعد از ردیف هدر و قبل از بخش body نیز بیاید.

  • <tfoot> - عنصر پانویس جدول مجموعه‌ای از ردیف‌ها را تعریف می‌کند که به ارائه خلاصه‌ای از ستون‌های جدول می‌پردازند.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <table>
        <thead>
          <tr>
            <th>Country</th>
            <th>Capital</th>
            <th>Language</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="3">Copyright &copy; 2018 Example Organization</td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>India</td>
            <td>New Delhi</td>
            <td>Hindi</td>
          </tr>
          <tr>
            <td>France</td>
            <td>Paris</td>
            <td>French</td>
          </tr>
          <tr>
            <td>New Zealand</td>
            <td>Wellington</td>
            <td>English</td>
          </tr>
        </tbody>
      </table>
    </body>
</html>

عنصر کپشن (Caption)

این عنصر اساساً یک عنوان برای جدول است و باید بلافاصله پس از تگ باز شدن جدول بیاید. افزودن کپشن به جدول کار خوبی است، زیرا به سرعت خلاصه‌ای از آن چه جدول ارائه کرده است را نمایش می‌دهد:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <table>
        <caption>Countries, Capital and Language</caption>
        <thead>
          .....
        </thead>
        <tfoot>
          .....
        </tfoot>
        <tbody>
          .....
        </tbody>
      </table>
    </body>
</html>

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

==

بر اساس رای ۰ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
freecodecamp
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *