جداول HTML جلسه هفتم

جداول HTML جلسه هفتم

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

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

 

جداول HTML جلسه هفتم جداول HTML جلسه هفتم جداول HTML جلسه هفتم table

جداول HTML جلسه هفتم :تگ جدول < table > :

اين تگ برای ايجاد جدول ها در صفحه استفاده می شود . به طور کلی جدول ها به ۲ منظور ايجاد می شوند :

  1. ايجاد يک جدول معمولی با تعدادی خانه ، برای نمايش مطالب مورد نظر در سطرها و ستون های جدا از هم .
  2. تقسيم فضای صفحه با استفاده از چهارچوب جدول ها برای منظم چيدن محتويات صفحه . به طور مثال مطالب اين صفحه در تعدادی خانه جدول مرتب شده است . در اين حالت می توان با عدم تعيين حاشيه ( border ) برای خانه های جدول ، از چهارچوب جدول ها استفاده کرد در حالی که آنها عملا از ديد کاربر مخفی هستند .

جدول ها برای هر منظوری به کار روند ، بايد با استفاده از تگ < table > ايجاد شوند . هر جدول مجموعه ای از سطرها و ستون هاست . برای ايجاد يک سطر جديد از يک تگ < tr > استفاده می شود که هر خانه ( ستون ) درون سطر هم توسط يک تگ < td > مشخص می شود .

جداول HTML جلسه هفتم جداول HTML جلسه هفتم جداول HTML جلسه هفتم table1

جداول HTML و عنصر حاشیه

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

 

جداول HTML جلسه هفتم: عناوین جدول HTML

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

تگ <caption> از صفت زیر پشتیبانی میکند.

align : محل قرارگیری عنوان جدول را مشخص می کند و مقادیر زیر را می پذیرد:

  • right : عنوان در سمت راست جدول قرار میگیرد.
  • left : عنوان در سمت چپ جدول قرار میگیرد.
  • top : عنوان در بالای جدول نمایش داده می شود.
  • bottom : عنوان جدول در پایین جدول نمایش داده می شود.

یا

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

تمام مرورگرهای بزرگ ، متن را در عنصر <th> به صورت متمرکز و ضخیم نشان می دهند.

 

گروه بندی ردیفی و ستونی جداول

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

گروه بندی ردیفی

ما می توانیم ردیف های جدول را به سه نوع گروه ردیفی تقسیم کنیم : foot , body , head و برای اینکار از سه تگ <tfoot> , <tbody> , <thead> استفاده می کنیم.

هر سه این عنصر ها داری صفات align و valign می باشند که در جلسه قبل به آن ها اشاره شده است.

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

نکته :

همیشه ردیف هایی که داخل تگقرار می گیرند بالای جدول و ردیف هایی که داخل تگقرار می گیرند در پایین جدول ظاهر میشوند.

نکته :

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

تگ های جدول HTML

تگ توضیحات
<table> تعریف جدول
<th> تعریف سلول سربرگ در جدول
<tr> تعریف ردیف در یک جدول
<td> تعریف یک سلول در جدول
<caption> یک عنوان جدول معرفی می کند
<colgroup> یک گروه یا بیش از یک گروه از ستون های داخل جدول برای قالب بندی ، مشخص می کند
<col> مشخصات ستون برای هر ستون در داخل یک عنصر <colgroup> را مشخص می کند
<thead> محتوای یک سربرگ را در جدول گروه بندی می کند
<tbody> محتوای یک بدنه را در جدول گروه بندی می کند
<tfoot> محتوای یک پانوشت را در جدول گروه بندی می کند
آموزش HTML

یک نظر

  1. همیشه ردیف هایی که داخل تگقرار می گیرند بالای جدول و ردیف هایی که داخل تگقرار می گیرند در پایین جدول ظاهر میشوند.
    نکته :

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

    اشتباه تایپی هستن یا من سردر نمیارم ((; من دارم خیلی دقیق دروس رو میخونم لطفا کمکم کنین.
    valign هم تو ضیح داده نشده ):

دیدگاه خود را بیان کنید