خانه / مقالات اموزشی / html / آموزش table
آموزش HTML5
آموزش HTML5

آموزش table

کار با جداول (table) در html

جداول یکی از مهمترین عناصر موجود در html به شمار می روند و معمولا برای نظم دهی به سایر عناصر موجود در صفحه همچون فرم ها، لینک ها، تصاویر، متن ها و … استفاده می شود. در ابتدا جداول به منظور قالب بندی و طرح بندی کلس صفحات کاربرد ویژه ای داشتند اما امروزه با ظهور CSS و پیدایش روش های نوین طرح بندی کاربردشان تنها به نمایش منظم سایر عناصر محدود شده است.

در این مطلب با نحوه استفاده جداول و تگ ها و صفت های مربوط به آن ها آشنا خواهیم کرد و در ادامه ویژگی های پیشرفته تر آن ها یعنی گروه بندی های ردیفی و ستونی را بررسی میکنیم.

ساختار اساسی جدول

ساختار کلی یک جدول در مثال زیر آمده است :

 

تیجه در مرورگر :

1x1.trans آموزش HTML (قسمت 8) : کار با جداول در  HTML (جلسه اول)

در حالت کلی می توان گفت که جدول ها در HTML از ردیف هایی که سلول ها در آن ها قرار دارند تشکیل می شوند.

تگ <table> : برای ایجاد یک جدول استفاده می شود. در واقع ابتدا و انتهای هر جدول را مشخص می کند. تگ <table> از صفت های زیر پشتیبانی می کند:

border: میزان ضخامت حاشیه اطراف جدول را مشخص میکند.

dir: جهت گیری متون داخل جدول را مشخص می کند. و میتواند یکی از مقادیر rtl یا ltr را اختیار کند.

bordercolordark : معمولا حاشیه اطراف جدول از دو رنگ تیره و روشن ایجاد می شود. این صفت رنگ تیره تر حاشیه(border) را تعیین می کند.

bordercolorlight : رنگ روشن border را مشخص میکند.

bordercolor : رنگ اصلی border را تعیین میکند و آن را از حالت دو رنگی خارج میکند. در واقع border را فقط به یک رنگ نمایش می دهد.

cellpadding : عددی صحیح بر حسب px را به عنوان مقدار می پذیرد و فضای محتوای داخل سلولها و دیواره هایشان را کنترل می کند.

cellspaceing : عددی صحیح بر حسب px را به عنوان مقدار می پذیرد و فضای بین هر سلول را کنترل میکند.

تصویر زیر موقعیت صفت های  cellpadding و cellspacing را به شما نشان می دهد.

1x1.trans آموزش HTML (قسمت 8) : کار با جداول در  HTML (جلسه اول)

align : محل قرار گیری جدول در صفحه (یا عنصری که جدول در آن قرار دارد ) را تعیین میکند و یکی از مقادیر زیر را می پذیرد:

  • right : جدول را در سمت راست قرار می دهد.
  • center : جدول را در وسط قرار می دهد.
  • left : جدول را در سمت چپ قرار می دهد.

width : عرض جدول را برحسب px یا درصد مشخص می کند.

height : ارتفاع جدول را برحسب px یا درصد مشخص می کند.

bgcolor : رنگی را برای پس زمینه جدول مشخص می کند.

summary : رشته ای ساده که شمال توضیحاتی در مورد محتویان جدول است را به عنوان مقدار می پذیرد.

background : آدرس عکسی را به عنوان مقدار می پذیرد و آن را در پس زمینه جدول قرار می دهد.

frame : مشخص می کند که کدام یک از border های چهار طرف جدول نمایش داده شود. این صفت مقادیر زیر را می پذیرد:

  • void : هیچ کدام از borderها را نمایش نمی دهد.(مقدار پیشفرض)
  • hsides : فقط borderهای افقی را نمایش می دهد.
  • vsides : فقط borderهای عمودی را نمایش می دهد.
  • rhs : فقط border سمت راست را نمایش می دهد.
  • lhs : فقط border سمت چپ را نمایش می دهد.
  • above : فقط border بالا را نمایش می دهد.
  • below : فقط border پایینی را نمایش می دهد.
  • box یا border : همه ی borderها را نمایش می دهد.

rules : مشخص می کند که کدام یک از حاشیه های داخلی جدول (اطراف ردیف، گروهی از ردیف ها، سلول ها و گروهی از سلول ها) نمایش داده شوند. این صفت مقادیر زیر را می پذیرد:

  • none : هیچ کدام از borderهای داخلی را نمایش نمی دهد.(مقدار پیشفرض)
  • all : تمام borderهای داخلی را نمایش می دهد.
  • groups : فقط حاشیه های گروهی از ردیف ها یا گروهی از ستون ها را نمایش می دهد.
  • cols : فقط border ستون ها را نمایش می دهد.
  • rows : فقط border ردیف ها را نمایش می دهد.

 تگ <tr> : برای ایجاد یک ردیف، و همیشه در داخل تگ <table> استفاده می شود. هر جدول می بایست حداقل یک ردیف داشته باشد. این تگ صفت های زیر را داراست :

align : چگونگی چینش متن در هر یک از سلول های آن ردیف را مشخص می کند. و می تواند یکی از مقادیر زیر را بپذیرد :

  • left
  • right
  • center
  • justify

bgcolor : رنگ پس زمینه ردیف را مشخص می کند.

valign : تراز عمودی متن در هر یک از سلول های یک ردیف را مشخص می کند، و مقادیر زیر را می پذیرد.

  • top : محتوای سلول را با بابلای سلول تراز می کند.
  • middle :محتوای سلول را با وسط سلول تراز می کند.
  • bottom : محتوای سلول را با پایین سلول تراز می کند.
  • baseline : محتوای سلول را با اولین خطی که محتوای سلول ها از آن آغاز می شود همتراز می کند.

تگ های <td> و <th> : از این دو تگ برای ایجاد سلول های داخل هر ردیف استفاده می شود. تگ <td> برای سلول هایی که شامل داده های جدولی ساده و تگ <th> برای سلول هایی که شامل عنوان جدولی هستند استفاده می شود.

به صورت پیشفرض محتوای سلول های از نوع <th> به صورت bold و وسط چین و سلول های <td> به صورت نرمال و چپ چین نمایش داده می شود. این دو تگ صفت های مشابهی دارند. که در زیر بیان می شود.:

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

درباره آموزشگاه نوین آی تی

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

آموزش برنامه نویسی جاوا

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

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

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net