دوره مقدماتی آموزش HTML و CSS | قسمت پنجم – تگ های مرتبط با جداول HTML
- موضوع : HTML
- تاریخ : 1399/09/25
- مجموع پسند شده : 0
- بازدید : 985
در این جلسه به بررسی تگهای مربوط به جداول HTML خواهیم پرداخت.
جداول در صفحات وب بسیار کاربردی و پر استفاده هستند و معمولا برای نشان دادن نتایج یا امتیاز ها و یا جداول پخش استفاده می شوند.
مانند نتایج ورزشی یا نتایج افراد مبتلا به کرونا و مثال های فراوان دیگر که مطمئنا نمونه های مختلفی از آنها را در صفحات وب مشاهده کرده اید.
یک جدول ، اطلاعات را در یک فرمت شبکه ای یا شبکه مانند نشان می دهد و هر بخش از شبکه را اصطلاحا یک cell (سلول) می نامند.
خب بریم سراغ تگ های مهم جداول HTML که باهاشون خیلی کار داریم.
تگ های مهم در جداول HTML
در این قسمت ما با همه تگ های مهم جداول HTML آشنا خواهیم شد و خاصیت های این تگ ها را با هم بررسی خواهیم نمود.
پس با ما همراه باشید.
تگ table در جداول وب
برای ساخت یک جدول باید ابتدا و انتهای آنرا با تگtable مشخص کنیم.
یعنی به عبارت دیگر ستونها و سطرها باید درون تگ table نوشته شوند.
تگ table یک جمع کننده یا به اصطلاح wrapper میباشد.
تگ thead
ما با استفاده از این تگ هدر جدول خود را مشخص می کنیم. این تگ در حالت عادی تفاوتی ایجاد نمی کند اما برای ربات ها می تواند مفید باشد.
تگ tbody
ما بایستی محتوای جدول خود را داخل تگ tbody قرار دهیم. در واقع تگ tbody در برگیرنده محتوای اصلی جدول ما می باشد.
تگ tfoot
این تگ جهت قرار دادن اطلاعات در پاورقی جدول استفاده می شود.
به طور مثال شما وقتی یک جدول مخارج طراحی می کنید در پایین جدول حتما لازم خواهد بود که جمع کل را نمایش دهید ، برای این کار بهتر است از این تگ استفاده نمایید.
نکته : در صورتی که از تگ های thead و tfoot استفاده کنید ؛ در پرینت از جداول بزرگ که چند صفحه می شوند ، محتوای این تگ ها در تمامی صفحات چاپ خواهند شد.
توجه : شما می توانید بدون استفاده از این تگ ها هم جداول خودتون رو ایجاد کنید اما روش اصولی استفاده از این تگ ها می باشد. البته لازم به ذکر است که شاید شما مثلا به تگ thead یا tfoot یا اصلا هر دو احتیاجی نداشته باشید که در این صورت نباید این تگ ها را در جداول خود استفاده کنید.
تگ tr در جداول وب
یکی از تگ های مهم و اساسی جداول HTML همین تگ tr می باشد.
شما برای ایجاد یک سطر در جدول بایستی از تگ tr استفاده کنید.
شکل کلی چیدمان تگ ها در جداول HTML به صورت زیر می باشد :
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ |
<table> <thead> <tr></tr> </thead> <tbody> <tr></tr> </tbody> <tfoot> <tr></tr> </tfoot> </table> |
خب حالا ما سطرهای خود را ایجاد کردیم پس زمان آن است که ستون های خود را وارد سطرهای مورد نظر کرده و به جدول خود سر و شکل بدهیم.
تگ td در جداول وب
هر سلول از جداول HTML با تگ td نماش داده میشود.
توجه کنید از تگ td در داخل تگ tr که داخل تگ tbody تعریف شده استفاده می کنیم.
توجه : برخی از مرورگرها به طور پیشفرض دور هر سلول جدول یک خط حاشیه ای ایجاد می کنن که سلول هارا از هم جدا می کند که در جلسات بعدی بیشتر درباره کنترل کردن خط های دور سلول (border) صحبت خواهیم کرد.
ساختار کلی ایجاد یک جدول ساده در HTML به صورت زیر است :
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ |
<table> <tbody> <tr> <td>ستون اول </td> <td>ستون دوم </td> <td>ستون سوم </td> </tr> </tbody> </table> |
تگ th در جداول وب
این تگ نیز مانند تگ td استفاده میشود ولی با این تفاوت که هدف استفاده از این تگ نشان دادن تیتر هر ستون یا سطر می باشد.
تگ th بهتر است در داخل تگ tr که داخل تگ thead تعریف شده است مورد استفاده قرار گیرد.
همچنین وقتی یک سلول هیچ محتوایی ندارد شما می توانید از این تگ برای نمایش یک سلول خالی استفاده کنید.
توجه : استفاده از این تگ برای تیترهای جداول موجب مرور سریع جداول , بهتر شدن سئو سایت و همچنین کنترل بهتر جدول با دستوراتcss میشود.
نکته : میتوانید با استفاده از ویژگی scope مشخص کنید که تیتر بین این تگ برای سطر ها می باشد یا ستون ها.
نکته : مرورگرها اکثرا محتوای درون این تگ را به صورت bold نشان میدهند.
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ |
<table> <thead> <tr> <th></th> <th scope="col">Saturday</th> <th scope="col">Sunday</th> </tr> </thead> <tbody> <tr> <th scope="row">Tickets sold:</th> <td>۱۲۰</td> <td>۱۳۵</td> </tr> <tr> <th scope="row">Total sales:</th> <td>$۶۰۰</td> <td>$۶۷۵</td> </tr> </tbody> </table> |
خروجی کد بالا به شکل زیر می باشد :
تغییر اندازه ستون ها و سطرها در جداول HTML
در برخی موارد لازم است شما اندازه ستونها یا سطرها را با توجه به محتوای درون انها تغییر دهید.
برای این کار می توانیم از ویژگی colspan استفاده کنیم.
با این خاصیت می توانید اندازه ستونهای موجود در جدول را تغییر دهید.
توجه : جهت تغییر ستون ها به اندازه های دلخواه می توانید از دستورات CSS نیز استفاده کنید.
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ |
<table> <thead> <tr> <th></th> <th>۹am</th> <th>۱۰am</th> <th>۱۱am</th> <th>۱۲am</th> </tr> </thead> <tbody> <tr> <th>Monday</th> <td colspan="۲">Geography</td> <td>Math</td> <td>Art</td> </tr> <tr> <th>Tuesday</th> <td colspan="۳">Gym</td> <td>Home Ec</td> </tr> </tbody> </table> |
خروجی کد بالا به شکل زیر خواهد بود :
توجه : ما در شکل با استفاده از css استایل جدول را متفاوت کرده ایم تا شما کاربر گرامی به صورت کامل عملکرد کدها را متوجه شوید.
شما می توانید به راحتی همین کار را برای سطرها نیز انجام دهید ولی به جای ویژگی colspan از ویژگی rowspan برای تگ های tr استفاده کنید.
جهت بررسی بیشتر تگ های جداول HTML به لینک زیر مراجعه نمایید :
قسمت پنجم دوره مون هم با عنوان جداول HTML به پایان رسید.
کماکان از شما کاربران گرامی استدعا داریم نظرات و پیشنهادات خودتون رو در مورد این مطلب و کل سایت را از طریق فرم دیدگاه برای ما ارسال نمایید.
آیا این مقاله برای شما مفید بود ؟
نظر شما کاربر محترم در مورد این مقاله برای ما بسیار اهمیت دارد و ما را در ارائه مقالات مفید دیگر کمک خواهد کرد.
توصیه ما به شما
عضویت در خبرنامه
جهت دریافت جدیدترین مطالب در ایمیل خود ، در خبرنامه وب استند عضو شوید.
خیالتان راحت هیچگونه ایمیل تبلیغاتی ارسال نخواهد شد!