نحوه ساخت جدول (Table) در Html

مقدمه

جدول ها در وب کاربرد های زیادی دارند. از جمله این کاربرد ها میتوان به نمایش دادن اطلاعات با ظاهر های متفاوت اشاره کرد. برای ساخت جدول در Html ادامه این مطلب را بخوانید.

جدول ها در وب کاربرد های متفاوت و زیادی دارند. با کمک جدول ها میتوان اطلاعات را مدیریت کرد.

ساخت جدول در Html
جدول در Html فقط با یک تگ انجام نمی شود؛ بلکه ۶ تگ مختلف مربوط به ساخت جدول در Html وجود دارد.
در زیر نمونه کد یک جدول در PHP را می بینیم:

<table>
   <thead>
      <tr>
         <th>شناسه</th>
         <th>نام</th>
         <th>نام خانوادگی</th>
         <th>سن</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th>1023</th>
         <th>----</th>
         <th>----</th>
         <th>۲۵</th>
      </tr>
      <tr>
         <th>2459</th>
         <th>----</th>
         <th>----</th>
         <th>31</th>
      </tr>
   </tbody>
</table>

ابتدا برای ساخت جدول از تگ table استفاده می کنیم. این تگ، تگ بسته هم دارد و بقیه کد های مربوط به جدول درون این تگ قرار می گیرند. سپس با تگ thead قسمت بالایی جدول را می سازیم که در مثال هم مشاهده می کنید. این تگ هم، تگ بسته را دارد. 

بعد درون تگ thead، تگ tr را قرار می دهیم. این تگ هر سطر در جدول را مشخص می کند.یعنی اگر دو تا tr قرار دهیم این قسمت جدول دو سطر خواهد بود.
داخل tr که در thead قرار دارد؛ تگ th را می نویسیم. این تگ مشخصات جدول را تعیین می کند و برای هر ستون از جدول در thead، باید از th استفاده کرد. می توانید به هر تعداد دلخواهتان از th در تگ thead قرار دهید. 

حالا کلا از تگ thead خارج می شویم و درون تگ table، تگ tbody را می نویسیم. در این قسمت محتوا و بدنه جدول را شکل می دهیم. در ادامه درون تگ tbody دوباره از تگ tr استفاده می کنیم. همانطور که در بالا هم گفته شد این تگ مربوط به ساخت هر سطر در جدول است. 

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