آموزش کامل جدول در HTML
جدول‌ها یا Tableها بخش مهمی از طراحی صفحات وب را به خود اختصاص می‌دهند. جدول‌ها راهی مناسب برای نمایش داده‌های دوبعدی به شمار می‌روند که توسط بینندگان قابل درک هستند و از نظر موتورهای جستجو و سئو هم یک مزیت قابل توجه به حساب می‌آیند.
ساخت جدول‌ها با استفاده از چندین تگ که به صورت تودرتو و با رعایت قوانین مخصوص به خود انجام میشود، قابل انجام است.
- <table>
- <thead>
- <tbody>
- <tfoot>
- <tr>
- <th>
- <td>
- <caption>
- <colgroup>
- <col>
در ادامه این تگ‌ها را تک به تک همراه با مثال‌های مربوط بررسی می‌کنیم.
<table>
برای ایجاد جدول از این تگ استفاده می‌کنیم. سایر تگ‌هایی که در ادامه شرح داده می‌شوند باید داخل این تگ قرار بگیرند. استفاده از برخی تگ‌ها ضروری و برخی دیگر اختیاری هستند.
برای ساخت یک جدول ساده با دو ستون و دو ردیف به شکل زیر عمل می‌کنیم:
|
1 2 3 4 5 6 7 8 9 10 |
<table> <tr> <td>ردیف اول - ستون اول</td> <td>ردیف اول - ستون دوم</td> </tr> <tr> <td>ردیف دوم - ستون اول</td> <td>ردیف دوم - ستون دوم</td> </tr> </table> |
در مثال بالا ابتدا مقادیر مربوط به ردیف اول و سپس ردیف دوم را درج کردیم. خروجی کدهای بالا به صورت زیر است:
| ردیف اول - ستون اول | ردیف اول - ستون دوم |
| ردیف دوم - ستون اول | ردیف دوم - ستون دوم |
همان طور که مشاهده می‌کنید برای ایجاد ردیف از تگ <tr> و برای ایجاد ستون از تگ <td> استفاده کرده‌ایم. جزئیات بیشتر و قوانین تکمیلی در مورد این تگ‌ها را جلوتر بررسی خواهیم کرد.
<thead>
این تگ مشخص می‌کند که ردیف‌های مربوط به سربرگ‌های جدول کدام ناحیه هستند. استفاده از این تگ تاثیری روی ظاهر جدول ندارد. بلکه ممکن است مرورگرها و موتورهای جستجو با دانستن ساختار منطقی جدول، برخی مزیت‌ها برای شما و برای کاربران سایت ایجاد کنند.
مثلا ممکن است مرورگر ردیف‌های ثبت شده در بخش thead را بالای تمامی صفحات در چاپ درج کند تا خروجی چابی، بهتر قابل استفاده باشد.
<tbody>
این تگ مشخص می‌کند که ردیف‌های اصلی جدول کجا هستند. استفاده از این تگ الزامی نیست و به صورت معمول همه‌ی ردیف‌ها جزء ردیف‌های اصلی جدول به حساب می‌آیند. مگر اینکه از تگ‌های thead یا tfoot استفاده کنید و لازم باشد تا با این تگ، ردیف‌های اصلی را هم نشانه‌گذاری کنید.
<tfoot>
ردیف‌های پایین جدول با این تگ علامت گذاری می‌شوند. استفاده از این تگ هم الزامی نیست ولی به‌کارگیری صحیح آن همان طور که در مورد thead گفته شد، می‌تواند مزایایی به دنبال داشته باشد.
امکان درج چندین thead و tbody و tfoot در جدول وجود دارد و از این جهت محدودیتی پیش‌بینی نشده است.
نکته: که این تگ بر خلاف آنچه به نظر می‌رسد باید در بالای جدول و پیش از thead تعریف شود تا مرورگر بتواند به آسانی از آن در محل مناسب استفاده کند.
مثال استفاده از تگ‌های thead و tfoot و tbody
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<table> <thead> <tr> <th>عنوان ستون اول</th> <th>عنوان ستون دوم</th> </tr> </thead> <tfoot> <tr> <td>پابرگ ستون اول</td> <td>پابرگ ستون دوم</td> </tr> </tfoot> <tbody> <tr> <td>ردیف اول - ستون اول</td> <td>ردیف اول - ستون دوم</td> </tr> <tr> <td>ردیف دوم - ستون اول</td> <td>ردیف دوم - ستون دوم</td> </tr> </tbody> </table> |
خروجی کدهای بالا به صورت زیر است:
| عنوان ستون اول | عنوان ستون دوم |
|---|---|
| پابرگ ستون اول | پابرگ ستون دوم |
| ردیف اول - ستون اول | ردیف اول - ستون دوم |
| ردیف دوم - ستون اول | ردیف دوم - ستون دوم |
همان طور که مشاهده می‌کنید، tfoot در بالای جدول تعریف شده است ولی در نمایش پایین جدول دیده میشود.
حتی اگر در جدول از thead و tfoot استفاده نشود، می‌توانید برای تعیین صریح محل قرارگیری ردیف‌های اصلی از تگ tbody استفاده کنید.
<tr>
ردیف‌های هر جدول را با تگ tr ایجاد میشود و برای ایجاد سطر در جدول استفاده میشود . بعد از قرار گیری محتوا، تگ پایان آن باید بسته شود.
<th>
برای نمایش عنوان‌ها میتوان از th استفاده کرد. محتوای داخل تگ th بصورت ضخیم (bold) و وسط چین نمایش داده میشود و برای موتورهای جستجو، می‌تواند مفید باشد.
<td>
تگ td داخلی ترین سلول جدول است که محتوا در آن قرار میگیرد.
ویژگی rowspan : در صورتی که نیاز به ادغام دو یا چند سلول بصورت عمودی داشته باشیم از این ویژگی میتوان استفاده کرد.
ویژگی colspan : در صورتی که نیاز به ادغام دو یا چند سلول بصورت افقی داشته باشیم از این ویژگی میتوان استفاده کرد.
مثال استفاده از rowspan :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> <tr> <td colspan="3">ردیف سوم - ستون اول</td> </tr> </table> |
خروجی کدهای بالا به صورت زیر است:
| ستون اول | ستون دوم | ستون سوم |
|---|---|---|
| ردیف اول - ستون اول | ردیف اول - ستون دوم | ردیف اول - ستون سوم |
| ردیف دوم- ستون دوم | ردیف دوم - ستون سوم | |
| ردیف سوم - ستون اول | ||
<caption>
تگ caption در جداول، برای نمایش عنوان یا توضیحی برای جدول ارائه میشود، caption در قسمت بالای جدول قرار میگیرد و معرف آن است.
برای هر جدول تنها میتوان از یک caption استفاده کرد و این تگ باید بلافاصله بعد از تگ table قرار گیرد.
|
1 2 3 4 5 6 7 8 9 10 |
<table border="1" cellpadding="4" cellspacing="4"> <caption>عنوان جدول</caption> <tr> <th rowspan="2" valign="middle">تیتر جدول</th> </tr> <tr> <td>محتوای جدول</td> <td>محتوای جدول</td> </tr> </table> |
<colgroup>
برچسب <colgroup> یک گروه از یک یا چند ستون را در یک جدول برای قالب بندی مشخص می‌کند.
برچسب <colgroup> برای استفاده از استایل در کل ستون‌ها به جای تکرار styleها برای هر سلول ، برای هر سطر مفید است.
تگ colgroup و col را باید بلافاصله بعد از تگ table قرار داد و از colgroup میتوان بدون col یا با آن استفاده کرد.
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<table> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>کد کالا</th> <th>عنوان</th> <th>قیمت</th> </tr> <tr> <td>3476896</td> <td>محصول تست اول</td> <td>تومان 53</td> </tr> <tr> <td>5869207</td> <td>محصول تست دوم</td> <td>تومان 49</td> </tr> </table> |
خروجی کد بالا:
| کد کالا | عنوان | قیمت |
|---|---|---|
| 3476896 | محصول تست اول | تومان 53 |
| 5869207 | محصول تست دوم | تومان 49 |
مثال colgroup بدون col:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<table border="1"> <colgroup style="background-color:#6CF"></colgroup> <colgroup style="background-color:#CCC"></colgroup> <colgroup style="background-color:#FC0;"></colgroup> <tr> <th>تیتر جدول</th> <th>تیتر جدول</th> <th>تیتر جدول</th> </tr> <tr> <td>محتوای جدول</td> <td>محتوای جدول</td> <td>محتوای جدول</td> </tr> </table> |
خروجی colgroup بدون col:
| تیتر جدول | تیتر جدول | تیتر جدول |
|---|---|---|
| محتوای جدول | محتوای جدول | محتوای جدول |
<col>
برای تعریف ویژگی‌های مختلف در یک ستون درون یک <colgroup> ، از برچسب <col> استفاده میشود.
نکته: با span میتوان تعداد ستون‌هایی که یک ویژگی خاص را دارند مشخص کرد. مثلا زمانی که
|
1 |
<col span="2" style="background-color:red"> |
نوشته میشود به این معنی است که دو ستون با ویژگی background-color:red در نظر گرفته شود.