جداول 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).