نحوه ایجاد یک جدول HTML با استفاده از تگ Table


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

پیش نیازها

  • دانش HTML. اگر در HTML تازه کار هستید یا نیاز به تجدید نظر دارید، می توانید آموزش های HTML موجود در مجموعه را بررسی کنید. تحصیلات HTML “چشم انداز”
  • برای تمرین ایجاد جداول HTML یک فایل به نام index.html ایجاد کنید. اگر نمی دانید چگونه یک فایل index.html ایجاد کنید، لطفاً دستورالعمل های آموزش کوتاه ما “ایجاد اولین سند html و آشنایی با ساختار صفحه آن” را دنبال کنید.

جدول در HTML چیست؟

جدول نمایش داده هایی است که در ردیف ها و ستون ها مرتب شده اند. در واقع بیشتر یک صفحه گسترده است. در HTML با استفاده از جداول می توانید داده هایی مانند تصاویر، متن، لینک ها و غیره را مرتب کنید. در ردیف ها و ستون های سلول ها

استفاده از جداول در وب اخیراً به دلیل تگ های شگفت انگیز جدول HTML که ایجاد و طراحی جداول را آسان می کند، محبوبیت بیشتری پیدا کرده است.

برای ایجاد جداول در HTML باید از تگ ها استفاده کنید. مهمترین آنها تگ است

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

تگ های رایج برای جداول HTML

یک جدول در HTML با یک تگ باز ایجاد می شود

و یک برچسب بسته شدن

. سایر برچسب ها عبارتند از:

  • برچسب: نشان دهنده ردیف ها است.
  • برچسب: برای ایجاد سلول های داده استفاده می شود.
  • برچسب: برای افزودن سرفصل های جدول استفاده می شود.
  • برچسب: برای درج زیرنویس استفاده می شود.
  • برچسب: یک هدر جداگانه به جداول اضافه می کند.
  • برچسب: بدنه اصلی جداول را نشان می دهد.
  • برچسب: یک فوتر جداگانه برای جداول ایجاد می کند.

نمونه ای از درج جدول در HTML:

<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <table>
   <tr>
      <th>Saturday</th>
      <th>Sunday</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      
   </tr>
   <tr>
      <td>12</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
   </tr>
   <tr>
      <td>35</td>
      <td>21</td>
      <td>34</td>
      <td>00</td>
      <td>8</td>
      <td>75</td>
      <td>24</td>
   </tr>
</body>
</html>

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

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

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

نمونه ای از ایجاد جدول HTML با استفاده از تگ Table

برای افزودن یک ردیف دیگر، مورد برجسته شده را اضافه کنید

در پایین جدول شما مانند:

<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <table>
   <tr>
      <th>Saturday</th>
      <th>Sunday</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      
   </tr>
   <tr>
      <td>12</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
   </tr>
   <tr>
      <td>35</td>
      <td>21</td>
      <td>34</td>
      <td>00</td>
      <td>8</td>
      <td>75</td>
      <td>24</td>
   </tr>
   <tr>
      <td>45</td>
      <td>61</td>
      <td>77</td>
      <td>60</td>
      <td>90</td>
      <td>15</td>
      <td>27</td>
   </tr>
</body>
</html>

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

نمونه ای از افزودن ردیف به جدول HTML

برای افزودن یک ستون دیگر، یک مورد داده جدول اضافی اضافه کنید

در هر عنصر ردیف

. مانند:

<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <table>
   <tr>
      <th>Saturday</th>
      <th>Sunday</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>ستون اضافه</th>
   </tr>
   <tr>
      <td>12</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
      <td>38</td>
   </tr>
   <tr>
      <td>35</td>
      <td>21</td>
      <td>34</td>
      <td>00</td>
      <td>8</td>
      <td>75</td>
      <td>24</td>
      <td>00</td>
   </tr>
   <tr>
      <td>45</td>
      <td>61</td>
      <td>77</td>
      <td>60</td>
      <td>90</td>
      <td>15</td>
      <td>27</td>
      <td>28</td>
   </tr>
</body>
</html>

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

مانند:

نمونه ای از اضافه کردن ستون به جدول HTML

اکنون که فهمیدید جداول HTML چیست و چگونه می توانید آنها را ایجاد کنید، بیایید ببینیم چگونه می توانیم از این برچسب ها برای ایجاد جداول با ویژگی های بیشتر استفاده کنیم.

نحوه اضافه کردن هدر به ستون های جدول در HTML

همانطور که در نمونه کدهای بالا مشاهده می کنید. برچسب

برای افزودن عنوان به ستون های جدول استفاده می شود. در طرح‌بندی‌های اولیه، هدر جدول همیشه ردیف بالا را اشغال می‌کند، به این معنی که خواهیم داشت

در ردیف اول جداول ما، داده های اعلام شده و سپس داده های واقعی در جدول. به طور پیش فرض، متن ارسال شده در هدر، در مرکز و پررنگ است.

نمونه ای از استفاده

:

<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <table>
   <tr>
    <th>نام</th>
    <th>نام خانوادگی</th>
    <th>آدرس ایمیل</th>
  </tr>
  <tr>
   <td>هستی</td>
   <td>بابایی</td>
   <td>(email protected)</td>
  </tr>
  <tr>
    <td>علی</td>
    <td>پورهاشمی</td>
    <td>(email protected)</td>
  </tr>
</body>
</html>

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

نحوه اضافه کردن عنوان به جدول در HTML

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

.

قبل از حرکت، اجازه دهید جدول خود را سبک کنیم تا بتوانیم تغییرات را واضح تر ببینیم. با قرار دادن مقداری کد css در تگ style می توانیم ظاهر جدول خود را بهبود ببخشیم. مثلا:

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding:10px;
}
</style>

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

اضافه کردن سبک پایه به جدول در HTML

نحوه اضافه کردن عنوان به جداول

استفاده اصلی از افزودن عنوان به جدول، ارائه توضیحاتی از داده های ارائه شده در جدول است. عنوان را می توان در بالا یا پایین جدول قرار داد و همیشه به طور پیش فرض در مرکز قرار می گیرد.

از تگ استفاده کنید

برای درج عنوان در جدول

<!DOCTYPE html>
<html>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding:10px;
}
</style>
<body>
   <h1>متاوبز</h1>
   <table>
   <caption>اطلاعات شخصی افراد</caption>
   <tr>
    <th>نام</th>
    <th>نام خانوادگی</th>
    <th>آدرس ایمیل</th>
  </tr>
  <tr>
   <td>هستی</td>
   <td>بابایی</td>
   <td>(email protected)</td>
  </tr>
  <tr>
    <td>علی</td>
    <td>پورهاشمی</td>
    <td>(email protected)</td>
  </tr>
</body>
</html>

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

نحوه اضافه کردن عنوان جدول

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

اگر در برنامه‌هایی مانند MS Office یا Excel کار کرده‌اید، احتمالاً با برجسته کردن سلول‌ها و کلیک کردن روی یک فرمان و voilà از این ویژگی استفاده کرده‌اید!

همین توابع را می توان با استفاده از دو ویژگی سلول، colspan برای پوشش افقی و rowspan برای پوشش عمودی، برای جداول HTML اعمال کرد. به این دو ویژگی اعداد بزرگتر از صفر اختصاص داده شده است که نشان دهنده تعداد سلول هایی است که می خواهید گسترش دهید.

<!DOCTYPE html>
<html>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding:10px;
}
</style>
<body>
   <h1>متاوبز</h1>
   <table>
   <caption>اطلاعات شخصی افراد</caption>
   
  <tr>
    <th>نام</th>
    <th>موضوع</th>
    <th>پسندیده شده</th>
  </tr>
  <tr>
    <td rowspan = "2">هستی</td>
    <td>وب پیشرفته</td>
    <td>75</td>
  </tr>
  <tr>
    <td>سیستم عامل</td>
    <td>60</td>
  </tr>
      <tr>
    <td rowspan = "2">علی</td>
    <td>وب پیشرفته</td>
    <td>80</td>
  </tr>
  <tr>
    <td>سیستم عامل</td>
    <td>75</td>
  </tr>
  <tr>
     <td></td>
    <td colspan="3">میانگین کل: 72.5</td>
  </tr>
</table>
</body>
</html>

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

نحوه استفاده از بسته بندی سلولی در جدول HTML

در مثال بالا، ما یک سلول داریم که شامل 2 سلول در ردیف ها و 3 سلول در ستون ها است. ما توانستیم دیافراگم را هم به صورت عمودی و هم افقی اعمال کنیم.

نکته: هنگام استفاده از ویژگی های colspan و rowspan، حتماً مقادیر اختصاص داده شده را به درستی اعلام کنید تا از همپوشانی سلول ها جلوگیری شود.

نحوه اضافه کردن هدر، پاورقی و پاورقی به جداول

درست مانند یک وب سایت یا هر سند دیگری که دارای سه بخش اصلی (سرصفحه، متن و پاورقی) است، جداول نیز چنین هستند.

در جدول، آنها بر اساس ویژگی ها تقسیم می شوند:

  • : یک هدر جداگانه برای جدول ارائه می کند.
  • : حاوی محتوای اصلی جدول است.
  • : یک فوتر جداگانه برای جدول ایجاد می کند.

نمونه ای از استفاده

،

و

:

<!DOCTYPE html>
<html>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding:10px;
}
</style>
<body>
   <h1>متاوبز</h1>
   <table>
   <caption>اطلاعات شخصی افراد</caption>
   <thead>
   <tr>
    <th>نام</th>
    <th>موضوع</th>
    <th>پسندیده شده</th>
   </tr>
  </thead>
  <tbody>
  <tr>
    <td rowspan = "2">هستی</td>
    <td>وب پیشرفته</td>
    <td>75</td>
  </tr>
  <tr>
    <td>سیستم عامل</td>
    <td>60</td>
  </tr>
      <tr>
    <td rowspan = "2">علی</td>
    <td>وب پیشرفته</td>
    <td>80</td>
  </tr>
  <tr>
    <td>سیستم عامل</td>
    <td>75</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
     <td></td>
    <td colspan="3">میانگین کل: 72.5</td>
  </tr>
  </tfoot>
</table>
</body>
</html>

در مثال بالا، هدر با نام، موضوع و موارد پسندیده، بدنه جدول با اطلاعات داده شده و در نهایت پاورقی با میانگین کلی را در خود جای داده است.

نکته مهم دیگری که باید به آن توجه داشت این است که یک توده می تواند بیش از یک عضو بدن داشته باشد.

زمان استفاده از جداول

موقعیت های زیادی وجود دارد که جداول می توانند در توسعه پروژه های شما مفید باشند:

هنگامی که می خواهید داده ها را با ویژگی های مشترک مقایسه کنید، مانند تفاوت بین A و B یا امتیازات تیم X و Y، می توانید از جداول استفاده کنید.

اگر می خواهید یک نمای کلی از داده های عددی ارائه دهید، می توانید از آن استفاده کنید.

یک جدول می تواند به خوانندگان کمک کند تا به سرعت اطلاعات خاص ارائه شده را به شیوه ای واضح پیدا کنند. به عنوان مثال، اگر به لیست طولانی اسامی نگاه می کنید، می توان از یک جدول برای شکستن لیست استفاده کرد و کار را برای خوانندگان آسان تر می کند.

تبریک می گویم! اکنون می توانید جداول مختلف را در صفحه وب در مرورگر تنظیم و طراحی کنید تا گام به گام با ما همراه باشید تا HTML را به صورت حرفه ای یاد بگیرید.

درباره HTML بیشتر بخوانید و حرفه ای شوید:

اگر سوال یا نظری دارید، خوشحال می شویم آن را با ما در میان بگذارید. در تلگرام با ما در ارتباط باشید.

Related Posts

دیدگاهتان را بنویسید