HTML5 مقدماتی

آموزش HTML – آشنایی با جدول ها در HTML

آموزش HTML5
آموزش HTML5

آموزش HTML – آشنایی باجدول ها در HTML

جدول ها برای نمایش و نگهداری اطلاعات به کار می روند. اطلاعاتی مانند مشخصات فردی ، مشخصات خرید و هر چیزی که برای نمایش دادن نیاز به نظم و ترتیب داشته باشد.

آموزش HTML – آشنایی با جدول ها در HTML
آموزش HTML – آشنایی با جدول ها در HTML

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

آموزش HTML – آشنایی با جدول ها در HTML
آموزش HTML – آشنایی با جدول ها در HTML

هر جدول دارای ۳ بخش :سطر جدول ، داده های جدول و عنوان جدول می باشد .

  • سطر جدول (TR) : سطرهای که در جدول ها وجود دارند را با استفاده از تگ <tr> تعریف می کنند .
  • داده های جدول (TD) : سطرها به سلول های داده ها تقسیم می شوند و هر سلول با استفاده از تگ <td> تعریف می شود.
  • عنوان جدول (TH) : سطر های جدول با استفاده از تگ <th> به عنوان تبدیل می شود.

به تیکه کد زیر دقت کنید . با استفاده از تگ <th> سه عنوان تعریف کردیم و سپس با استفاده از تگ <tr> سه سطر برای جدول تعریف کردیم و در آخر با استفاده از تگ <td> جدول خود را پر کردیم.

 

نتیجه کد بالا به صورت زیر میاشد .

آموزش HTML – آشنایی با جدول ها در HTML
آموزش HTML – آشنایی با جدول ها در HTML

لازم به ذکر است که داده های جدول ها می تواند مقادیری از قبیل متن ، عکس ، لیست و  یا حتی یک جدول دیگر باشد.

آموزش HTML – آشنایی با جدول ها در HTML
آموزش HTML – آشنایی با جدول ها در HTML

نکته : عنصر جدول دارای صفتی به نام border می باشد اگر در زمان تعریف جدول از این صفت استفاده نشود ، حاشیه های جدول هیچ خطی قرار نمی گیرد و جدول شما ظاهر خوبی نخواهد داشت .پس در زمان تعریف جدول  border را وارد نمایید تا جدول شما به درستی نمایش داده شود.

آموزش HTML – آشنایی با جدول ها در HTML
آموزش HTML – آشنایی با جدول ها در HTML

اگر از خاصیت border استفاده نکنید جدول به صورت زیر نمایش داده خواهد شد.

آموزش HTML – آشنایی با جدول ها در HTML
آموزش HTML – آشنایی با جدول ها در HTML

توجه داشته باشید که با توجه به رشد روز افزون css و html برای تغیر سبک ها و از جمله border از css استفاده می شود .
خاصیت فروپاشی مرز (border-collapse) در جدول ها
این خاصیت در جدول ها نمایش مرز (border) بین سلول های جدول را تغییر می دهد.این خاصیت دارای ۲ مقدار می باشد :

  • مدل جدا (separated model) : این مدل حالت سنتی مرز (border) جدول ها میباشد.با استفاده از این خاصیت هر کدام از سلول های جدول دارای فاصله ی خاصی نسبت به سلول های دیگر می شوند .
آموزش HTML – آشنایی با جدول ها در HTML
آموزش HTML – آشنایی با جدول ها در HTML

زمانی که از خاصیت  separated استفاده می کنید جدول شما به صورت زیر نمایش داده می شود .

آموزش HTML – آشنایی با جدول ها در HTML
آموزش HTML – آشنایی با جدول ها در HTML

لازم به ذکر است که به جای این خاصیت از خاصیت border-spacing در css استفاده می شود.
مدل بدون مرز (collapsed border) : در این مدل مرز های سلول های جدول با هم یکی می شوند به صورت یک مرز به نمایش در می آیند .

آموزش HTML – آشنایی با جدول ها در HTML
آموزش HTML – آشنایی با جدول ها در HTML

زمانی که از خاصیت collapsed استفاده می کنید جدول شما به صورت زیر نمایش داده می شود.

آموزش HTML – آشنایی با جدول ها در HTML
آموزش HTML – آشنایی با جدول ها در HTML

لازم به ذکر است که به جای این خاصیت از خاصیت border-style در css استفاده می شود.
نکته : اگر در هنگام تعریف جدول از هیچ کدام از خاصیت های بالا استفاده نکنید به طور پیش فرض خاصیت مدل جدا (separated) انتخاب می شود.
برخی از صفت های جدول ها در html
لازم به ذکر است که این صفت ها دیگر کاربردی ندارند و برای تغییر دادن ظاهر جدول از خصوصیات css استفاده می کنند .در این قسمت فقط برای آشنایی شما با این صفت ها ، آنها را برای شما وارد کردیم .
صفت align
این صفت برای چینش جدول استفاده می شود . این صفت دارای مقادیر زیر می باشد.

  • چپ (left) : برای قرار گرفتن جدول در سمت چپ سند HTML
  • وسط (center) : برای قرار گرفتن جدول در وسط سند HTML
  • راست (right) : برای قرار گرفتن جدول در سمت راست سند HTML

برای مثال برای سمت چپ قرار گرفتن جدول باید از کد زیر استفاده کرد.

آموزش HTML – آشنایی با جدول ها در HTML
آموزش HTML – آشنایی با جدول ها در HTML

و برای قرار گرقتن جدول در سمت راست باید به صورت زیر نوشت :

آموزش HTML – آشنایی با جدول ها در HTML
آموزش HTML – آشنایی با جدول ها در HTML

صفت bgcolor
از این صفت برای تغییر دادن رنگ پس زمینه ی جدول استفاده می شود.برای تغییر دادن رنگ می توانید نام رنگ را وارد نمایید یا باید کد ۱۶ بیتی رنگ مورد نظر را وارد نمایید .

آموزش HTML – آشنایی با جدول ها در HTML
آموزش HTML – آشنایی با جدول ها در HTML

نتیجه کد بالا به صورت زیر می باشد.

آموزش HTML – آشنایی با جدول ها در HTML
آموزش HTML – آشنایی با جدول ها در HTML

صفت border
از این صفت برای اندازه مرز بین سلول ها استفاده می شود .مبنای اندازگیری این مرز ها پیکسل می باشد . (در تصاویر بالا موجود می باشد)
صفت cellpadding
از این صفت برای تعریف فاصله بین محتوای سلول ها و مرز بین سلول ها استفاده می شود.

آموزش HTML – آشنایی با جدول ها در HTML
آموزش HTML – آشنایی با جدول ها در HTML

نتیجه کد بالا به صورت زیر می باشد.

آموزش HTML – آشنایی با جدول ها در HTML
آموزش HTML – آشنایی با جدول ها در HTML

صفت cellspacing
این صفت برای تعریف (به صورت پیکسل و یا درصد) فاصله ی بین دو سلول جدول چه از نظر افقی و چه از نظر عمودی استفاده می شود .

آموزش HTML – آشنایی با جدول ها در HTML
آموزش HTML – آشنایی با جدول ها در HTML

نتیجه کد بالا به صوریت زیر می باشد.

آموزش HTML – آشنایی با جدول ها در HTML
آموزش HTML – آشنایی با جدول ها در HTML

پیروز باشید، طراح باشی


پیروز باشید!
طراح باشی

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

طراح‌باشی

نوشتن دیدگاه

برای نوشتن دیدگاه کلیک کنید

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

پربازدیدها