مرحله به مرحله آموزش نحوه ساخت جدول در HTML

مرحله به مرحله آموزش نحوه ساخت جدول در HTML

نوشته شده توسط: تیم فنی نیک آموز
تاریخ انتشار: ۱۸ شهریور ۱۴۰۳
آخرین بروزرسانی: ۱۸ شهریور ۱۴۰۳
زمان مطالعه: 8 دقیقه
۵
(۱)

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

دوره آموزش طراحی وب - صفر تا سایت نیک آموز

آشنایی با جدول در HTML

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

کاربرد ساخت جدول در HTML

جدول کاربردهای مختلفی دارد؛ به همین دلیل، سازندگان HTML ابزاری را برای ساختار و ارائه داده‌های جدولی در وب ارائه کرده‌اند. از مهم‌ترین کاربردهای ساخت جدول در HTML می‌توان به موارد زیر اشاره کرد:

  • سازماندهی و نمایش داده‌ها به‌صورت سطرها و ستون‌ها
  • نمایش اطلاعات به شکل چشم‌گیر و قابل فهم برای کاربران
  • نمایش ارقام و اطلاعات را به‌صورت ستونی و سطری و استدلال راحت براساس داده‌ها
  • نمایش داده‌های مقایسه‌ای و ارائه اطلاعات به کاربران

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

ساختار و تگ‌ های اصلی جدول در HTML

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

 

تگ توضیحات
<tabel> شروع و پایان تعریف جدول را تعریف می‌کند.
<tr> سطرها را نشان می‌دهد.
<th> سربرگ‌ها یا عناوین را تعریف می‌کند.
<td> سلول‌های داده را ایجاد می‌کند.
<caption> برای درج زیرنویس استفاده می‌شود.

 

روش ساخت جدول در HTML

همان‌طور که اشاره شد، با استفاده از تگ باز و بسته <table> می‌توانید یک جدول HTML ایجاد کنید. در داخل این تگ‌ها، با استفاده از تگ‌های <tr> و  <td> می‌توانید ردیف‌ها و ستون‌ها را اضافه و داده‌ها را سازماندهی کنید. برای مثال، جدولی با دو سطر و سه ستون به‌صورت زیر است:

 

<table>
  <tr>
          <td>Column 1</td>
          <td>Column 2</td>
          <td>Column 3</td>
  </tr>
  <tr>
          <td>Column 1</td>
          <td>Column 2</td>
          <td>Column 3</td>
  </tr>
</table>

 

پس از ساخت جدول در HTML، برای بررسی نحوه عملکرد آن، کافی است کد بالا را در فایل  index.html یا html دیگری قرار دهید. سپس، فایل را در مرورگر ذخیره و مجدد بارگذاری کرده تا نتایج خود را بررسی کنید. اکنون صفحه وب باید یک جدول با سه ستون و دو ردیف داشته باشد:

 

روش ساخت جدول در HTML

 

برای افزودن یک ردیف دیگر، کافی است تگ <tr> هایلایت‌شده را به پایین جدول خود اضافه کنید:

 

<table>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

 

نتایج را ذخیره کرده و در مرورگر خود بررسی کنید. اکنون شما باید تصویر شبیه به زیر را مشاهده کنید:

 

روش ساخت جدول در HTML

 

برای افزودن یک ستون دیگر، سعی کنید یک <td> را در به هر ردیف <tr> اضافه کنید:

 

<table>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4 </td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
</table>

 

نتایج خود را ذخیره کرده و در مرورگر بررسی کنید. صفحه وب باید یک جدول با سه ردیف و چهار ستون نمایش دهد:

 

روش ساخت جدول در HTML

 

افزودن حاشیه به جدول

به‌طورکلی، جداول باید با CSS استایل‌بندی شوند. به‌جای آن نیز می‌توانید با استفاده از HTML، برخی ویژگی‌ها را به <table> اضافه کنید. به‌عنوان مثال، می‌توانید یک حاشیه با ویژگی border به جدول اضافه کنید:

 

<table border="1">
  <tr> 
    <td>Row 1</td>
    <td>Row 2</td>
    <td>Row 3</td>
  </tr>
  <tr> 
    <td>Row 1</td>
    <td>Row 2</td>
    <td>Row 3</td>
 </tr>
</table>

 

ویژگی border را به جدول خود اضافه کرده و نتایج خود را در مرورگر بررسی کنید. درنهایت، فایل خود را ذخیره و در مرورگر بارگذاری کنید. اکنون باید اطراف سطرها و ستون‌ها جدول، یک حاشیه وجود داشته باشد: 

 

افزودن حاشیه به جدول

اضافه کردن هدینگ‌ ها و فوترها

برای بررسی و خواندن آسان ردیف‌ها و ستون‌ها، از هدینگ‌ها استفاده می‌شود. به زبان ساده‌تر، هدینگ، دسترسی به داده‌ها را راحت‌تر می‌کند. اما افزودن هدینگ‌ها به جدول کار راحتی است و شما با استفاده از تگ‌های باز و بسته <th> این کار را انجام دهید. همچنین برای افزودن هدرهای ستون‌ها، باید یک <tr> جدید در بالای جدول خود وارد کرده تا بتوانید نام ستون‌ها را با استفاده از تگ‌های <th> اضافه کنید.

برای افزودن هدینگ‌ها و فوتر‌ها فایل index.html را پاک کنید و یک ردیف از عناوین ستون‌ها را با کد زیر اضافه کنید:

 

<table border="1">
  <tr> 
    <th></th>
    <th>Column Header 1</th>
    <th>Column Header 2</th>
    <th>Column Header 3</th>
  </tr>
</table>

 

سپس، فایل index.html را ذخیره کرده و در مرورگر خود مجدد بارگذاری کنید. اکنون شما باید خروجی زیر را دریافت کنید:

 

هدینگ‌ها و فوترها

صفحه وب شما باید یک ردیف از هدرهای ستون را نمایش دهد. توجه داشته باشید که عنوان ستون اول خالی است. درصورت تمایل می‌توانید یک عنوان ستون را در اینجا اضافه کنید. برای افزودن هدرهای ردیف، باید تگ‌های باز و بسته <th> را به‌عنوان اولین مورد در هر عنصر <tr> ردیف جدول اضافه کنید. هدینگ‌ها و داده‌های ردیف را با اضافه‌کردن قطعه کد برجسته‌شده در زیر بین تگ بسته </tr> و تگ <table> بسته در فایل index.html خود اضافه کنید:

 

<table border="1">
 <tr> 
    <th></th>
    <th>Column Header 1</th>
    <th>Column Header 2</th>
    <th>Column Header 3</th>
  </tr>
  <tr>
    <th>Row Header 1</th>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr> 
    <th>Row Header 2</th>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
 </tr>
 <tr> 
    <th>Row Header 3</th>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
 </tr>
</table>

 

درنهایت، فایل index.html را ذخیره کرده و در مرورگر خود بارگذاری مجدد کنید. اکنون باید خروجی زیر را مشاهده کنید و جدولی با سه عنوان ستون و سه عنوان ردیف داشته باشید.

 

هدینگ‌ها و فوترها

 

جمع‌بندی: ساخت جدول در HTML

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

چه رتبه ای می‌دهید؟

میانگین ۵ / ۵. از مجموع ۱

اولین نفر باش

title sign
معرفی نویسنده
تیم فنی نیک آموز
مقالات
387 مقاله توسط این نویسنده
محصولات
0 دوره توسط این نویسنده
تیم فنی نیک آموز
title sign
دیدگاه کاربران

close-image