جدول مجموعه ای از داده ها است که توسط ردیف ها و ستون ها سازماندهی شده اند. جداول برای نمایش اتصالات بین انواع داده‌ها، مانند : محصولات و هزینه آنها، استخدام و تاریخ استفاده، یا زمان پرواز و حرکت مفید هستند. در این آموزش، جدولی را با استفاده از HTML ایجاد می‌کنیم، آن را با اضافه کردن مقدار دلخواه سطر و ستون سفارشی می‌کنیم و عناوین سطر و ستون را اضافه می‌کنیم تا خوانایی جدول آسان تر شود.
پیش نیازها
- آشنایی با HTML. اگر با HTML آشنا نیستید یا نیاز به یک بازنگری دارید، می توانید آموزش های HTML مجموعه را در ” آموزش HTML ” مرور کنید .
- فایلی به عنوان index.html برای تمرین ایجاد جداول HTML ایجاد نمایید. اگر نمی دانید چگونه یک index.html فایل بسازید، لطفاً دستورالعمل های آموزش مختصر ما ” ایجاد اولین سند html و آشنایی با ساختار صفحات آن ” را دنبال کنید .
جدول در HTML چیست؟
جدول نمایش داده هایی است که در ردیف ها و ستون ها مرتب شده اند. در واقع، بیشتر شبیه یک صفحه گسترده است. در HTML، با کمک جداول، می توانید داده هایی مانند تصاویر، متن، پیوندها و غیره را در ردیف ها و ستون های سلول ها مرتب کنید.
استفاده از جداول در وب اخیراً به دلیل تگ های شگفت انگیز جداول HTML که ایجاد و طراحی آنها را آسان تر می کنند، محبوبیت بیشتری پیدا کرده اند.
برای ایجاد جداول در HTML باید از تگ ها استفاده کنید. مهمترین آنها تگ <table> است که تگ اصلی در جداول هستند و نشان می دهد که جداول از کجا شروع می شوند و کجا به پایان می رسند.
تگ های رایج جدول HTML
یک جدول در HTML با یک تگ <table> باز و یک تگ بسته </table> ایجاد می شود. سایر تگ ها عبارتند از:
- تگ <tr> : نشان دهنده ردیف ها است.
- تگ <td> : برای ایجاد سلول های داده استفاده می شود.
- تگ <th> : برای اضافه کردن سرفصل های جداول استفاده می شود.
- تگ <caption> : برای درج زیرنویس استفاده می شود.
- تگ <thead> : یک هدر جداگانه به جداول اضافه می کند.
- تگ <tbody> : بدنه اصلی جداول را نشان می دهد.
- تگ <tfoot> : یک فوتر جداگانه برای جداول ایجاد می کند.
نمونه ای از درج جدول در 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 دیدن کنید.)
اکنون صفحه وب شما باید یک جدول با هفت ستون و سه ردیف داشته باشد. مانند تصویر زیر:
برای افزودن یک ردیف اضافی، <tr>عنصر برجسته شده را به پایین جدول خود اضافه کنید. مانند:
<!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>
نتایج خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:
برای افزودن یک ستون دیگر، سعی کنید یک عنصر داده جدول اضافی <td> را در داخل هر یک از عناصر ردیف <tr> اضافه کنید. مانند:
<!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
همانطور که در نمونه کدهای بالا مشاهده کردید . تگ <th>برای افزودن عنوان به ستون های جداول استفاده می شود. در طرح‌های پایه، عنوان جداول همیشه ردیف بالا را می‌گیرد، به این معنی که ما <th> را در ردیف اول جداول خود، داده‌های اعلام شده و سپس داده‌های واقعی در جدول را خواهیم داشت. به طور پیش فرض متن ارسال شده در عنوان در مرکز و Bold است.
یک مثال با استفاده از<th> :
<!DOCTYPE html>
<html>
<body>
<h1>متاوبز</h1>
<table>
<tr>
<th>نام</th>
<th>نام خانوادگی</th>
<th>آدرس ایمیل</th>
</tr>
<tr>
<td>هستی</td>
<td>بابایی</td>
<td>tables@mail.com</td>
</tr>
<tr>
<td>علی</td>
<td>پورهاشمی</td>
<td>developer@mail.com</td>
</tr>
</body>
</html>
نتایج خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:
از مثال بالا، می توانیم بگوییم چه ستونی حاوی چه اطلاعاتی است. این امر با استفاده از <th>تگ امکان پذیر می شود.
قبل از پرداختن به ادامه مبحث یک استایل به جدولمان بدهیم تا بتوانیم تغییرات را واضح تر مشاهده کنیم. با قرار دادن کمی کد css در تگ style میتوانیم ظاهر جدولمان را بهبود دهیم. به عنوان مثال:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding:10px;
}
</style>
نتایج خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:
نحوه اضافه کردن عنوان در جداول
استفاده اصلی از افزودن تیتر به جدول، ارائه توضیحاتی در مورد داده های ارائه شده در جدول است. عنوان می تواند در بالای جدول یا پایین قرار گیرد و به طور پیش فرض همیشه در مرکز قرار می گیرد.
برای درج عنوان در جدول، از <caption>برچسب استفاده کنید.
<!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>tables@mail.com</td>
</tr>
<tr>
<td>علی</td>
<td>پورهاشمی</td>
<td>developer@mail.com</td>
</tr>
</body>
</html>
نتایج خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:
شاید شما با سلول هایی برخورد کرده باشید که در دو یا چند ستون یا ردیف در جدول کشیده شده اند. به این می گویند پوشش سلولی.
اگر در برنامه‌هایی مانند MS office یا Excel کار می‌کردید، احتمالاً با برجسته کردن سلول‌ها و کلیک کردن روی دستور و voilà از این تابع استفاده کرده‌اید!
همین ویژگی‌ها را می‌توان در جداول HTML با استفاده از دو ویژگی سلول، 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>
<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>
نتایج خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:
در مثال بالا، سلولی داریم که شامل 2 سلول در سطرها و 3 سلول در ستون همانطور که نشان داده شده است. ما موفق شده ایم که دهانه را هم به صورت عمودی و هم به صورت افقی اعمال کنیم.
نکته : هنگام استفاده از ویژگی ها colspan و rowspan ، مطمئن شوید که مقادیر اختصاص داده شده را به درستی اعلام کنید تا از همپوشانی سلول ها جلوگیری شود.
نحوه اضافه کردن سربرگ، بدنه و پاورقی در جداول
درست مانند اینکه چگونه یک وب سایت یا هر سند دیگری دارای سه بخش اصلی ( سرصفحه ، بدنه و پاورقی) است .جداول نیز همینطور هستند.
در یک جدول آنها با استفاده از ویژگی هایی تقسیم می شوند:
- <thead> : یک هدر جداگانه برای جدول فراهم می کند.
- <tbody> : شامل محتوای اصلی جدول است.
- <tfoot> : یک فوتر جداگانه برای جدول ایجاد می کند.
یک مثال با استفاده از <thead>،<tbody>و<tfoot> :
<!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 بیشتر بخوانید و حرفه ای شوید:
- ایجاد اولین سند html و آشنایی با ساختار صفحات آن
- آموزش تگ های تیتر یا heading – تاثیر تگ هدینگ html در سئو سایت
- آموزش تگ p یا پاراگراف در html و کاربردهای آن
- آموزش تگ تاکیدی strong و em در HTML
- آموزش تگ های br و hr در HTML و نکات آن ها
- تمام نکات در مورد کامنت گذاری درHTML
- نحوه استفاده از تصویر با تگ img در HTML
- چگونه لینک یا پیوند یا hyperlink در HTML قرار دهیم؟
اگر سوالی یا نظری دارید خوش حال میشیم تا با ما در میان بگذارید. در تلگرام با ما در ارتباط باشید.
