🎁 تخفیف استثنائی تمامی پکیج های آموزشی 🎁

آموزش جدول در HTML

در این مقاله به آموزش ایجاد جدول و کار با آن در HTML می پردازیم.

آموزش جدول در HTML

جدول های HTML توسعه دهندگان وب را قادر می سازد تا اطلاعات را در سطر ها و ستون ها دسته بندی کنند.

 آموزش طراحی سایت

تعریف یک جدول HTML

تگ table یک جدول را تعریف می کند. هر سطر جدول با تگ tr تعریف می شود. هر عنوان جدول با تگ th تعریف می شود. هر داده در جدول با تگ td تعریف می شود. بصورت پیش فرض در متن عنصرهای th در وسط و به بصورت برجسته قرار دارند. بصورت پیش فرض در متن عنصرهای td اندازه شان معمولی بوده و چپ چین می باشند.

آموزش جدول در HTML

تعریف table در این مثال نشان داده شده است. مشاهده می کنید که در هر tr تعدادی td وجود دارد که در آن اطلاعات جدول را قرار می دهیم. در مثال بالا، از width برای بزرگ کردن اندازه جدول استفاده شده است. نتیجه کد بالا به شکل زیر است:

 آموزش Table در html

جدول در HTML – اضافه کردن خطوط

برای اضافه کردن یک خط به جدول، باید از مشخصه border استفاده کنید:

آموزش طراحی سایت

در این مثال بین تمام td و tr ها، border قرار داده شده است تا اطلاعات بهتر نمایش داده شوند. نتیجه کد بالا به شکل زیر است:

آموزش HTML

جدول HTML – Collapsed Borders

با استفاده از قابلیت Collapsed Borders می توانید خطوط جدول که دو خطی هستند را به یک خط تبدیل کنید.

آموزش جدول در HTML

Collapsed Borders این اجازه را به ما می دهد تا خط هایی که در کنار یکدیگر هستند، به یک خط تبدیل کنیم که در بخش زیر قابل مشاهده است:

آموزش HTML

جدول HTML - Cell Padding

Cell Padding فاصله بین داده و خط های کنارش را تعیین می کند. اگر این فاصله گذاری را تعیین نکنید، اطلاعات درون جدول بدون فاصله از لبه های جدول نمایش داده خواهند شد. برای تنظیم کردن padding، از مشخصه ی padding استفاده کنید:

 جدول در HTML

آموزش Table در html

جدول HTML – عناوین چپ چین

بصورت پیش فرض، عناوین جدول ها وسط چین و برجسته هستند. برای چپ چین کردن آن ها باید از مشخصه ی text-align استفاده کنید:

آموزش جدول در HTML

در این مثال به همه th و td ها  padding: 5px  داده شده تا اطلاعات موجود در جدول، از لبه جدول، 5 px فاصله داشته باشند. همچنین به همه th ها text-align: left  داده شده تا اطلاعات درون th ها در سمت چپ نمایش داده شوند. در بخش زیر خروجی کار مشخص است:

آموزش HTML

جدول HTML – اضافه کردن Border Spacing

Border Spacing فاصله بین بخش های جدول را تعیین می کند. برای این کار، از مشخصه border-spacing استفاده کنید:

آموزش طراحی سایت

در این مثال، در حقیقت با استفاده از border-spacing، فاصله بین th ها را به 15px افزایش دادیم. این کار برای نمایش بهتر و واضح تر اطلاعات موجود در جدول انجام شده است. نتیجه کد بالا به شکل زیر است:

جدول در HTML

جدول HTML – بخشی که چند ستون را در بر می گیرد

برای اینکه کاری کنید که یک بخش چند ستون را در بر بگیرد، از ویژگی colspan استفاده کنید:

آموزش Table در html

در این مثال، با استفاده از ویژگی colspan، کاری کردیم تا یک th بتواند به صورت افقی 2 برابر فضا بگیرد. عدد درون colspan به صورت دلخواه قابل تنظیم است که نتیجه آن به شکل زیر است:

 آموزش HTML

جدول HTML – بخشی که چند سطر را در بر می گیرد

برای اینکه کاری کنید که یک بخش چند سطر را در بر بگیرد، از ویژگی rowspan استفاده کنید:

آموزش جدول در HTML

در این مثال نیز، با استفاده از ویژگی colspan، کاری کردیم تا یک th بتواند به صورت عمودی 2 برابر فضا بگیرد. عدد درون rowspan به صورت دلخواه قابل تنظیم است که نتیجه آن به شکل زیر است:

آموزش طراحی سایت

جدول HTML – اضافه کردن کپشن

برای اضافه کردن کپشن، از تگ caption استفاده کنید:

آموزش Table در html

از caption برای ارائه توضیحات بیشتر درون table استفاده می شود. در این مثال نیز از caption استفاده شده که نتیجه آن در زیر قابل مشاهده است:

آموزش جدول در HTML

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

برای تعریف کردن یک استایل به خصوص برای یک جدول، یک ویژگی id به جدول اضافه کنید، سپس از طریق style به آن id ، استایل های اختصاصی را اضافه می کنیم:

آموزش HTML

در این مثال به جدول "id="t01 داده شده و در بخش استایل به آن عرض 100% و رنگ پس زمینه f1f1c1 # داده شده است. نتیجه این مثال را در زیر مشاهده می کنید:

آموزش طراحی سایت

آموزش طراحی سایت آموزش HTML آموزش جدول در HTML آموزش Tables در HTML جدول های HTML