برای مرتب و منظم نگاه داشتن وب‌سایت شما یکی از روش‌ها، استفاده از جدول HTML است.
این قطعاً پیچیده‌ترین قسمت این آموزش است، با این وجود یادگیری آن مطمئناً در طولانی‌مدت نتیجه خواهد داد.
با این حساب، جدول هنوز هم می‌تواند راهی مفید برای ارائه مطالب در صفحه شما باشد.
یک جدول از چه چیزی تشکیل شده است؟
هنگام ترسیم جدول باید عنصری را با برچسب باز <table> باز کنیم. در داخل این برچسب، جدول را با استفاده از سطرهای جدول، <tr> و سلول‌ها، <td> ساختار می‌دهیم.
یک مثال از جدول HTML به شرح زیر است:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<table> <tr> <td>Row 1 - Column 1</td> <td>Row 1 - Colunm 2 </td> <td>Row 1 - Column 3 </td> </tr> <tr> <td>Row 2 - Column 1</td> <td>Row 2 - Column 2</td> <td>Row 2 - Column 3</td> </tr> </table> |
این یک جدول ۲ ردیفی با ۳ سلول در هر ردیف تولید می‌کند.
برچسب‌های جدول
با این حال مراقب این برچسب‌ها باشید تا بتوانید آنها را بشناسید و همزمان با پیشرفت مهارت‌های خود از آنها استفاده کنید.
| برچسب جدول | معنا | مکان |
|---|---|---|
| thead | سربرگ جدول | بالای جدول |
| tbody | بدنه جدول | محتوای جدول |
| tfoot | پابرگ جدول | پایین جدول |
| colgroup | گروه ستون | درون جدول |
| th | هدر جدول | سلول داده برای هدر جدول |
جدول‌ها، حاشیه‌ها، فاصله‌ها معمولاً با استفاده از CSS سبک می‌شوند که در آموزش‌های بعدی به آن خواهیم پرداخت.
ساخت جدول
در ویرایشگر متن خود به یک صفحه جدید در صفحه index.html بروید. کد HTML زیر را وارد کنید:
|
1 2 3 4 5 6 7 8 9 10 |
<table> <tr> <td>Row 1 - Column 1</td> <td>Row 1 - Column 2 </td> </tr> <tr> <td>Row 2 - Column 1</td> <td>Row 2 - Column 2</td> </tr> </table> |
فایل را ذخیره کرده و پیش‌نمایش آن را در مرورگر مشاهده کنید.
تبریک می‌گوییم! شما یک جدول ایجاد کردید.
منبع: HTML.com
