HTMLطراحی سایتگوناگون
۱۰-جداول در HTML

جداول در HTML
جداول به وسیله تگ <table> تعریف می شوند.
یک جدول حاوی سطرهایی می باشد (که با تگ <tr> مشخص می شوند) و هر سطر شامل تعدادی سلول است (که با تگ <td> مشخص می شوند)
td مخفف “table data” است و حاوی داده های سلول ها می باشد. تگ <td> می تواند حاوی متن، لینک، تصویر، لیست ها، فرم ها، جداول دیگر و غیره باشد.
تذکر: دقت داشته باشید در فرایند کد نویسی در سایت تیچ وب ممکن است قطعه کد نوشته شده برای هر آموزش فقط همان بخش آموزش در قطعه کد نوشته شده باشد ولی شما برای انجام اموزش حتما باید قطعه کد را به شکل اصلی خود یعنی داخل تگ های <html>و<body> بنویسید.
قطعه کد ساخت جدول به شکل زیر میباشد :
1 2 3 4 5 6 7 8 9 10 | <table> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> |
خصوصیت Border
اگر شما خصوصیت Border را برای جدولی مشخص نکنید، جدول بدون لبه نمایش داده می شود. گاهی اوقات این مورد می تواند کاربردی باشد، اما بیشتر مواقع ما نیاز به نمایش لبه ها داریم.
برای نمایش لبه ها باید خصوصیت Border را تنظیم کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <body> <table border="1" style="width:300px"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html> |
- تصویر قطعه کد بالا
- توجه داشته باشید برای تنظیم لبه ها بهتراست از CSS استفاده کنید.
با استفاده از خصوصیت border در CSS می توانید لبه ها را تنظیم نمایید:
1 2 3 4 5 6 | <style> table,th,td { border:1px solid black; } </style> |
تبدیل لبه های دوخطی به یک خطی
با استفاده از خصوصیت border-collapse در CSS می توانید، لبه های دوخطی جدول را به لبه های یک خطی تبدیل کنید:
1 2 3 4 5 6 7 | <style> table,th,td { border:1px solid black; border-collapse:collapse } </style> |
تنظیم محتوای جدول از لبه
با استفاده از خصوصیت padding در CSS می توانید فاصله محتویات یک سلول را از لبه هایش تنظیم کنید.
اگر این خصوصیت را تنظیم نکنید، فاصله محتوی تا لبه، صفر در نظر گرفته می شود.
1 2 3 4 | th,td { padding:15px; } |
تنظیم فاصله سلول ها از یکدیگر
با استفاده از خصوصیت border-spacing در CSS می توانید فاصله سلول ها از یکدیگر را تنظیم کنید.
1 2 3 4 | table { border-spacing:5px; } |
عنوان جدول (Header)
اطلاعات سرتیتر در یک جدول به وسیله تگ <th> تعریف می شود.
بیشتر مرورگرها متن را در عنصر <th> به صورت برجسته (bold) و وسط چین نمایش می دهند.
1 2 3 4 5 6 7 8 9 10 11 12 | <table style="width:300px"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> |
با استفاده از خصوصیت text-align در CSS، می توانیم سرتیترهای جدول بالا را در سمت چپ تنظیم کنیم:
1 2 3 4 | th { text-align:left; } |
آموزش های دیگر پیرامون ساخت جدول:
- برای اینکه جدول ساخته شده حاشیه ای نداشته باشد باید در بخش borderمقدار آن را برابر صفر قرار دهید.
1 | <table border="0"> |
- هرگاه خواستید داخل خانه های جدول یک جدول تو در توی دیگر بسازید فقط کافیست قطعه کد ساخت جدول را در همان خانه مجدد پیاده سازی کنید.