آموزش HTML – فصل دوازدهم: جداول در HTML

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

آموزش HTML – فصل دوازدهم: جداول در HTML

تعریف کردن یک جدول اچ تی ام ال

یک جدول اچ تی ام ال به وسیله تگ <table> تعریف میشود.

هر ردیف جدول به وسیله تگ <tr> تعریف میشود.

یک سربرگ header جدول به وسیله تگ <th> تعریف میشود.

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

یک داده جدول یا سلول جدول به وسیله تگ <td> تعریف میشود.

مثال استفاده از یک جدول:

نام نام خانوادگی سن
مهدی نظری 25
حامد ارسلانپور 23

نکته : المان های <td> محتوی داده های جدول هستند. آنها میتوانند هرگونه المان های اچ تی ام ال را در خود جای دهند مثل متن، تصویر، لیست، جدول های دیگر و غیره

اضافه کردن یک حاشیه در جدول اچ تی ام ال

اگر شما یک حاشیه برای جدول مشخص نکنید آن جدول بدون حاشیه نمایش داده میشود.

یک حاشیه با مولفه border سی اس اس تنظیم میشود.

مثال:


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

جدول های اچ تی ام ال با حاشیه تک خطی

اگر میخواهید همه حاشیه های دو خطی جدولتان به یک حاشیه تبدل کنید. مولفه border-collapse سی اس اس را اضافه کنید.

مثال:


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

Padding در سلول فاصله بین محتوای سلول و حاشه اش را مشخص میکند.

اگر شما Padding را برای سلول ها تعریف نکنید سلول های جدول بدون Padding نمایش داده میشوند.

برای تنظیم لایه گذاری (Padding) از مولفه padding سی اس اس استفاده کنید.

مثال:


تغییر جهت نوشتن متن در سربرگ های جدول HTML

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

برای ردیف کردن و قراردادن سربرگ های جدول در چپ یا راست از مولفه text-align در سی اس اس استفاده کنید.

مثال:


تنظیم فاصله از حاشیه ها در جدول HTML

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

برای تنظیم فاصله گذاری حاشیه برای یک جدول از مولفه border-spacing در سی اس اس استفاده کنید.

مثال:


نکته: اگر جدول حاشیه های collapsed یا فروریخته دارد فاصله گذاری حاشیه یا border-spacing تاثیری نخواهد داشت.

تغییر میزان پوشش افقی هر سلول در جدول HTML

برای اینکه یک سلول بیشتر از یک ستون را پوشش دهد از خاصیت colspan استفاده کنید.

مثال:


تغییر میزان پوشش عمودی هر سلول در جدول HTML

برای اینکه یک سلول بیشتر از یک ردیف را پوشش دهد از خاصیت rowspan استفاده کنید.

مثال:


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

برای اضافه کردن یک عنوان به یک جدول از تگ <caption> استفاده کنید.

مثال:


نکته: تگ <caption> باید سریعا بعد از تگ <table> وارد شود.

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

برای تعریف یک استایل خاص برای یک جدول مخصوص، یک خاصیت id را به جدول اضافه کنید.

مثال:


در ادامه آموزش گام به گام زبان HTML، مطلب آموزش HTML – فصل سیزدهم: بلاک ها در HTML را مطالعه کنید.

ویدیوها و مطالب مشابه