HTMLطراحی سایتگوناگون

۱۰-جداول در HTML

جداول در HTML

 

جداول به وسیله تگ <table> تعریف می شوند.

یک جدول حاوی سطرهایی می باشد (که با تگ <tr> مشخص می شوند) و هر سطر شامل تعدادی سلول است (که با تگ <td> مشخص می شوند)

td مخفف “table data” است و حاوی داده های سلول ها می باشد. تگ <td> می تواند حاوی متن، لینک، تصویر، لیست ها، فرم ها، جداول دیگر و غیره باشد.

 

تذکر: دقت داشته باشید در فرایند کد نویسی در سایت تیچ وب ممکن است قطعه کد نوشته شده برای هر آموزش فقط همان بخش آموزش در قطعه کد نوشته شده باشد ولی شما برای انجام اموزش حتما باید قطعه کد را به شکل اصلی خود یعنی داخل تگ های <html>و<body> بنویسید.

 

قطعه کد ساخت جدول به شکل زیر میباشد :

 

 

 

 

خصوصیت Border

 

اگر شما خصوصیت Border را برای جدولی مشخص نکنید، جدول بدون لبه نمایش داده می شود. گاهی اوقات این مورد می تواند کاربردی باشد، اما بیشتر مواقع ما نیاز به نمایش لبه ها داریم.

برای نمایش لبه ها باید خصوصیت Border را تنظیم کنیم.

  • تصویر قطعه کد بالا

  • توجه داشته باشید برای تنظیم لبه ها بهتراست از CSS استفاده کنید.

 

با استفاده از خصوصیت border در CSS می توانید لبه ها را تنظیم نمایید:

 

 


 

 تبدیل لبه های دوخطی به یک خطی

 

با استفاده از خصوصیت border-collapse در CSS می توانید، لبه های دوخطی جدول را به لبه های یک خطی تبدیل کنید:

 


 

تنظیم محتوای جدول از لبه

 

با استفاده از خصوصیت padding در CSS می توانید فاصله محتویات یک سلول را از لبه هایش تنظیم کنید.

اگر این خصوصیت را تنظیم نکنید، فاصله محتوی تا لبه، صفر در نظر گرفته می شود.

 


 

تنظیم فاصله سلول ها از یکدیگر

 

با استفاده از خصوصیت border-spacing در CSS می توانید فاصله سلول ها از یکدیگر را تنظیم کنید.

 


 

عنوان جدول (Header)

 

اطلاعات سرتیتر در یک جدول به وسیله تگ <th> تعریف می شود.

بیشتر مرورگرها متن را در عنصر <th> به صورت برجسته (bold) و وسط چین نمایش می دهند.

 

 

با استفاده از خصوصیت text-align در CSS، می توانیم سرتیترهای جدول بالا را در سمت چپ تنظیم کنیم:

 

 

 


آموزش های دیگر پیرامون ساخت جدول:

 

  • برای اینکه جدول ساخته شده حاشیه ای نداشته باشد باید در بخش borderمقدار آن را برابر صفر قرار دهید.
 

  • هرگاه خواستید داخل خانه های جدول یک جدول تو در توی دیگر بسازید فقط کافیست قطعه کد ساخت جدول را در همان خانه مجدد پیاده سازی کنید.

 


بخش بعدی

بخش قبلی

به این پست امتیاز دهید.
برچسب ها
مشاهده بیشتر

رضااسدزاده

رضااسدزاده هستم مهندس نرم افزار علاقه مند به فضای وب از تاریخ 12شهریور سال96 سایت تیچ وب رو راه اندازی کردیم با هدف گسترش اطلاعات نرم افزاری و زبان های برنامه نویسی . امیدوارم با حمایت شما دوستان بتونیم به این هدف بزرگ دست پیدا کنیم.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

همچنین ببینید

بستن
بستن