برای نمایش اطلاعاتی مانند قیمت کالاها، برنامه کلاس‌ها یا گزارش فروش، جدول در HTML کمک می‌کند داده‌های مرتبط را در سطرها و ستون‌های مشخص کنار هم قرار دهیم. اما ساخت یک جدول صحیح فقط به چیدن اطلاعات در چند سلول محدود نمی‌شود؛ باید بتوانیم عنوان هر ستون را مشخص کنیم، بخش‌های مختلف جدول را به‌درستی سازمان‌دهی کنیم و در صورت نیاز، سلول‌ها را بدون به‌هم‌ریختن ساختار ادغام کنیم.
در این آموزش، ساخت جدول در HTML را از یک مثال ساده شروع می‌کنیم و به‌تدریج سراغ عناصر ساختاری، ویژگی‌های colspan و rowspan و تنظیم ظاهر جدول با CSS می‌رویم. در پایان نیز با ساخت یک جدول گزارش فروش و بررسی خطاهای رایج، یاد می‌گیرید چگونه یک جدول داده‌ای کامل بسازید و درستی ساختار آن را بررسی کنید.
جدول در HTML چیست و چه کاربردی دارد؟
جدول در HTML ساختاری برای نمایش اطلاعات مرتبط در قالب سطرها و ستون‌هاست. زمانی که چند مورد دارای ویژگی‌های مشترک باشند، جدول کمک می‌کند اطلاعات آن‌ها را منظم نمایش دهیم و مقایسه کنیم. برای مثال، می‌توان نام کالاها، تعداد موجودی و قیمت هرکدام را در یک جدول قرار داد تا مشخصات هر کالا به‌راحتی قابل مشاهده باشد.
در یک جدول، هر سطر معمولاً اطلاعات مربوط به یک مورد را در بر می‌گیرد و هر ستون یک ویژگی مشخص را نشان می‌دهد. محل برخورد سطر و ستون نیز یک سلول (Cell) است که داده مربوط به آن موقعیت را در خود نگه می‌دارد. HTML برای تعریف این ساختار از عنصر table و مجموعه‌ای از عناصر مرتبط استفاده می‌کند که در ادامه مقاله با آن‌ها آشنا می‌شویم.
چه زمانی باید از جدول استفاده کنیم؟
هر زمان اطلاعات شما رابطه مشخصی بین سطرها و ستون‌ها داشته باشند، استفاده از جدول HTML انتخاب مناسبی است. برای نمونه، جدول برنامه هفتگی کلاس‌ها، فهرست قیمت محصولات یا گزارش فروش ماهانه، اطلاعاتی دارند که نمایش سطری و ستونی آن‌ها به درک و مقایسه داده‌ها کمک می‌کند.
برای روشن‌تر شدن موضوع، جدول فرضی زیر را در نظر بگیرید:
| کالا | موجودی | قیمت (تومان) |
|---|---|---|
| دفتر | ۸ | ۵۰٬۰۰۰ |
| خودکار | ۱۲ | ۱۵٬۰۰۰ |
در این مثال، هر سطر به یک کالا اختصاص دارد و ستون‌ها ویژگی‌های مشترک کالاها را مشخص می‌کنند. به همین دلیل، می‌توان به‌سرعت متوجه شد که موجودی خودکار بیشتر از دفتر است.
اما جدول نباید برای طراحی چیدمان کلی صفحه وب استفاده شود. برای مثال، قرار دادن سربرگ، منوی کناری و محتوای اصلی سایت در سطرها و ستون‌های یک جدول، کاربرد درستی از ساختار جدول HTML نیست. این روش علاوه بر پیچیده‌کردن ساختار صفحه، می‌تواند استفاده از آن را برای کاربران ابزارهای کمکی مانند صفحه‌خوان‌ها دشوار کند. برای چیدمان بخش‌های صفحه، معمولاً CSS و ابزارهایی مانند Flexbox یا Grid مناسب‌تر هستند.
پس معیار انتخاب ساده است: اگر هدف، نمایش و مقایسه داده‌های مرتبط است، از جدول HTML استفاده کنید؛ اما اگر فقط می‌خواهید عناصر صفحه را کنار یکدیگر بچینید، سراغ ابزارهای چیدمان CSS بروید.
چگونه اولین جدول را در HTML بسازیم؟
برای ساخت جدول در HTML، ابتدا از تگ table استفاده می‌کنیم و سپس سطرها و سلول‌های موردنیاز را داخل آن قرار می‌دهیم. هر سطر با تگ tr تعریف می‌شود و می‌تواند شامل سلول‌های عنوان (th) یا سلول‌های داده (td) باشد. با کنار هم قرار گرفتن این عناصر، مرورگر اطلاعات را در قالب یک جدول سطری و ستونی نمایش می‌دهد.
تگ‌های اصلی ساخت جدول چه نقشی دارند؟
برای ساخت یک جدول ساده، کافی است با چهار تگ اصلی آشنا باشید:
- تگ table: محدوده جدول را مشخص می‌کند و سایر عناصر مربوط به جدول را در خود جای می‌دهد.
- تگ tr: یک سطر (Table Row) ایجاد می‌کند. سلول‌های هر سطر درون این تگ قرار می‌گیرند.
- تگ th: یک سلول عنوان (Table Header) تعریف می‌کند و برای مشخص‌کردن عنوان سطر یا ستون به کار می‌رود.
- تگ td: یک سلول داده (Table Data) ایجاد می‌کند و محتوای اصلی جدول، مانند نام کالا یا قیمت، درون آن قرار می‌گیرد.
نکته مهم این است که th و td باید درون یک سطر (tr) قرار بگیرند؛ یعنی برای افزودن یک داده جدید به جدول، ابتدا باید مشخص کنیم این داده به کدام سطر تعلق دارد.
مثال ساخت یک جدول ساده با HTML
فرض کنید می‌خواهیم همان جدول کالاهای بخش قبل را با HTML بسازیم. جدول ما سه ستون برای نام کالا، موجودی و قیمت دارد و اطلاعات دو کالا را نمایش می‌دهد.
کد HTML آن به شکل زیر است:
<table>
<tr>
<th>کالا</th>
<th>موجودی</th>
<th>قیمت (تومان)</th>
</tr>
<tr>
<td>دفتر</td>
<td>8</td>
<td>50,000</td>
</tr>
<tr>
<td>خودکار</td>
<td>12</td>
<td>15,000</td>
</tr>
</table>
اگر هنوز فایل تمرینی HTML نساخته‌اید، ابتدا راهنمای «ساخت اولین فایل HTML» را دنبال کنید؛ سپس به مثال جدول برگردید.
اگر هنوز با ساختار اولیه سند HTML آشنایی ندارید، پیش از اجرای مثال می‌توانید راهنمای HTML چیست؟ را مرور کنید. سپس این کد را داخل بخش body فایل HTML خود قرار دهید، فایل را ذخیره کنید و آن را در مرورگر باز کنید. نتیجه از نظر ساختار داده‌ها، جدولی با سه ردیف و سه ستون خواهد بود:
| کالا | موجودی | قیمت (تومان) |
|---|---|---|
| دفتر | 8 | 50,000 |
| خودکار | 12 | 15,000 |
در این ساختار، اولین tr شامل سه سلول th است که عنوان ستون‌ها را مشخص می‌کنند. دو سطر بعدی نیز هرکدام سه سلول td دارند و اطلاعات یک کالا را نمایش می‌دهند.
برای بررسی ساختار جدول، کافی است تعداد سطرها و سلول‌ها را در کد بشمارید. در این مثال، هر سه سطر دارای سه سلول هستند و داده‌ها در ستون‌های متناظر قرار می‌گیرند.
ساختار کامل جدول با caption، thead، tbody و tfoot
در بخش قبل، یک جدول ساده با استفاده از table، tr، th و td ساختیم. این ساختار برای نمایش داده‌ها کافی است؛ اما وقتی بخواهیم عنوان مشخصی برای جدول داشته باشیم یا سطرهای آن را به بخش‌های مختلف تقسیم کنیم، می‌توانیم از عناصر caption، thead، tbody و tfoot کمک بگیریم.
این عناصر نقش یکسانی ندارند. caption عنوان کل جدول را مشخص می‌کند، درحالی‌که سه عنصر دیگر برای گروه‌بندی سطرهای جدول استفاده می‌شوند.
عنوان جدول با caption
تگ caption برای مشخص‌کردن عنوان یا موضوع جدول به کار می‌رود. برای مثال، اگر جدولی اطلاعات موجودی کالاهای یک فروشگاه را نمایش می‌دهد، عنوان «وضعیت موجودی و قیمت کالاها» به خواننده کمک می‌کند پیش از بررسی سطرها بداند با چه اطلاعاتی روبه‌روست.
این تگ باید اولین عنصر فرزند table باشد:
<table>
<caption>وضعیت موجودی و قیمت کالاها</caption>
</table>
عنوانی که با caption تعریف می‌شود، به‌صورت پیش‌فرض معمولاً بالای جدول نمایش داده می‌شود. این عنوان علاوه بر کمک به خوانندگان عادی، در شناسایی موضوع جدول برای کاربران صفحه‌خوان نیز کاربرد دارد.
دقت کنید که caption با th تفاوت دارد: اولی موضوع کل جدول را معرفی می‌کند، اما دومی عنوان یک سطر یا ستون را مشخص می‌کند.
برای آشنایی بیشتر با ویژگی‌ها و کاربردهای این عنصر، می‌توانید مقاله تگ caption در HTML را مطالعه کنید.
تفکیک سرجدول، بدنه و بخش پایانی
برای گروه‌بندی سطرهای یک جدول، HTML سه عنصر در اختیار ما قرار می‌دهد:
- تگ thead: سطر یا سطرهایی را در بر می‌گیرد که بخش سرجدول را تشکیل می‌دهند؛ معمولاً عنوان ستون‌ها در این بخش قرار دارند.
- تگ tbody: سطرهای مربوط به داده‌های اصلی جدول را گروه‌بندی می‌کند.
- تگ tfoot: بخش پایانی جدول را مشخص می‌کند و معمولاً برای اطلاعات جمع‌بندی، مانند مجموع مقادیر یک ستون، استفاده می‌شود.
برای مشاهده کاربرد این عناصر، جدول کالاهای مثال قبل را تکمیل می‌کنیم:
<table>
<caption>وضعیت موجودی و قیمت کالاها</caption>
<thead>
<tr>
<th>کالا</th>
<th>موجودی</th>
<th>قیمت هر واحد (تومان)</th>
</tr>
</thead>
<tbody>
<tr>
<td>دفتر</td>
<td>8</td>
<td>50,000</td>
</tr>
<tr>
<td>خودکار</td>
<td>12</td>
<td>15,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>جمع موجودی</th>
<td>20</td>
<td>—</td>
</tr>
</tfoot>
</table>
در این مثال، caption موضوع جدول را معرفی می‌کند. بخش thead شامل عنوان سه ستون است و tbody اطلاعات دو کالا را نگه می‌دارد. در انتها نیز tfoot مجموع موجودی کالاها را نشان می‌دهد که برابر با ۲۰ عدد است. خانه آخر با خط تیره مشخص شده، چون جمع‌زدن قیمت واحد دو کالای متفاوت، معیار مناسبی برای جمع‌بندی این جدول نیست.
ترتیب این بخش‌ها اهمیت دارد. در ساختار استاندارد HTML، ابتدا caption قرار می‌گیرد، سپس در صورت نیاز colgroup، بعد thead، گروه‌های tbody و در پایان tfoot.
البته استفاده از تمام این عناصر در هر جدول اجباری نیست. برای مثال، اگر سطرهای tr را مستقیماً داخل table بنویسید، هنگام پردازش کد HTML، مرورگر برای آن‌ها یک tbody ضمنی در DOM ایجاد می‌کند. بااین‌حال، تعریف صریح tbody باعث می‌شود ساختار کد برای خواندن و اعمال CSS واضح‌تر باشد.
همچنین این گروه‌بندی به‌تنهایی جایگزین تعریف درست سلول‌های عنوان و ارتباط آن‌ها با داده‌ها نمی‌شود؛ موضوعی که در بخش بعد بررسی می‌کنیم.
جایگاه اختیاری col و colgroup در ساختار جدول
دو عنصر دیگر به نام‌های colgroup و col نیز در ساختار جدول HTML وجود دارند، اما برخلاف thead و tbody، برای گروه‌بندی سطرها استفاده نمی‌شوند.
عنصر colgroup یک گروه از ستون‌های جدول را مشخص می‌کند و عنصر col می‌تواند نماینده یک یا چند ستون در آن گروه باشد. این عناصر در برخی تنظیمات ساختاری و ظاهری ستون‌ها، مانند اعمال ویژگی‌های CSS پشتیبانی‌شده، کاربرد دارند.
اگر به آن‌ها نیاز داشته باشید، محل قرارگیری colgroup بعد از caption و پیش از thead است. بااین‌حال، برای ساخت جدول ساده‌ای که تاکنون نوشته‌ایم، نیازی به افزودنشان نداریم؛ زیرا تعریف سطرها و سلول‌ها به‌تنهایی ساختار داده‌ها را ایجاد می‌کند.
جزئیات بیشتر این عناصر را می‌توانید در مقاله‌های تگ colgroup در HTML و تگ col در HTML بخوانید.
تفاوت th و td چیست و چگونه عنوان سطرها و ستون‌ها را مشخص کنیم؟
در جدول‌های HTML، تفاوت th و td فقط به ظاهر سلول‌ها محدود نمی‌شود. تگ td برای نگهداری داده‌های جدول به کار می‌رود، اما تگ th مشخص می‌کند که یک سلول، عنوان یا سرستون سایر سلول‌های مرتبط است.
برای مثال، در جدول موجودی کالاها، عبارت «موجودی» عنوان یک ستون است؛ درحالی‌که عدد «۸» داده مربوط به یکی از سلول‌های همان ستون محسوب می‌شود. بنابراین برای «موجودی» از th و برای عدد «۸» از td استفاده می‌کنیم.
نکته مهم این است که تگ th فقط مخصوص اولین سطر جدول نیست. اگر در ستون اول، نام هر کالا نقش عنوان سطر مربوط به آن را داشته باشد، می‌توان آن نام را نیز با th مشخص کرد.
مرورگرها معمولاً محتوای th را به‌صورت پررنگ و وسط‌چین نمایش می‌دهند؛ اما دلیل اصلی استفاده از این تگ، ظاهر آن نیست. th معنای سلول را در ساختار جدول مشخص می‌کند، درحالی‌که ظاهر هر دو نوع سلول را می‌توان با CSS تغییر داد.
کاربرد scope=”col” و scope=”row”
ویژگی scope روی تگ th مشخص می‌کند که عنوان تعریف‌شده به کدام دسته از سلول‌های جدول مربوط است. دو مقدار پرکاربرد آن عبارت‌اند از:
- scope=”col”: مشخص می‌کند که سلول عنوان، به ستون مربوط است.
- scope=”row”: مشخص می‌کند که سلول عنوان، به سطر مربوط است.
برای مشاهده تفاوت آن‌ها، جدول کالاهای قبلی را کمی تغییر می‌دهیم:
<table>
<caption>موجودی کالاها</caption>
<thead>
<tr>
<th scope="col">کالا</th>
<th scope="col">موجودی</th>
<th scope="col">قیمت هر واحد (تومان)</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">دفتر</th>
<td>8</td>
<td>50,000</td>
</tr>
<tr>
<th scope="row">خودکار</th>
<td>12</td>
<td>15,000</td>
</tr>
</tbody>
</table>
در این مثال، سه سلول th داخل thead دارای scope=”col” هستند؛ زیرا عنوان ستون‌های جدول را مشخص می‌کنند.
در بخش tbody نیز نام کالاها با th scope=”row” نوشته شده‌اند. دلیل این انتخاب آن است که «دفتر» و «خودکار» در این ساختار، هرکدام عنوان اطلاعات مربوط به یک سطر هستند.
به این ترتیب، سلول حاوی عدد ۱۲ با دو عنوان ارتباط دارد: «خودکار» به‌عنوان عنوان سطر و «موجودی» به‌عنوان عنوان ستون.
آیا باید همیشه ویژگی scope را بنویسیم؟ خیر. در جدول‌های ساده، مرورگر می‌تواند ارتباط بسیاری از سلول‌های عنوان و داده را از ساختار جدول تشخیص دهد. بااین‌حال، مشخص‌کردن صریح scope، به‌ویژه زمانی که جدول هم عنوان سطر دارد و هم عنوان ستون، این ارتباط را روشن‌تر می‌کند.
علاوه بر row و col، مقادیر rowgroup و colgroup نیز وجود دارند که برای تعیین محدوده عنوان در گروهی از سطرها یا ستون‌ها به کار می‌روند. این موارد بیشتر در ساختارهای پیچیده‌تر مطرح می‌شوند و برای جدول ساده فعلی ضرورتی ندارند.
ارتباط عنوان‌ها با دسترس‌پذیری جدول
هنگامی که یک کاربر بین سلول‌های جدول حرکت می‌کند، ممکن است نتواند هم‌زمان عنوان سطر و ستون مربوط به هر داده را ببیند. این مسئله برای کاربران صفحه‌خوان اهمیت بیشتری دارد؛ زیرا اطلاعات جدول معمولاً به‌صورت سلول‌به‌سلول در اختیار آن‌ها قرار می‌گیرد.
استفاده صحیح از th و scope به فناوری‌های کمکی کمک می‌کند رابطه میان داده‌ها و عنوان‌های آن‌ها را تشخیص دهند. برای مثال، هنگام حرکت به سلول حاوی عدد ۱۲ در جدول بالا، صفحه‌خوان می‌تواند عنوان‌های مرتبط «خودکار» و «موجودی» را نیز در اختیار کاربر قرار دهد؛ هرچند نحوه اعلام آن‌ها به صفحه‌خوان و شیوه پیمایش جدول بستگی دارد.
در این میان، سه جزء نقش متفاوتی دارند:
- caption موضوع کل جدول را معرفی می‌کند.
- th سلول‌های عنوان را از سلول‌های داده متمایز می‌کند.
- scope مشخص می‌کند هر عنوان به کدام سطر یا ستون مربوط است.
البته افزودن این عناصر به‌تنهایی تضمین نمی‌کند که هر جدول پیچیده‌ای کاملاً دسترس‌پذیر باشد. در جدول‌هایی با عنوان‌های چندسطحی یا ارتباطات پیچیده میان سلول‌ها، ممکن است لازم باشد از ویژگی‌های id و headers برای مشخص‌کردن ارتباط‌ها استفاده کنیم.
برای جدول‌های ساده، بهترین نقطه شروع این است که ابتدا سلول‌های عنوان را به‌درستی انتخاب کنید و سپس، هرجا ارتباط آن‌ها با سطرها و ستون‌ها نیاز به شفافیت دارد، از scope استفاده کنید.
برای بررسی مثال بالا نیز کافی است در کد HTML دنبال سلول حاوی عدد ۱۲ بگردید و مشخص کنید کدام th عنوان سطر و کدام th عنوان ستون آن است. اگر بتوانید هر دو رابطه را از ساختار کد تشخیص دهید، منطق این مثال را درست درک کرده‌اید.
چگونه با colspan و rowspan سلول‌های جدول را ادغام کنیم؟
گاهی لازم است یک سلول جدول در HTML فضای بیشتری از یک سطر یا ستون معمولی را اشغال کند. برای مثال، ممکن است بخواهیم عنوانی را روی چند ستون نمایش دهیم یا نام یک روز را برای چند ردیف برنامه کلاسی فقط یک‌بار بنویسیم.
برای این کار از دو ویژگی colspan و rowspan استفاده می‌کنیم. هر دو ویژگی روی تگ‌های td و th قابل استفاده هستند، اما جهت گسترش سلول در آن‌ها متفاوت است:
- colspan: یک سلول را در امتداد چند ستون گسترش می‌دهد؛ یعنی ادغام افقی.
- rowspan: یک سلول را در امتداد چند سطر گسترش می‌دهد؛ یعنی ادغام عمودی.
در واقع، این ویژگی‌ها چند سلول موجود را به یکدیگر تبدیل نمی‌کنند؛ بلکه مشخص می‌کنند یک سلول از ابتدا چه تعداد جایگاه سطری یا ستونی را اشغال کند.
ادغام ستون‌ها با colspan
ویژگی colspan تعداد ستون‌هایی را مشخص می‌کند که یک سلول باید در امتداد آن‌ها قرار بگیرد. برای مثال، با نوشتن colspan=”2″، سلول موردنظر فضای دو ستون را اشغال می‌کند.
فرض کنید جدولی برای برنامه کلاس‌ها داریم که شامل سه ستون «روز»، «درس» و «ساعت» است. اگر در یک روز هیچ کلاسی برگزار نشود، می‌توانیم به‌جای تکرار عبارت «کلاسی برگزار نمی‌شود» در دو ستون آخر، یک سلول مشترک برای آن‌ها ایجاد کنیم.
<table>
<caption>برنامه کلاس‌ها</caption>
<thead>
<tr>
<th scope="col">روز</th>
<th scope="col">درس</th>
<th scope="col">ساعت</th>
</tr>
</thead>
<tbody>
<tr>
<td>شنبه</td>
<td>HTML</td>
<td>۱۰ تا ۱۲</td>
</tr>
<tr>
<td>یکشنبه</td>
<td colspan="2">کلاسی برگزار نمی‌شود</td>
</tr>
</tbody>
</table>
در سطر مربوط به یکشنبه، سلول اول نام روز را نمایش می‌دهد و سلول دوم با colspan=”2″ فضای هر دو ستون «درس» و «ساعت» را در بر می‌گیرد.
به همین دلیل، نیازی نیست بعد از این سلول، یک td دیگر برای ستون ساعت بنویسیم. اگر چنین کاری انجام دهیم، یک سلول اضافی در ساختار آن سطر ایجاد خواهد شد.
مقدار پیش‌فرض colspan برابر با 1 است؛ بنابراین اگر این ویژگی را ننویسیم، هر سلول فقط یک ستون را اشغال می‌کند.
ادغام ردیف‌ها با rowspan
ویژگی rowspan عملکرد مشابهی دارد، اما به‌جای ستون‌ها، تعداد سطرهایی را مشخص می‌کند که یک سلول در امتداد آن‌ها قرار می‌گیرد.
برای مثال، اگر در روز شنبه دو کلاس برگزار شود، می‌توانیم نام «شنبه» را فقط در سطر اول بنویسیم و با rowspan=”2″ آن را در امتداد هر دو سطر نمایش دهیم.
کد جدول قبلی را به شکل زیر تغییر می‌دهیم:
<table>
<caption>برنامه کلاس‌ها</caption>
<thead>
<tr>
<th scope="col">روز</th>
<th scope="col">درس</th>
<th scope="col">ساعت</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">شنبه</td>
<td>HTML</td>
<td>۱۰ تا ۱۲</td>
</tr>
<tr>
<td>CSS</td>
<td>۱۳ تا ۱۵</td>
</tr>
<tr>
<td>یکشنبه</td>
<td colspan="2">کلاسی برگزار نمی‌شود</td>
</tr>
</tbody>
</table>
| روز | درس | ساعت |
|---|---|---|
| شنبه | HTML | ۱۰ تا ۱۲ |
| CSS | ۱۳ تا ۱۵ | |
| یکشنبه | کلاسی برگزار نمی‌شود | |
در این مثال، سلول «شنبه» به کمک rowspan=”2″ فضای دو سطر را اشغال می‌کند. بنابراین در سطر دوم که مربوط به کلاس CSS است، دیگر سلولی برای نام روز نمی‌نویسیم؛ زیرا آن جایگاه همچنان در اختیار سلول «شنبه» قرار دارد.
در سطر یکشنبه نیز از colspan=”2″ استفاده کرده‌ایم. به این ترتیب، هر دو نوع ادغام افقی و عمودی را در یک جدول به کار برده‌ایم.
مقدار پیش‌فرض rowspan نیز 1 است. این ویژگی یک حالت خاص هم دارد: مقدار rowspan=”0″ باعث می‌شود سلول تا انتهای گروه سطرهای مربوط به خود، مانند همان tbody، امتداد پیدا کند. بااین‌حال، برای جدول‌های ساده بهتر است تعداد سطرهای موردنظر را به‌صورت صریح مشخص کنیم.
خطاهای ساختاری هنگام ادغام سلول‌ها
هنگام استفاده از colspan و rowspan، باید تعداد جایگاه‌هایی را که هر سلول اشغال می‌کند در نظر بگیریم. یکی از اشتباهات مهم این است که بعد از گسترش یک سلول، برای جایگاه‌های اشغال‌شده دوباره سلول تعریف کنیم.
برای جلوگیری از این مشکل، به سه نکته توجه کنید:
- سلول‌های اضافی ایجاد نکنید. اگر یک سلول با colspan=”2″ دو ستون را پوشش می‌دهد، نباید برای ستون دومِ اشغال‌شده یک سلول مستقل در همان سطر اضافه کنید.
- اثر rowspan را در سطرهای بعدی در نظر بگیرید. وقتی سلولی دو سطر را اشغال می‌کند، در سطر بعدی باید سلول‌های جدید را از اولین جایگاه آزاد قرار دهید.
- گروه‌بندی سطرها را رعایت کنید. یک سلول نباید با rowspan از مرز گروه‌های سطر، مانند دو tbody جداگانه، عبور کند.
همچنین توجه داشته باشید که ادغام سلول‌ها ممکن است رابطه میان عنوان‌ها و داده‌های جدول را پیچیده‌تر کند. در جدول‌هایی که چند سطح عنوان یا ادغام‌های متعدد دارند، لازم است ارتباط سلول‌ها را با دقت بیشتری بررسی کنیم؛ گاهی استفاده از scope مناسب یا ویژگی‌های id و headers ضروری می‌شود.
قاعده کاربردی: پیش از نوشتن کد، تعداد ستون‌های جدول را مشخص کنید و هنگام بررسی هر سطر، سلول‌های گسترش‌یافته از سطرهای قبلی را نیز بشمارید. اگر بتوانید جایگاه هر داده را بدون هم‌پوشانی یا ایجاد ستون اضافی مشخص کنید، ساختار جدول را درست طراحی کرده‌اید.
برای تمرین، در مثال بالا کلاس سومی به روز شنبه اضافه کنید و مقدار rowspan را متناسب با آن تغییر دهید. نتیجه باید به‌گونه‌ای باشد که نام «شنبه» فقط یک‌بار در کد نوشته شود، اما در خروجی فضای سه سطر کلاس‌های همان روز را اشغال کند.
چگونه ظاهر جدول را خواناتر کنیم؟
تا اینجا یاد گرفتیم چگونه با تگ‌های HTML یک جدول بسازیم و اطلاعات آن را در سطرها و ستون‌های مشخص قرار دهیم. بااین‌حال، مرورگرها به‌صورت پیش‌فرض لزوماً خطوط جداکننده‌ای میان سلول‌ها نمایش نمی‌دهند و ممکن است تشخیص مرز اطلاعات چندان آسان نباشد.
برای بهبود ظاهر جدول می‌توانیم از CSS استفاده کنیم. HTML وظیفه تعریف ساختار و ارتباط داده‌ها را بر عهده دارد، درحالی‌که CSS ویژگی‌های ظاهری مانند کادر سلول‌ها، فاصله داخلی، رنگ پس‌زمینه و تراز متن را کنترل می‌کند.
افزودن کادر و فاصله داخلی سلول‌ها با CSS
برای شروع، کافی است چند ویژگی ساده CSS را به جدول اضافه کنیم. فرض کنید به تگ table مثال قبلی کلاس data-table را داده‌ایم:
<table class="data-table">
</table>
حالا می‌توانیم کد CSS زیر را برای آن بنویسیم:
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th,
.data-table td {
border: 1px solid #cccccc;
padding: 10px 12px;
text-align: start;
}
.data-table thead th {
background-color: #f2f2f2;
}
.data-table caption {
padding: 10px 0;
font-weight: bold;
text-align: start;
}
این کد چند تغییر مشخص در ظاهر جدول ایجاد می‌کند:
- width: 100%: عرض جدول را متناسب با عرض فضای در دسترس آن تنظیم می‌کند.
- border-collapse: collapse: باعث می‌شود کادرهای مجاور سلول‌ها به‌صورت یک کادر مشترک نمایش داده شوند.
- border: برای سلول‌های عنوان و داده، کادر یک‌پیکسلی خاکستری ایجاد می‌کند.
- padding: میان محتوای سلول و کادر اطراف آن فاصله قرار می‌دهد تا متن‌ها به خطوط جدول نچسبند.
- text-align: start: متن را در ابتدای جهت نوشتار تراز می‌کند؛ بنابراین در متن فارسی راست‌به‌چپ، تراز معمولاً از سمت راست خواهد بود.
- background-color: پس‌زمینه سلول‌های عنوان در thead را از سلول‌های معمولی متمایز می‌کند.
در این نمونه، عنوان جدول نیز با کمی فاصله و ضخامت بیشتر نمایش داده می‌شود تا از محتوای سلول‌ها قابل تشخیص باشد.
می‌توانید این CSS را در فایل استایل سایت قرار دهید یا برای تمرین، آن را داخل تگ style در بخش head سند HTML بنویسید.
مدیریت جدول عریض در موبایل
اگر جدول ستون‌های زیادی داشته باشد، ممکن است عرض آن از فضای نمایشگر موبایل بیشتر شود. در چنین شرایطی، فشرده‌کردن بیش‌ازحد ستون‌ها می‌تواند خواندن داده‌ها را دشوار کند و حتی باعث شود بخشی از اطلاعات از محدوده قابل مشاهده خارج شود.
یکی از راهکارهای ساده این است که جدول را داخل یک عنصر div قرار دهیم و امکان پیمایش افقی (Horizontal Scrolling) را برای آن فراهم کنیم.
برای نمونه، جدول موجودی کالاها را به شکل زیر داخل یک پوشش قرار می‌دهیم:
<div class="table-scroll"
role="region"
aria-labelledby="inventory-caption"
tabindex="0">
<table class="data-table">
<caption id="inventory-caption">
وضعیت موجودی و قیمت کالاها
</caption>
<thead>
<tr>
<th scope="col">کالا</th>
<th scope="col">موجودی</th>
<th scope="col">قیمت (تومان)</th>
</tr>
</thead>
<tbody>
<tr>
<td>دفتر</td>
<td>8</td>
<td>50,000</td>
</tr>
<tr>
<td>خودکار</td>
<td>12</td>
<td>15,000</td>
</tr>
</tbody>
</table>
</div>
سپس این CSS را به استایل‌های قبلی اضافه می‌کنیم:
.table-scroll {
max-width: 100%;
overflow-x: auto;
}
.table-scroll .data-table {
min-width: 540px;
}
.table-scroll:focus-visible {
outline: 2px solid #1768b0;
outline-offset: 2px;
}
در این مثال، overflow-x: auto اجازه می‌دهد در صورت بیشترشدن عرض محتوا از فضای موجود، جدول به‌صورت افقی پیمایش شود. همچنین min-width: 540px حداقل عرض جدول را تعیین می‌کند تا ستون‌ها بیش‌ازحد فشرده نشوند. عدد ۵۴۰ پیکسل صرفاً برای این مثال انتخاب شده است و باید متناسب با محتوای هر جدول تنظیم شود.
ویژگی tabindex=”0″ نیز پوشش جدول را در ترتیب پیمایش با صفحه‌کلید قرار می‌دهد تا کاربر بتواند آن را با کلید Tab انتخاب کند. role=”region” و aria-labelledby به شناسایی این ناحیه با استفاده از عنوان جدول کمک می‌کنند. در پیاده‌سازی‌های پیشرفته‌تر، بهتر است این ویژگی‌های تعاملی فقط زمانی فعال باشند که ناحیه واقعاً به پیمایش نیاز دارد، تا توقف اضافی در مسیر Tab ایجاد نشود.
با این روش، ساختار اصلی table، سطرها و سلول‌ها حفظ می‌شود و برای نمایش جدول در موبایل نیازی نیست آن‌ها را به عناصر دیگری تبدیل کنیم.
برای بررسی نتیجه، عرض پنجره مرورگر را کاهش دهید یا از حالت نمایش موبایل در ابزارهای توسعه‌دهنده استفاده کنید. اگر عرض فضای نمایش کمتر از حداقل عرض جدول شود، باید بتوانید بخش‌های خارج از دید را با پیمایش افقی مشاهده کنید. همچنین بررسی کنید که هیچ ستون یا داده‌ای بریده نشده باشد و ناحیه پیمایش هنگام فوکوس با صفحه‌کلید مشخص شود.
این روش یکی از راهکارهای نمایش جدول‌های عریض است، نه تنها راهکار ممکن. مهم‌ترین اصل این است که هنگام تغییر اندازه نمایشگر، اطلاعات جدول و ارتباط میان عنوان‌ها و داده‌ها همچنان قابل دسترسی باقی بماند.
مثال عملی ساخت یک جدول کامل در HTML
حالا که با عناصر اصلی جدول، گروه‌بندی سطرها، ادغام سلول‌ها و تنظیم ظاهر جدول آشنا شدیم، می‌توانیم همه این قابلیت‌ها را در یک مثال عملی به کار ببریم.
در این بخش، یک جدول گزارش فروش دو روزه می‌سازیم که نام کالاها، تعداد فروش، قیمت واحد و مبلغ فروش هر کالا را نمایش می‌دهد. همچنین فروش هر روز را در یک گروه جداگانه قرار می‌دهیم و مجموع مبلغ فروش را در انتهای جدول نشان می‌دهیم.
طراحی ساختار یک جدول گزارش فروش نمونه
فرض کنید یک فروشگاه لوازم‌التحریر می‌خواهد فروش روزهای شنبه و یکشنبه را ثبت کند. داده‌های فرضی گزارش به این صورت هستند:
- شنبه: ۳ دفتر با قیمت واحد ۵۰٬۰۰۰ تومان و ۵ خودکار با قیمت واحد ۱۵٬۰۰۰ تومان فروخته شده است.
- یکشنبه: ۲ دفتر با قیمت واحد ۵۰٬۰۰۰ تومان و ۴ مداد با قیمت واحد ۱۰٬۰۰۰ تومان فروخته شده است.
مبلغ فروش هر کالا از ضرب تعداد فروش در قیمت واحد به دست می‌آید. بنابراین، مجموع فروش شنبه ۲۲۵٬۰۰۰ تومان و مجموع فروش یکشنبه ۱۴۰٬۰۰۰ تومان خواهد بود.
برای نمایش این اطلاعات، جدول را با پنج ستون طراحی می‌کنیم: روز، کالا، تعداد فروش، قیمت واحد و مبلغ فروش.
در ساختار HTML نیز از عناصر زیر استفاده خواهیم کرد:
- caption برای مشخص‌کردن عنوان گزارش.
- thead و th برای تعریف عنوان ستون‌ها.
- دو عنصر tbody برای جداکردن سطرهای فروش شنبه و یکشنبه.
- rowspan برای نمایش نام هر روز در امتداد دو سطر.
- tfoot و colspan برای نمایش جمع کل فروش در انتهای جدول.
ازآنجاکه هر روز یک گروه مستقل از سطرها دارد، برای سلول نام روز از scope=”rowgroup” استفاده می‌کنیم. همچنین نام هر کالا را با th scope=”row” مشخص می‌کنیم تا نقش آن به‌عنوان عنوان سطر روشن باشد.
کد نهایی و بررسی نتیجه
یک فایل به نام index.html ایجاد کنید و کد زیر را داخل آن قرار دهید. این نمونه شامل ساختار کامل سند HTML، جدول گزارش فروش و CSS موردنیاز برای خواناترشدن آن است.
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>گزارش فروش فروشگاه</title>
<style> body { padding: 20px; } .table-scroll { max-width: 100%; overflow-x: auto; } .table-scroll:focus-visible { outline: 2px solid #1768b0; outline-offset: 2px; } .sales-table { width: 100%; min-width: 620px; border-collapse: collapse; } .sales-table caption { font-weight: bold; padding: 12px; text-align: start; } .sales-table th, .sales-table td { border: 1px solid #ccc; padding: 10px; text-align: start; } .sales-table thead, .sales-table tfoot { background-color: #f2f2f2; } </style>
</head>
<body>
<div class="table-scroll"
role="region"
aria-labelledby="sales-caption"
tabindex="0">
<table class="sales-table">
<caption id="sales-caption">
گزارش فروش دو روزه
</caption>
<thead>
<tr>
<th scope="col">روز</th>
<th scope="col">کالا</th>
<th scope="col">تعداد فروش</th>
<th scope="col">قیمت واحد (تومان)</th>
<th scope="col">مبلغ فروش (تومان)</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup" rowspan="2">شنبه</th>
<th scope="row">دفتر</th>
<td>۳</td>
<td>۵۰٬۰۰۰</td>
<td>۱۵۰٬۰۰۰</td>
</tr>
<tr>
<th scope="row">خودکار</th>
<td>۵</td>
<td>۱۵٬۰۰۰</td>
<td>۷۵٬۰۰۰</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="rowgroup" rowspan="2">یکشنبه</th>
<th scope="row">دفتر</th>
<td>۲</td>
<td>۵۰٬۰۰۰</td>
<td>۱۰۰٬۰۰۰</td>
</tr>
<tr>
<th scope="row">مداد</th>
<td>۴</td>
<td>۱۰٬۰۰۰</td>
<td>۴۰٬۰۰۰</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="4">
جمع کل فروش
</th>
<td>۳۶۵٬۰۰۰</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
پس از ذخیره فایل و بازکردن آن در مرورگر، باید جدولی با پنج ستون و چهار سطر داده مشاهده کنید. نام هر روز در امتداد دو سطر قرار می‌گیرد و در انتهای جدول، جمع کل فروش نمایش داده می‌شود.
| روز | کالا | تعداد فروش | قیمت واحد (تومان) | مبلغ فروش (تومان) |
|---|---|---|---|---|
| شنبه | دفتر | ۳ | ۵۰٬۰۰۰ | ۱۵۰٬۰۰۰ |
| خودکار | ۵ | ۱۵٬۰۰۰ | ۷۵٬۰۰۰ | |
| یکشنبه | دفتر | ۲ | ۵۰٬۰۰۰ | ۱۰۰٬۰۰۰ |
| مداد | ۴ | ۱۰٬۰۰۰ | ۴۰٬۰۰۰ | |
| جمع کل فروش | ۳۶۵٬۰۰۰ | |||
نکته مهم این مثال، استفاده از دو tbody مجزاست. هرکدام از این عناصر، سطرهای مربوط به یک روز را گروه‌بندی می‌کنند. به همین دلیل، سلول نام روز که دارای rowspan=”2″ و scope=”rowgroup” است، می‌تواند به‌عنوان عنوان گروه همان دو سطر تعریف شود.
در بخش tfoot نیز سلول «جمع کل فروش» با colspan=”4″ فضای چهار ستون ابتدایی را اشغال می‌کند و مقدار ۳۶۵٬۰۰۰ تومان در ستون پنجم قرار می‌گیرد.
برای بررسی نتیجه، سه مورد را کنترل کنید:
- ساختار سطرها: نام هر روز باید فقط یک‌بار نوشته شده باشد و فضای دو سطر مربوط به همان روز را اشغال کند.
- درستی محاسبات: حاصل جمع ۱۵۰٬۰۰۰، ۷۵٬۰۰۰، ۱۰۰٬۰۰۰ و ۴۰٬۰۰۰ باید برابر با ۳۶۵٬۰۰۰ تومان باشد.
- نمایش در عرض کم: با کوچک‌کردن پنجره مرورگر، جدول باید در صورت نیاز داخل ناحیه خود به‌صورت افقی قابل پیمایش باشد، نه اینکه داده‌های ستون‌های انتهایی حذف شوند.
در این نمونه، پوشش جدول برای پیمایش با صفحه‌کلید نیز قابل انتخاب شده است. هنگام استفاده از این الگو در یک سایت واقعی، بهتر است نیاز به فوکوس‌پذیری ناحیه پیمایش را بررسی کنید و در عرض‌هایی که پیمایش لازم نیست، از ایجاد توقف اضافی در مسیر Tab جلوگیری کنید.
با تکمیل این مثال، یک جدول داده‌ای ساخته‌اید که عنوان مشخص، سرستون‌ها، گروه‌بندی سطرها، سلول‌های ادغام‌شده و بخش جمع‌بندی دارد. همین الگو را می‌توان با تغییر داده‌ها برای گزارش موجودی، برنامه هفتگی یا سایر اطلاعات سطری و ستونی نیز به کار برد.
خطاهای رایج در ساخت جدول HTML و روش بررسی آن‌ها
گاهی پس از نوشتن کد جدول در HTML، متوجه می‌شویم که سلول‌ها در ستون‌های مورد انتظار قرار نگرفته‌اند، بخشی از اطلاعات جابه‌جا شده یا ساختار جدول با چیزی که در کد نوشته‌ایم تفاوت دارد.
این مشکلات همیشه به یک علت ایجاد نمی‌شوند. گاهی تعداد سلول‌ها یا نحوه ادغام آن‌ها اشتباه است؛ گاهی عناصر جدول در جایگاه درستی قرار نگرفته‌اند و گاهی هم مشکل فقط به CSS مربوط می‌شود.
برای پیدا کردن علت، بهتر است ابتدا ساختار HTML را بررسی کنیم، سپس در صورت نیاز سراغ تنظیمات ظاهری برویم.
چرا ساختار جدول با خروجی مورد انتظار فرق دارد؟
یکی از دلایل احتمالی، ناهماهنگی میان جایگاه سلول‌ها و تعداد ستون‌های مورد انتظار است. این اتفاق به‌خصوص زمانی اهمیت پیدا می‌کند که از colspan یا rowspan استفاده کرده باشیم.
برای مثال، بخشی از جدول گزارش فروش قبلی را در نظر بگیرید:
<tbody>
<tr>
<th scope="rowgroup" rowspan="2">شنبه</th>
<th scope="row">دفتر</th>
<td>۳</td>
</tr>
<tr>
<td>شنبه</td>
<th scope="row">خودکار</th>
<td>۵</td>
</tr>
</tbody>
در این کد، سلول «شنبه» با rowspan=”2″ فضای دو سطر را اشغال کرده است؛ اما در سطر دوم، دوباره یک سلول برای نام روز نوشته‌ایم.
این سلول اضافی باعث می‌شود داده‌های سطر دوم در جایگاه ستون‌های مورد انتظار قرار نگیرند؛ زیرا جایگاه ستون اول همچنان توسط سلول ادغام‌شده سطر قبلی اشغال شده است.
برای اصلاح، باید سلول تکراری «شنبه» را از سطر دوم حذف کنیم:
<tr>
<th scope="row">خودکار</th>
<td>۵</td>
</tr>
حالا اطلاعات سطر دوم در جایگاه‌های باقی‌مانده قرار می‌گیرند.
البته جابه‌جایی سلول‌ها تنها مشکلی نیست که ممکن است با آن روبه‌رو شوید. هنگام بررسی جدول، به این موارد هم توجه کنید:
- قرارگیری نادرست عناصر: سلول‌های td و th باید داخل tr باشند و عناصر گروه‌بندی مانند thead، tbody و tfoot باید در جایگاه مجاز خود قرار بگیرند. برای مثال، caption نباید داخل tbody نوشته شود.
- بسته‌نشدن یا بسته‌شدن نادرست تگ‌ها: برخی تگ‌های جدول طبق قواعد HTML می‌توانند تگ پایانی اختیاری داشته باشند، اما نوشتن صریح و منظم تگ‌های پایانی، بررسی کد را برای افراد مبتدی آسان‌تر می‌کند. اگر ساختار مورد انتظار به هم خورده است، مرز عناصر را بررسی کنید.
- اشتباه‌گرفتن مشکل ظاهری با مشکل ساختاری: اگر خطوط جدول نمایش داده نمی‌شوند یا عرض ستون‌ها مناسب نیست، لزوماً اشکالی در HTML وجود ندارد. ابتدا بررسی کنید که داده‌ها در سلول‌های درست قرار گرفته‌اند؛ سپس CSS را کنترل کنید.
- استفاده نادرست از سلول‌های عنوان: ممکن است جدول از نظر ظاهری درست باشد، اما به‌جای th از td برای سرستون‌ها استفاده شده باشد. در این حالت، رابطه معنایی عنوان‌ها و داده‌ها به‌درستی بیان نشده است.
نکته دیگر این است که مرورگر هنگام پردازش HTML، در بعضی شرایط ساختار سند را تکمیل می‌کند. برای مثال، اگر سطرهای tr را مستقیماً داخل table قرار داده باشید، مرورگر در ساختار DOM یک tbody ضمنی ایجاد می‌کند.
بنابراین اگر در ابزار توسعه‌دهنده مرورگر، عنصری مانند tbody را مشاهده کردید که صریحاً در کد اولیه ننوشته‌اید، وجود آن به‌تنهایی نشانه خطا نیست.
چگونه ساختار جدول را اعتبارسنجی کنیم؟
اعتبارسنجی HTML یا Validation فرایندی است که طی آن کد را از نظر رعایت قواعد و محدودیت‌های استاندارد بررسی می‌کنیم. این کار کمک می‌کند مشکلاتی را پیدا کنیم که ممکن است فقط با مشاهده ظاهر جدول مشخص نباشند.
یکی از ابزارهای مناسب برای این کار، Nu Html Checker است.
برای بررسی جدول خود، مراحل زیر را دنبال کنید:
- کد کامل سند را آماده کنید. فایل index.html مربوط به جدول گزارش فروش را باز کنید و مطمئن شوید آخرین تغییرات ذخیره شده‌اند.
- کد را در ابزار اعتبارسنجی بررسی کنید. وارد Nu Html Checker شوید و کد سند را از طریق گزینه ورود متن بررسی کنید. اگر صفحه روی وب منتشر شده است، می‌توانید آدرس آن را نیز برای بررسی وارد کنید.
- خطاها و هشدارها را بخوانید. به پیام، شماره خط و بخشی از کد که ابزار مشخص می‌کند توجه کنید. این اطلاعات نقطه شروع بررسی هستند؛ همیشه نباید همان محل نمایش پیام را علت اصلی خطا فرض کرد.
- مشکل را اصلاح و دوباره بررسی کنید. پس از هر اصلاح، اعتبارسنجی را تکرار کنید. گاهی برطرف‌کردن یک اشکال اولیه باعث می‌شود چند پیام مرتبط نیز برطرف شوند.
برای بررسی سریع خطاهای قابل‌تشخیص در کد، می‌توانید از ابزار اعتبارسنج HTML بیت‌آموز هم استفاده کنید. این ابزار کد را در مرورگر بررسی می‌کند، اما جایگزین Nu Html Checker نیست.
در کنار اعتبارسنجی، استفاده از ابزار توسعه‌دهنده مرورگر (DevTools) هم مفید است. کافی است روی جدول در صفحه راست‌کلیک کنید و گزینه Inspect را انتخاب کنید. سپس در پنل Elements، ساختار واقعی جدول را بررسی کنید.
در این قسمت می‌توانید ببینید عناصر thead، tbody، tfoot و سطرهای tr چگونه در DOM قرار گرفته‌اند. مقایسه این ساختار با کد اولیه به شما کمک می‌کند تغییراتی را که مرورگر هنگام پردازش HTML ایجاد کرده است، از عناصر نوشته‌شده در فایل تشخیص دهید.
البته عبور موفق از اعتبارسنجی به معنای درست‌بودن تمام جنبه‌های جدول نیست. ابزار اعتبارسنجی نمی‌تواند تضمین کند که داده‌های گزارش صحیح هستند، عنوان‌ها از نظر معنایی بهترین انتخاب‌اند یا جدول با همه فناوری‌های کمکی تجربه مناسبی دارد.
به همین دلیل، پس از رفع خطاهای HTML، یک بررسی نهایی هم انجام دهید: مطمئن شوید هر مقدار زیر عنوان درست قرار گرفته است، سلول‌های ادغام‌شده جایگاه صحیحی دارند، ارتباط سرستون‌ها با داده‌ها مشخص است و تمام اطلاعات در اندازه‌های مختلف صفحه قابل مشاهده یا دسترسی هستند.
برای تمرین، یکی از نسخه‌های جدول گزارش فروش را بردارید، یک سلول اضافی در سطری دارای rowspan ایجاد کنید و پیش از مشاهده نتیجه، پیش‌بینی کنید داده‌ها در کدام ستون‌ها قرار می‌گیرند. سپس ساختار را با DevTools بررسی و سلول اضافی را حذف کنید. هدف این تمرین آن است که بتوانید مشکل جدول را از روی ساختار آن تشخیص دهید، نه اینکه فقط با تغییر تصادفی کد به ظاهر دلخواه برسید.
جمع‌بندی: برای ساخت یک جدول صحیح در HTML چه نکاتی مهم است؟
برای ساخت یک جدول صحیح در HTML، ابتدا باید مشخص کنید داده‌ها چه ستون‌هایی دارند و هر سطر چه اطلاعاتی را نمایش می‌دهد. سپس با انتخاب درست سلول‌های عنوان و داده، گروه‌بندی سطرها و استفاده حساب‌شده از ویژگی‌های ادغام سلول، ساختاری ایجاد کنید که ارتباط اطلاعات در آن روشن باشد.
پس از تکمیل جدول، تنها به ظاهر آن اکتفا نکنید. کد HTML را اعتبارسنجی کنید، جایگاه داده‌ها و سرستون‌ها را بررسی کنید و مطمئن شوید اطلاعات در نمایشگرهای کوچک نیز قابل دسترسی هستند. اگر بتوانید جدول گزارش فروش این مقاله را با داده‌های دلخواه خودتان بازسازی کنید، مهم‌ترین مهارت‌های ساخت جدول را به کار گرفته‌اید.
برای ادامه یادگیری HTML و آشنایی ساختارمند با سایر اجزای صفحات وب، می‌توانید دوره مستر HTML بیت‌آموز را نیز بررسی کنید.
سوالات متداول
بله. سلول‌های جدول فقط برای نمایش متن ساده نیستند و می‌توان داخل آن‌ها عناصری مانند لینک، تصویر یا چند پاراگراف قرار داد. برای مثال، در جدول محصولات می‌توانید نام هر محصول را به صفحه جزئیات آن لینک کنید یا تصویر کوچکی از کالا نمایش دهید. هنگام استفاده از تصویر نیز باید متن جایگزین (alt) متناسب با نقش آن در جدول مشخص شود. برای آشنایی با ساخت لینک و نحوه تعیین مقصد آن، راهنمای لینک و مسیرها در HTML را ببینید.
خیر. HTML ساختار جدول و ارتباط میان سلول‌ها را مشخص می‌کند، اما به‌تنهایی امکان مرتب‌سازی تعاملی یا فیلترکردن داده‌ها را فراهم نمی‌کند. اگر می‌خواهید کاربر بتواند با کلیک روی عنوان یک ستون، ترتیب ردیف‌ها را تغییر دهد یا داده‌های مشخصی را فیلتر کند، به منطق برنامه‌نویسی مانند JavaScript یا پردازش سمت سرور نیاز دارید.
هنوز دیدگاهی ثبت نشده است.