آموزش ساخت جدول در HTML
جدول‌ها از عناصر اساسی در طراحی صفحات وب هستند که برای نمایش داده‌های ساختاریافته به صورت سطر و ستون استفاده می‌شوند. در این آموزش، به بررسی کامل تگ‌های مربوط به ساخت جدول در HTML می‌پردازیم.
ساختار پایه جدول
یک جدول ساده در HTML با تگ <table> شروع می‌شود و شامل تگ‌های زیر است:
- <tr>: تعریف سطر جدول
- <th>: تعریف سلول عنوان (سرستون)
- <td>: تعریف سلول معمولی
| عنوان ستون ۱ |
عنوان ستون ۲ |
| داده ۱-۱ |
داده ۱-۲ |
| داده ۲-۱ |
داده ۲-۲ |
ویژگی‌های پیشرفته جدول
برای بهبود ظاهر و عملکرد جدول‌ها می‌توان از ویژگی‌های زیر استفاده کرد:
- colspan: ادغام افقی سلول‌ها
- rowspan: ادغام عمودی سلول‌ها
- border: تعیین ضخامت حاشیه
- cellpadding: فاصله محتوا از حاشیه سلول
نکته مهم: برای یادگیری عمیق‌تر می‌توانید اینجا را تماشا کنید تا با جزئیات بیشتری آشنا شوید.
مثال عملی با ادغام سلول‌ها
در این مثال یک جدول با سلول‌های ادغام شده ایجاد می‌کنیم:
| جدول ادغام شده |
| سلول عمودی ادغام شده |
سلول معمولی |
| سلول دیگر |
استایل‌دهی به جدول
با استفاده از CSS می‌توانید ظاهر جدول‌ها را به صورت حرفه‌ای تغییر دهید. برخی تکنیک‌های رایج:
- رنگ‌آمیزی سطرهای زوج و فرد متفاوت
- اضافه کردن hover effect به سطرها
- تنظیم عرض ثابت برای ستون‌ها
- ایجاد حاشیه‌های گرد برای جدول
جدول‌ها ابزار قدرتمندی در HTML هستند که با یادگیری صحیح می‌توانند داده‌های شما را به شکلی سازمان‌یافته و زیبا نمایش دهند. برای اطلاعات بیشتر حتماً از آموزش جامع جدول‌ها دیدن کنید.
