کار با جداول وب

مقدمه

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

ساخت جدول در صفحات وب با عنصر table

در HTML از عنصر table براي ایجاد یک جدول استفاده می‌شود. این عنصر در نسخه‌های قبلی HTML داراي صفات زیادی بود که در حال حاضر از آنها پشتیبانی نمی‌شود و صفت‌های عمومی تنها صفت‌های مورد پشتیبانی عنصر table هستند. عنصر table حکم یک جانگهدار (placeholder) را برای جداول دارد و تعریف سطرها، ستون‌ها، سلول‌ها و داده‌های جدول با استفاده از عناصر tr و th و td صورت می‌گیرد که فرزندان table محسوب می‌شوند.

عنصر tr (که از عبارت table row گرفته شده) برای تعریف یک سطر کاربرد دارد و عناصر th (که از عبارت table header گرفته شده) و td (که از عبارت table data گرفته شده) به ترتیب، برای تعریف عناوین جدول و داده‌های سلول‌ها کاربرد دارند. مثال زیر نحوه‌ی ایجاد یک جدول ساده متشکل از سه سطر و دو ستون را نشان می‌دهد.

HTML

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

بنابراین، همانطور که در مثال بالا نیز دیده می‌شود، محتویات یک جدول به صورت سطر به سطر تعریف و وارد می‌شود. به این ترتیب که هر عنصر tr یک سطر را تعریف می‌کند و درون هر عنصر tr از عناصر th و td برای تعریف داده‌های آن سطر استفاده می‌شود. معمولاً سطر اول حاوی عناصر th و بقیه‌ی سطرها حاوی عناصر td هستند.

اما اجازه دهید هر یک از عناصر فرزند tr و th و td را به صورت دقیق‌تر بررسی کنیم.

تعریف سطرهای جدول با عنصر tr

عنصر tr برای تعریف یک سطر از سلول‌ها در یک جدول کاربرد دارد. سلول‌های هر سطر نیز با استفاده از عناصر th و td تکمیل می‌شوند. عنصر tr همانند والد خود یعنی table در نسخه‌های پیشین از تعدادی صفت اختصاصی برخوردار بود که در استاندارد فعلی HTML و در واقع از بعد از انتشار HTML5 پشتیبانی از این صفت‌ها متوقف شده و لذا صفت‌های tr به صفت‌های عمومی محدود می‌شوند. در کد زیر یک جدول متشکل از چهار سطر ایجاد شده و عناصر th و td برای وارد کردن داده‌ها در سلول‌های هر سطر به کار گرفته شده‌اند.

HTML

<table>
  <tr>
    <th>Name</th>
    <th>Id</tthd>
    <th>Member Since</th>
    <th>Balance</th>
  </tr>
  <tr>
    <td>Margaret Enguyen</td>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <td>Edvard Galinski</td>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <td>Hoshi Nakamura</td>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>

تعریف عنوان برای یک گروه از سلول‌ها با عنصر th

عنصر th که نامش از روی عبارت table header اخذ شده، برای تعریف عنوان (header) برای یک گروه از سلول‌ها کاربرد دارد. تعیین دقیق این گروه، نیازمند استفاده از صفت‌های scope و headers است که در اینجا به همراه سایر صفت‌های مربوط به عنصر th معرفی می‌شوند.

• scope: نقش این صفت، تعیین سلول‌هایی است که به هدر یا عنوان تعریف‌شده با استفاده از عنصر th مربوط هستند و این عنوان به آنها اختصاص دارد. این صفت می‌تواند یکی از مقادیر row، col، rowgroup و colgroup را دریافت کند. استفاده از مقدار row برای این صفت به این معناست که عنوان مورد نظر به سلول‌های سطری اختصاص دارد که عنصر th به آن تعلق دارد. طبیعتاً مقدار col نیز به این معناست که عنوان مورد نظر به ستونی مربوط است که عنصر th به آن تعلق دارد. مقدار rowgroup به این معناست که عنوان مورد نظر به یک گروه از سطرها تعلق دارد و در حکم عنوان همه‌ی این سلول‌هاست. این سلول‌ها می‌توانند بسته به مقدار صفت dir مربوط به عنصر table در سمت چپ یا راست عنوان مورد نظر قرار داشته باشند. مقدار colgroup نیز عنوانی است که به شکل مشابهی به یک گروه از ستون‌ها مربوط می‌شود.
• headers: اگر یک عنصر th به یک یا چند عنصر th دیگر مرتبط باشد، می‌توانیم با استفاده از این صفت، این ارتباط را مشخص کنیم. مقداری که این صفت دریافت می‌کند، یک لیست از رشته‌های متنی است که با فاصله از هم جدا شده‌اند و هر یک از این رشته‌ها برابر با مقدار صفت id یک عنصر th مرتبط با عنصر جاری است.
• colspan: از این صفت برای گسترش تعداد ستون‌هایی که این عنوان به آنها اختصاص دارد، استفاده می‌شود. بنابراین، مقداری که باید برای این صفت تعیین کنیم، یک عدد صحیح غیرمنفی است که البته نباید از 1000 نیز بزرگتر باشد، در غیر این صورت، برابر با مقدار پیش‌فرض یعنی 1 در نظر گرفته می‌شود.
• rowspan: این صفت برای گسترش تعداد سطرهایی که این عنوان به آنها اختصاص دارد، به کار می‌رود. با تخصیص مقدار صفر به این صفت، سطرهایی که تحت پوشش این عنوان هستند تا انتهای جدول گسترش پیدا می‌کنند. در ضمن، هر مقدار بزرگتر از 65534 برابر با همین عدد در نظر گرفته می‌شود.
• abbr: این صفت برای ارائه‌ی یک توصیف مختصر و کوتاه از محتوای سلول‌ها کاربرد دارد. البته توجه داشته باشید که استفاده از این صفت در مرورگرهای بصری و گرافیکی نتیجه‌ای به همراه ندارد اما مفسرهایی مانند صفحه‌خوان‌ها از مقدار این صفت استفاده می‌کنند.

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

HTML

<table>
  <tr>
    <th rowspan="2">Name</th>
    <th rowspan="2">Id</th>
    <th colspan="2" id="member">Membership Dates</th>
    <th rowspan="2">Balance</th>
  </tr>
  <tr>
    <th headers="member">Joined</th>
    <th headers="member">Canceled</th>
  </tr>
  <tr>
    <th scope="row">Margaret Nguyen</th>
    <td>427311</td>
    <td>n/a</td>
    <td>0.00</td>
  </tr>
  <tr>
    <th scope="row">Edvard Galinski</th>
    <td>533175</td>
    <td><time datetime="2017-04-08">April 08, 2017</time></td>
    <td><time datetime="2015-10-10">October 10, 2015</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th scope="row">Hoshi Nakamura</th>
    <td>601942</td>
    <td><time datetime="2021-07-23">July 23, 2021</time></td>
    <td>n/a</td>
    <td>15.00</td>
  </tr>
</table>

در مثال بالا، یک استایل CSS را برای نمایش کادرها یا قاب‌های (borders) عناصر table و th و td به کار گرفته‌ایم که فعلاً یعنی تا قبل از وارد شدن به دنیای CSS می‌توانید آن را نادیده بگیرید. به طور کلی، استایل‌های پیش‌فرضی که مرورگرها روی جداول HTML اعمال می‌کنند، چندان مناسب نیست و باعث می‌شود که این جداول ظاهر پیش‌فرض مناسبی نداشته باشند اما با استفاده از CSS می‌توانیم استایل‌های زیبا و متنوعی را برای جداول ایجاد کنیم.

تعریف سلول‌های داده‌ای جدول با عنصر td

نام عنصر td از روی عبارت table data گرفته شده و نقش این عنصر را کاملاً نشان می‌دهد. در حقیقت، سلول‌های یک جدول یا از نوع عنوانی هستند که با استفاده از عنصر th ایجاد می‌شوند و یا از نوع داده‌ای هستند که با استفاده از عنصر td ایجاد می‌شوند. عنصر td علاوه بر صفت‌های عمومی از صفت‌های اختصاصی colspan, rowspan و headers نیز پشتیبانی می‌کند که در بخش قبل و هنگام بررسی عنصر th آنها را معرفی کردیم و از تکرار این مطالب خودداری می‌کنیم.

HTML

<table>
  <tr>
    <th scope="col">Player</th>
    <th scope="col">Gloobles</th>
    <th scope="col">Za'taak</th>
  </tr>
  <tr>
    <th scope="row">IR-7</th>
    <td>7</td>
    <td>4,569</td>
  </tr>
  <tr>
    <th scope="row">Khiresh odo</th>
    <td>7</td>
    <td>7,223</td>
  </tr>
  <tr>
    <th scope="row">Mia Golong</th>
    <td>9</td>
    <td>6,219</td>
  </tr>
</table>

تعریف عنوان کلی جدول با عنصر caption

براي تعریف یک عنوان کلی براي جدول از عنصر caption درون عنصر table استفاده می‌شود. محتوای این عنصر در حالت پیش‌فرض، به طور وسط‌چین و معمولاً در بالای جدول نمایش داده می‌شود. در مورد عنصر caption باید توجه داشته باشید که این عنصر باید به عنوان نخستین فرزند table یعنی بلافاصله بعد از تگ باز <table> بیاید. در ضمن، برای هر جدول نمی‌توان بیش از یک عنصر caption را استفاده کرد.

HTML

<table>
  <caption>Example Caption</caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>user1</td>
    <td>user1@example.com</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>user2@example.com</td>
  </tr>
</table>

در استاندارد کنونی HTML تنها صفت‌های مورد پشتیبانی توسط عنصر caption صفت‌های عمومی هستند و از صفت align که در نسخه‌های قبلی برای تعیین وضعیت ترازبندی محتوای عنصر caption استفاده می شد، پشتیبانی نمی‌شود.

فرمت‌دهی به ستون‌های جدول

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

HTML

<table>
  <colgroup span="2" style="background:red"></colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>

عنصر دیگری با نام col نیز وجود دارد که برای تعریف یک ستون در جدول کاربرد دارد اما معمولاً تنها جایی که از این عنصر استفاده می‌شود، درون عنصر colgroup است. در مثال زیر می‌توانید نحوه‌ی استفاده از عنصر col درون یک عنصر colgroup را ببینید.

HTML

<table>
  <caption>Supertheros and sidekicks</caption>
  <colgroup>
    <col>
    <col span="2" class="batman">
    <col span="2" class="flash">
  </colgroup>
  <tr>
    <td> </td>
    <th scope="col">Batman</th>
    <th scope="col">Robin</th>
    <th scope="col">The Flash</th>
    <th scope="col">Kid Flash</th>
  </tr>
  <tr>
    <th scope="row">Skill</th>
    <td>Smarts</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
</table>

همانطور که می‌بینید، در مثال‌های بالا عنصر colgroup بعد از عنصر caption و قبل از هر عنصر دیگری مانند tr آورده شده است. این یک قاعده است که همواره باید رعایت شود.

تفکیک بخش‌های مختلف یک جدول

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

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

HTML

<table>
  <thead>
    <tr>
      <th>Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="eow">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

این سه عنصر به جز صفت‌های عمومی از هیچ صفت دیگری پشتیبانی نمی‌کنند اما در مورد آنها باید همواره نکات زیر را مد نظر قرار دهیم:

• اگر یک جدول شامل بخش thead باشد حتماً باید دارای بخش tbody نیز باشد. یعنی ما نمی‌توانیم از عنصر thead در غیاب tbody برای یک جدول استفاده کنیم.
• هر سطر (هر عنصر tr) که متعلق به thead یا tfoot نباشد، باید حتماً به یک عنصر tbody تعلق داشته باشد. به عبارت دیگر، در حضور یک عنصر tbody هیچ سطری نمی‌تواند فرزند مستقیم table باشد.
• یک جدول می‌تواند شامل بیش از یک عنصر tbody باشد. با این کار می‌توان در جداول طولانی سطرها را در چند بخش مجزا قرار داد.
• وقتی سندی را چاپ کنیم که حاوی یک جدول طولانی است که در یک صفحه قابل نمایش نیست و محتوای آن در چند صفحه نمایش داده می‌شود، محتوای thead و tfoot در همه‌ی صفحات یکسان یا لااقل بسیار مشابه است اما محتوای tbody در هر صفحه تغییر می‌کند.

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