ایجاد جدول در HTML

جدولها روشی برای طرح بندی و مرتب کردن اطلاعات صفحه وب برای نمایش میباشند، که از سطرها و ستونهایی برای قرارگیری داده ها استفاده میکنند و با استفاده از تگهای table ، tr و td ساخته میشوند

جداول HTML به عنوان یک روش برای تنظیم و مرتب کردن اطلاعات در یک صفحه وب استفاده میشوند. جدولها را میتوان برای ایجاد طرح بندی کل صفحه وب استفاده کرد، که در حال حاضر چون CSS بطور گسترده پشتیبانی میشود و میتواند کارها را با کد کمتر انجام دهد ، خیلی توصیه نمیشوند.

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

تگ اساسی باز و بسته شدن جدول "table" میباشد. تگهای "tr" هر سطر جدول را شروع و تمام میکند و تگهای "td" برای داده های جدول استفاده میشود و سلول ها را شروع و تمام میکند.

هنگامیکه ما از این سه برچسب با هم استفاده میکنیم ، اولین جدولمان را خواهیم داشت. ( در تمامی مثالها به جای() از علامتهای <> استفاده کنید)

(table)

(tr)
(td)

      این اولین جدول ما میباشد

(/td)
(/tr)
(/table)

این مثال شامل جدولی با یک خانه ( یک سطر تنها) است.

پس... حالا چه نکته ای در جدول ها مهم است؟ داده بیشتر! برای گنجاندن داده بیشتر ما ابتدا باید سطر و ستونهای بیشتری اضافه کنیم تا بتوانیم آن داده ها را سازماندهی کنیم. همچنین، ما میتوانیم از تگهای "th" برای ایجاد سلول "عنوان جدول" در جدول استفاده کنیم.

(table)

(tr)
(th)Question:(/th)
(th)Answer:(/th)
(/tr)
(tr)
(td)What do you get when you cross a snake and a kangaroo?(/td)
(td)A jump rope!(/td)
(/tr)
(tr)
(td)What did one plate say to the other plate?(/td)
(td)Lunch is on me!(/td)
(/tr)
(/table)

حالا جدولها باید بیشتر احساس شوند، اما صبر کنید این همچنان ادامه دارد!

♦ Rowspan و colspan ( ادغام سطرها و ادغام ستونها )

حالا ما به قسمت گیج کننده میرسیم. آیا به یاد دارید قبلا ذکر کردیم که هر ردیف در جدول باید به همان تعداد از سلولها شکسته شود؟ اگر شما بخواهید که یک ردیف ، دو ستون داشته باشد و سطر بعدی فقط یک سلول داشته باشد؟ از "colspan" میتوان برای ترکیب چند ستون و تولید این اثر استفاده کرد، "rowspan" میتواند دو سطر، یا بخشی از دو سطر را به یک سلول بزرگ ،ترکیب کند .

میتوانید مثال زیر را اجرا کنید و نتیجه را ببینید تا برای شما بیشتر قابل درک باشد:

(table) (tr)
(th)Column 1(/th)
(th)Column 2(/th)
(th)Column 3(/th)
(/tr) (tr)
(td rowspan="2")Rowspan="2"(/td)
(td)1st Row, 2nd Cell(/td)
(td)1st Row, 3rd Cell(/td)
(/tr) (tr)
(td colspan="2")2nd Row, 2nd & 3rd Cells (Colspan="2")(/td)
(/tr) (/table)

♦ Table manners ( مسلک جدول )

اگر یکی از سلولهای جدول شما خالی است و هیچ داده ای برای گنجاندن در آن ندارید ، مرورگر شما ممکن است باعث شود سلول شما خنده دار به نظر برسد. شما میتوانید با قرار دادن یک فضای HTML در این سلول ، این مشکل را برطرف سازید. این فضا، ";nbsp&" میباشد.

شما میتوانید اندازه حاشیه اطراف جدولتان را افزایش یا کاهش دهید، حتی آنرا نقطه چین کنید یا آن را ناپدید کنید. صفت "border" داخل تگ باز جدول تعریف میشود. مقدار صفر، برای مثال، ("table border="0) حاشیه را ناپدید میکند، در حالیکه مقدار 5 ، ("table border="5) حاشیه را خیلی ضخیم میکند.

"cellpadding" ( حاشیه خالی سلول ) میتواند فضای خالی بیشتری داخل هر سلول ایجاد کند. این هم داخل برچسب آغازی جدول تعریف میشود: ("table cellpadding="5).

"cellspacing" فضایی را داخل حاشیه اطراف جدول و بین هر سلول اضافه میکند، و در تگ آغازی باز کننده جدول تعریف میشود: ("table cellspacing="5).