امتیاز دهید:

به طور کلی زمانیکه بخواهیم داده ها را به صورت نظامند و مدون در معرض دید کاربران قرار دهیم می بایست از جداول استفاده کنیم که اینکار از طریق قرار دادن داده ها در ستون های و ردیف های جدول امکان پذیر است. در گذشته برنامه نویسان عادت داشتند که از جداول برای ساخت 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>Netshahr</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 به ضخامت یک پیکسل قرار می گیرد (می توان برای دیدن عملکرد بیشتر این دستور، مقداری بیشتری همچون عدد 50 را برای آن در نظر گرفتن و خروجی را مشاهده کرد).
حال چنانچه بخواهیم یک 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 نمایش داده شده و در مرکز قرار می گیرند.


نظرات
نظرات
  • مهدی :

    با درود و سپاس از مطلب آموزنده ی شما؛
    مشکلی که مرا در مورد این موضوع خیلی درگیر کرده است پاسخ به این سوال است که :
    چگونه جداول دو حالته ایجاد کنیم که حات های آن ها مربوط به پنهان شدن محتوا و نمایان شدن آن ها باشد. به عبارت دیگر چگونه بر روی متنی مانند "آشکار" کلیک کنیم تا متون مورد نظر در صفحه نمایش داده شود.


    1394/04/11 14:40:22
  • sita :

    very nice


    1394/02/20 05:11:28
  • نت شهر :

    در پاسخ به حامد"]سلام داداش .دمت گرم بابت مطالب ارزنده ای که می ذاری. ازت یه سوال دارم .خدا کنه بتونی کمکم کتی کارم خیلی گیره این مطلبه . چطوری می تونم عکس بذارم توی خونه های جدول؟ خدا کنه بتونی جواب بدی . موفق باشی داداش گلم[/quote]
    [quote name="حامد

    سلام داداش .دمت گرم بابت مطالب ارزنده ای که می ذاری. ازت یه سوال دارم .خدا کنه بتونی کمکم کتی کارم خیلی گیره این مطلبه . چطوری می تونم عکس بذارم توی خونه های جدول؟ خدا کنه بتونی جواب بدی . موفق باشی داداش گلم


    سلام
    این کار بسیار ساده ای است. صرفا همانطور که از تگ img در سایر بخش های صفحه استفاده می کنید، می توانید داخل تگ های td یک جدول از تگ img استفاده نمایید.

    با تشکر از شما
    بهزاد مرادی


    1393/03/31 05:04:21
  • حامد :

    سلام داداش .دمت گرم بابت مطالب ارزنده ای که می ذاری. ازت یه سوال دارم .خدا کنه بتونی کمکم کتی کارم خیلی گیره این مطلبه . چطوری می تونم عکس بذارم توی خونه های جدول؟ خدا کنه بتونی جواب بدی . موفق باشی داداش گلم


    1393/03/27 15:32:58