۴
جداول
سازماندهی داده‌ها با جداول HTML
دنیای منظم جداول
داده‌ها را مثل یک کتابدار حرفه‌ای مرتب کنید!
جداول مثل قفسه‌های کتابخانه هستند! هر چیز جای خودش دارد و پیدا کردنش آسان است. تصور کنید بخواهید نمرات کلاس، فهرست محصولات یا برنامه هفتگی‌تان را نمایش دهید - جداول بهترین راه هستند! 📊
در HTML، جداول از ردیف‌ها و ستون‌ها تشکیل شده‌اند. مثل یک شطرنج که هر خانه جای مشخصی دارد!
حقیقت جالب:
قبل از CSS، طراحان وب از جداول برای چیدمان کل صفحه استفاده می‌کردند! البته الان این کار اشتباه محسوب می‌شود.
جدول ساده
بیایید با ساده‌ترین جدول شروع کنیم. مثل ساختن یک خانه - ابتدا پایه‌ها، بعد دیوارها! 🏗️
جدول پایه
<table>
<tr>
<th>نام</th>
<th>سن</th>
<th>شهر</th>
</tr>
<tr>
<td>علی</td>
<td>۲۵</td>
<td>تهران</td>
</tr>
<tr>
<td>سارا</td>
<td>۲۳</td>
<td>اصفهان</td>
</tr>
</table>نمایش در مرورگر:
| نام | سن | شهر |
|---|---|---|
| علی | ۲۵ | تهران |
| سارا | ۲۳ | اصفهان |
توضیح تگ‌ها:
- • <table>: شروع جدول
- • <tr>: ردیف جدول (Table Row)
- • <th>: سرستون (Table Header)
- • <td>: خانه داده (Table Data)
جدول پیشرفته
حالا جدولمان را مثل یک معمار حرفه‌ای تزئین می‌کنیم! با سرتیتر، پاورقی و گروه‌بندی‌ها. 🎨
جدول کامل
<table border="1">
<caption>فهرست دانشجویان کلاس برنامه‌نویسی</caption>
<thead>
<tr>
<th>شماره دانشجویی</th>
<th>نام و نام خانوادگی</th>
<th>نمره میان‌ترم</th>
<th>نمره پایان‌ترم</th>
<th>معدل</th>
</tr>
</thead>
<tbody>
<tr>
<td>۹۸۱۲۳۴۵۶</td>
<td>علی احمدی</td>
<td>۱۷</td>
<td>۱۸</td>
<td>۱۷.۵</td>
</tr>
<tr>
<td>۹۸۱۲۳۴۵۷</td>
<td>سارا محمدی</td>
<td>۱۹</td>
<td>۲۰</td>
<td>۱۹.۵</td>
</tr>
<tr>
<td>۹۸۱۲۳۴۵۸</td>
<td>محمد رضایی</td>
<td>۱۶</td>
<td>۱۷</td>
<td>۱۶.۵</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><strong>میانگین کلاس</strong></td>
<td><strong>۱۷.۸</strong></td>
</tr>
</tfoot>
</table>نمایش در مرورگر:
| شماره دانشجویی | نام و نام خانوادگی | نمره میان‌ترم | نمره پایان‌ترم | معدل |
|---|---|---|---|---|
| ۹۸۱۲۳۴۵۶ | علی احمدی | ۱۷ | ۱۸ | ۱۷.۵ |
| ۹۸۱۲۳۴۵۷ | سارا محمدی | ۱۹ | ۲۰ | ۱۹.۵ |
| ۹۸۱۲۳۴۵۸ | محمد رضایی | ۱۶ | ۱۷ | ۱۶.۵ |
| میانگین کلاس | ۱۷.۸ | |||
تگ‌های جدید:
- • <caption>: عنوان جدول
- • <thead>: سربرگ جدول
- • <tbody>: بدنه جدول
- • <tfoot>: پاورقی جدول
- • colspan: ادغام ستون‌ها
ادغام خانه‌ها
گاهی نیاز داریم چند خانه را با هم ترکیب کنیم. مثل وقتی که یک اتاق بزرگ می‌سازیم با شکستن دیوار بین دو اتاق کوچک! 🏠
ادغام ستون‌ها (colspan)
colspan
<table border="1">
<tr>
<th colspan="3">فروش ماهانه</th>
</tr>
<tr>
<th>فروردین</th>
<th>اردیبهشت</th>
<th>خرداد</th>
</tr>
<tr>
<td>۱۰۰</td>
<td>۱۵۰</td>
<td>۲۰۰</td>
</tr>
</table>نمایش:
| فروش ماهانه | ||
|---|---|---|
| فروردین | اردیبهشت | خرداد |
| ۱۰۰ | ۱۵۰ | ۲۰۰ |
ادغام ردیف‌ها (rowspan)
rowspan
<table border="1">
<tr>
<th>شهر</th>
<th>منطقه</th>
<th>جمعیت</th>
</tr>
<tr>
<td rowspan="2">تهران</td>
<td>شمال</td>
<td>۲ میلیون</td>
</tr>
<tr>
<td>جنوب</td>
<td>۳ میلیون</td>
</tr>
</table>نمایش:
| شهر | منطقه | جمعیت |
|---|---|---|
| تهران | شمال | ۲ میلیون |
| جنوب | ۳ میلیون |
تزئین جداول
حالا جدولمان را مثل یک طراح داخلی حرفه‌ای زیبا می‌کنیم! رنگ، فاصله و حاشیه اضافه می‌کنیم. 🎨
جدول زیبا
<table style="width: 100%; border-collapse: collapse; font-family: Arial;">
<tr style="background-color: #4CAF50; color: white;">
<th style="padding: 12px; text-align: center; border: 1px solid #ddd;">محصول</th>
<th style="padding: 12px; text-align: center; border: 1px solid #ddd;">قیمت</th>
<th style="padding: 12px; text-align: center; border: 1px solid #ddd;">موجودی</th>
</tr>
<tr style="background-color: #f2f2f2;">
<td style="padding: 10px; border: 1px solid #ddd;">لپ‌تاپ</td>
<td style="padding: 10px; border: 1px solid #ddd; text-align: center;">۱۵,۰۰۰,۰۰۰ تومان</td>
<td style="padding: 10px; border: 1px solid #ddd; text-align: center;">۵ عدد</td>
</tr>
<tr>
<td style="padding: 10px; border: 1px solid #ddd;">موبایل</td>
<td style="padding: 10px; border: 1px solid #ddd; text-align: center;">۸,۰۰۰,۰۰۰ تومان</td>
<td style="padding: 10px; border: 1px solid #ddd; text-align: center;">۱۰ عدد</td>
</tr>
<tr style="background-color: #f2f2f2;">
<td style="padding: 10px; border: 1px solid #ddd;">تبلت</td>
<td style="padding: 10px; border: 1px solid #ddd; text-align: center;">۵,۰۰۰,۰۰۰ تومان</td>
<td style="padding: 10px; border: 1px solid #ddd; text-align: center;">۳ عدد</td>
</tr>
</table>نمایش در مرورگر:
| محصول | قیمت | موجودی |
|---|---|---|
| لپ‌تاپ | ۱۵,۰۰۰,۰۰۰ تومان | ۵ عدد |
| موبایل | ۸,۰۰۰,۰۰۰ تومان | ۱۰ عدد |
| تبلت | ۵,۰۰۰,۰۰۰ تومان | ۳ عدد |
تمرین عملی
حالا وقت ساختن یک جدول برنامه هفتگی است!
📝 تمرین:
یک جدول برنامه کلاسی هفتگی بسازید که شامل موارد زیر باشد:
- • عنوان جدول: "برنامه کلاسی هفته"
- • ستون‌ها: ساعت، شنبه، یکشنبه، دوشنبه، سه‌شنبه، چهارشنبه
- • ردیف‌ها: ۸-۱۰، ۱۰-۱۲، ۱۴-۱۶، ۱۶-۱۸
- • چند کلاس در روزهای مختلف
- • استفاده از colspan برای تعطیلات یا استراحت
- • رنگ‌بندی مناسب برای سرستون‌ها
جواب تمرین
این یکی از راه‌های حل این تمرین است:
schedule.html
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>برنامه کلاسی هفته</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
th {
background-color: #2196F3;
color: white;
font-weight: bold;
}
.time-col {
background-color: #f0f0f0;
font-weight: bold;
}
.math { background-color: #ffeb3b; }
.science { background-color: #4caf50; color: white; }
.literature { background-color: #ff9800; color: white; }
.break { background-color: #e0e0e0; }
</style>
</head>
<body>
<h1>برنامه کلاسی هفته</h1>
<table>
<caption>برنامه کلاسی هفته - ترم بهار ۱۴۰۴</caption>
<thead>
<tr>
<th>ساعت</th>
<th>شنبه</th>
<th>یکشنبه</th>
<th>دوشنبه</th>
<th>سه‌شنبه</th>
<th>چهارشنبه</th>
</tr>
</thead>
<tbody>
<tr>
<td class="time-col">۸:۰۰ - ۱۰:۰۰</td>
<td class="math">ریاضی</td>
<td class="science">فیزیک</td>
<td class="literature">ادبیات</td>
<td class="math">ریاضی</td>
<td class="science">شیمی</td>
</tr>
<tr>
<td class="time-col">۱۰:۰۰ - ۱۲:۰۰</td>
<td class="science">زیست‌شناسی</td>
<td class="math">هندسه</td>
<td class="science">فیزیک</td>
<td class="literature">زبان انگلیسی</td>
<td class="break" colspan="1">آزاد</td>
</tr>
<tr>
<td class="time-col">۱۲:۰۰ - ۱۴:۰۰</td>
<td class="break" colspan="5">استراحت و ناهار</td>
</tr>
<tr>
<td class="time-col">۱۴:۰۰ - ۱۶:۰۰</td>
<td class="literature">تاریخ</td>
<td class="science">آزمایشگاه فیزیک</td>
<td class="math">آمار</td>
<td class="science">آزمایشگاه شیمی</td>
<td class="literature">جغرافیا</td>
</tr>
<tr>
<td class="time-col">۱۶:۰۰ - ۱۸:۰۰</td>
<td class="literature">ورزش</td>
<td class="break">آزاد</td>
<td class="literature">هنر</td>
<td class="break">آزاد</td>
<td class="literature">کلاس اضافی</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="time-col"><strong>مجموع ساعات</strong></td>
<td><strong>۶ ساعت</strong></td>
<td><strong>۶ ساعت</strong></td>
<td><strong>۶ ساعت</strong></td>
<td><strong>۴ ساعت</strong></td>
<td><strong>۴ ساعت</strong></td>
</tr>
</tfoot>
</table>
<h3>راهنمای رنگ‌ها:</h3>
<ul>
<li><span class="math" style="padding: 2px 8px;">زرد</span> - دروس ریاضی</li>
<li><span class="science" style="padding: 2px 8px;">سبز</span> - دروس علوم</li>
<li><span class="literature" style="padding: 2px 8px;">نارنجی</span> - دروس انسانی</li>
<li><span class="break" style="padding: 2px 8px;">خاکستری</span> - استراحت/آزاد</li>
</ul>
</body>
</html>نکات مهم:
- • از CSS برای زیباسازی جداول استفاده کنید
- • colspan و rowspan را برای ادغام خانه‌ها به کار ببرید
- • رنگ‌بندی منطقی برای دسته‌بندی اطلاعات
- • caption برای توضیح محتوای جدول