کاربرد تگ colgroup در جداول HTML
تگ colgroup یکی از عناصر کمتر شناخته‌شده اما قدرتمند در HTML است که برای گروه‌بندی ستون‌های جدول و اعمال استایل‌های یکسان به آنها استفاده می‌شود. این تگ به توسعه‌دهندگان اجازه می‌دهد بدون تکرار کد، خصوصیات ظاهری یکسان را به چندین ستون اعمال کنند.
ساختار پایه تگ colgroup
تگ colgroup باید مستقیماً پس از تگ table و قبل از هر تگ thead، tbody یا tr قرار گیرد. ساختار کلی آن به صورت زیر است:
| عنوان ستون ۱ |
عنوان ستون ۲ |
| داده‌ی نمونه ۱ |
داده‌ی نمونه ۲ |
توجه: تگ colgroup یک تگ خالی است و محتوایی ندارد، اما می‌تواند شامل یک یا چند تگ col باشد که هر کدام نماینده یک یا چند ستون در جدول هستند.
مزایای استفاده از colgroup
- کاهش حجم کد: اعمال استایل به چندین ستون با یک دستور
- خوانایی بهتر: سازماندهی منطقی ستون‌های مرتبط
- انعطاف‌پذیری: امکان تغییر سریع استایل گروهی ستون‌ها
- سازگاری: پشتیبانی توسط تمام مرورگرهای مدرن
نمونه‌های کاربردی
در این مثال، از colgroup برای ایجاد دو گروه ستون با عرض‌های متفاوت استفاده شده است:
| نام محصول |
قیمت |
توضیحات |
| لپ‌تاپ |
15,000,000 تومان |
مدل 2023 با پردازنده Core i7 |
برای یادگیری تکنیک‌های پیشرفته‌تر می‌توانید بیشتر بخوانید.
نکات فنی مهم
- ویژگی span در colgroup مشخص می‌کند که چند ستون را شامل می‌شود
- می‌توان از تگ col داخل colgroup برای کنترل دقیق‌تر استفاده کرد
- استایل‌های اعمال شده به colgroup بر استایل‌های سلول‌ها ارجحیت دارند
- برای جداول پیچیده، ترکیب colgroup و کلاس‌های CSS توصیه می‌شود
استفاده صحیح از colgroup می‌تواند به شدت کیفیت کدهای HTML شما را بهبود بخشد و زمان توسعه را کاهش دهد. این تگ به ویژه در پروژه‌های بزرگ با جداول پیچیده بسیار کارآمد است.
