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

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

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

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

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

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

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

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

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

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

روش ساخت جدول در 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 دیگری قرار دهید. سپس، فایل را در مرورگر ذخیره و مجدد بارگذاری کرده تا نتایج خود را بررسی کنید. اکنون صفحه وب باید یک جدول با سه ستون و دو ردیف داشته باشد:

برای افزودن یک ردیف دیگر، کافی است تگ <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>

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

برای افزودن یک ستون دیگر، سعی کنید یک <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>

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

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

به‌طورکلی، جداول باید با 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 می‌توانید سؤالات خود را در بخش کامنت‌ها با ما به اشتراک بگذارید.