آموزش زبان HTML (جلسه ۴۷)

آشنایی با تگ table در اچ تی ام ال (html)

به طور کلی زمانیکه بخواهیم داده ها را به صورت نظامند و مدون در معرض دید کاربران قرار دهیم می بایست از جداول استفاده کنیم که اینکار از طریق قرار دادن داده ها در ستون های و ردیف های جدول امکان پذیر است. در گذشته برنامه نویسان عادت داشتند که از جداول برای ساخت Layout کلی صفحات وب استفاده کنند اما امروزه از جداول صرفاً برای نمایش داده ها استفاده می شود.
شاید زمانیکه بخواهیم برای اولین بار در زبان اچ تی ام ال (html) اقدام به ساخت جدول کنیم، اینکار کمی سخت و پیچیده به نظر برسد اما چنانچه منطق پشت ساخت جداول را در اچ تی ام ال (html) فرا بگیریم اینکار بسیار ساده خواهد شد.
دانستن نکته دیگری که در مورد جداول ضروری به نظر می رسد این است که علاوه بر اطلاعات، می توان تصاویر، فرم، لینک، لیست و حتی جداول دیگر را داخل یک جدول قرار داد.
برای ساخت یک جدول در زبان اچ تی ام ال (html) می بایست از تگ های <table> و <table/> استفاده کرد. در واقع هر آنچه داخل این دو تگ قرار گیرد به منزله داده های جدول محسوب خواهد شد. اما توجه داشته باشیم که برای آنکه داده ها قابل درک برای تگ <table> باشند می بایست آن ها را داخل تگ های به خصوصی که برای این کار طراحی شده اند قرار داد. به طور کلی برای ایجاد ردیف از تگ <tr> و <tr/> استفاده می کنیم. مثلاً اگر بخواهیم در جدول خود سه ردیف داشته باشیم، می بایست سه بار تگ های فوق را تکرار کنیم. حال برای آنکه تعیین کنیم که جدول ما دارای چند ستون باشد می بایست داخل تگ <tr> از تگ های <td> و <td/> استفاده کنیم (توجه داشته باشیم که tr مخفف واژگان table row به معنی “ردیف جدول” و td مخفف واژگان table data به معنی “اطلاعات جدول” می باشد. اگرچه تگ td به معنی “اطلاعات جدول” است، اما این تگ در حقیقت نشانگر ستون های جدول ما خواهد بود).
برای روش شدن مطالب تئوریک فوق، با وارد کردن کد زیر داخل ویرایشگر متن ساخت اولین جدول خود در اچ تی ام ال (html) را آغاز می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <title>asrefonon</title>
   </head>
   
   <body>
       <table>
           <tr>
               <td>Row 1, cell 1</td>
               <td>Row 1, cell 2</td>
               <td>Row 1, cell 3</td>
           </tr>
           <tr>
               <td>Row 2, cell 1</td>
               <td>Row 2, cell 2</td>
               <td>Row 2, cell 3</td>
           </tr>
          <tr>
               <td>Row 3, cell 1</td>
               <td>Row 3, cell 2</td>
               <td>Row 3, cell 3</td>
           </tr>
       </table>
   </body>
</html>

ابتدا این فایل را در مرورگر مد نظر خود اجرا کرده تا بهتر بتوان روی تک تک اجزای تشکیل دهنده جدول صحبت کرد:

ساخت_اولین_جدول_در_اچ_تی_ام_ال

از آنجا که قصد داریم ساختار یک جدول را بهتر متوجه شویم، با فشردن دکمه های Ctrl + A در مرورگر کل جدول ساخته شده را انتخاب می کنیم. پس از انتخاب می بینیم که مابین ردیف ها و ستون های جدول ساخته شده یک فاصله وجود دارد.
اگر به کد فوق توجه کنیم، می بینیم که ابتدا تگ های <table> و </table> را نوشته ایم. سپس یک بار تگ های <tr> و </tr> را نوشته تا اولین ردیف جدول خود را ایجاد کنیم. اگر توجه کنیم می بینیم که تگ های <td> و </td> سه بار داخل تگ <tr> وارد شده اند. از این رو، جدول ما دارای سه ستون خواهد بود. اولین تگ <td></td> در هر ردیف نشانگر اولین ستون جدول خواهد بود، دومین تگ  <td></td> نشانگر ستون دوم خواهد بود و در نهایت سومین تگ  <td></td> نشانگر ستون سوم جدول خواهد بود. برای اینکه دو ردیف دیگر به جدول خود اضافه کنیم، تگ های <tr></tr> و هر آنچه داخل آن هست را کپی کرده و دو بار آن را داخل تگ <table> اصطلاحاً Paste می کنیم.
با این روشن به هر تعداد که بخواهیم می توانیم ردیف به جدول خود اضافه کنیم. اکنون برای آنکه بخواهیم border یی برای جدول خود در نظر بگیریم، می بایست از Attribute یی تحت همین عنوان استفاده کنیم. برای روشن شدن این مطلب کد فوق را به صورت زیر تکمیل می کنیم:

<!DOCTYPE html>
   <body>
       <table border="1">
           <tr>
               <td>Row 1, cell 1</td>
               <td>Row 1, cell 2</td>
               <td>Row 1, cell 3</td>
           </tr>
           <tr>
               <td>Row 2, cell 1</td>
               <td>Row 2, cell 2</td>
               <td>Row 2, cell 3</td>
           </tr>
          <tr>
               <td>Row 3, cell 1</td>
               <td>Row 3, cell 2</td>
               <td>Row 3, cell 3</td>
           </tr>
       </table>
   </body>

همانطور که در کد فوق می بینیم داخل تگ <table> دستور border را نوشته و مقداری همچون عدد یک را برای آن در نظر می گیریم:

اضافه_کردن_border_به_جدول_در_html

می بینیم که دور کلیه اجزای تشکیل دهنده جدول ما یک border به ضخامت یک پیکسل قرار می گیرد (می توان برای دیدن عملکرد بیشتر این دستور، مقداری بیشتری همچون عدد ۵۰ را برای آن در نظر گرفتن و خروجی را مشاهده کرد).
حال چنانچه بخواهیم یک Header برای جدول خود در نظر بگیریم می بایست از تگی تحت عنوان <th></th> استفاده کنیم:

<!DOCTYPE html>
   <body>
       <table border="1">
           <tr>
               <th>Row 1, cell 1</th>
               <th>Row 1, cell 2</th>
               <th>Row 1, cell 3</th>
           </tr>
           <tr>
               <td>Row 2, cell 1</td>
               <td>Row 2, cell 2</td>
               <td>Row 2, cell 3</td>
           </tr>
          <tr>
               <td>Row 3, cell 1</td>
               <td>Row 3, cell 2</td>
               <td>Row 3, cell 3</td>
           </tr>
       </table>
   </body>

همانطور که در کد فوق مشاهده می شود، کلیه تگ های <td> موجود در ردیف اول را به تگ های <th> تبدیل کرده ایم (به خاطر داشته باشیم که th مخفف واژگان table head است):

اضافه_کردن_head_به_جدول_خود_در_اچ_تی_ام_ال

از ویژگی های تگ <th> این است که داده های داخل آن به صورت پیش فرض به شکل Bold نمایش داده شده و در مرکز قرار می گیرند.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان