اگر بخواهیم عرض یک جدول را تغییر دهیم می توانیم از شناسه width استفاده کنیم. با اضافه کردن این شناسه به تگ جدول می توانیم مقدار عرض جدول را مشخص کنیم. این مقدار می تواند در مقیاس پیکسل باشد یا به صورت درصد. برای تغییر دادن ارتفاع جدول نیز میتوانیم از شناسه height استفاده کنیم. برای مثال اگر بخواهیم یک جدول با عرض 500 پیکسل و ارتفاع 50 پیکسل داشته باشیم می توانم به صورت زیر عمل کنیم:
در اینجا می بینید که برخلاف متن درون جدول که متن کوتاهی است عرض جدول نسبتاً زیاد است (همان 500 پیکسلی که برای آن تعریف کردیم):
محتویات جدول |
اگر بخواهیم نحوه قرار گرفتن محتویات درون جدول را تعیین کنیم می توانیم از شناسه های زیر را در تگ <td> استفاده کنیم:
حالا این شناسه ها را در یک جدول به کار می بریم:
می توانید نحوه قرارگیری محتویات سلولها را در جدول زیر ملاحظه کنید:
متمایل به چپ | متمایل به مرکز | متمایل به راست |
اگر بخواهیم نحوه قرارگیری محتویات سلولها را به صورت عمودی تنظیم کنیم، می توانیم از شناسه valign استفاده کنیم:
در مثال زیر می توانید نحوه استفاده از شناسه های بالا در یک جدول را ببینید:
این هم جدول نهایی:
متمایل به بالا | متمایل به وسط | متمایل به پایین |
نحوه قرارگیری عمودی محتویات سلولها زمانی مفید خواهد بود که تعداد سطرهای محتویات سلولهای مختلف در یک ردیف جدول با هم برابر نباشند. در حقیقت زمانی که همه سلولها دارای یک تعداد سطر باشند و نحوه قرار گیری عمودی محتویات آنها به یک صورت است.
شناسه های دیگری نیز وجود دارد که می توانیم در تگ td استفاده کنیم:
به یک مثال توجه کنید:
این هم جدول به دست آمده. همانطور که می بینید سلولی که محتوی عکس است در کنار دو سلول دیگر قرار گرفته است نه در قسمت بالای سلول دوم:
سلول اول | |
سلول دوم |
حال فرض کنید می خواهیم یک جدول مانند زیر داشته باشیم:
سلول اول | ||
سلول دوم | سلول سوم | سلول چهارم |
برای ایجاد این جدول در تگ <td> در ردیف اول از شناسه "3"=colspan استفاده می کنیم. با این کار سلول موجود در ردیف اول به اندازه سه سلول در عرض کشیده می شود.
در اینجا می توانید کد مربوط به این جدول را ببینید:
شما می توانید در صورت تمایل رنگ زمینه جدول، سطر، ستون یا هر سلول را در جدول که بخواهید تغییر دهید.
برای تعیین کردن رنگ زمینه برای جدول باید این شناسه bgcolor را در تگ جدول به کار ببرید و رنگ مورد نظر خود را در این شناسه به کار ببرید.
برای مثال اگر بخواهیم جدولی با زمینه زرد ایجاد کنیم، می توانیم به این صورت عمل کنیم:
جدول زیر به دست می آید:
محتویات جدول |
قابل ذکر است که اگر به جای تگ ابتدایی جدول از تگ زیر نیز استفاده کنیم همان نتیجه را به دست می آوریم:
اگر بخواهیم هر سلول رنگ زمینه مربوط به خودش را داشته باشد باید شناسه مربوط به رنگ زمینه را به تگ <td> اضافه کنیم. برای نمونه به جدول زیر توجه کنید:
محتویات سلول اول | محتویات سلول دوم |
آیا می خواهید کد مربوط به این جدول را ببینید:
در آخر می خواهیم رنگ زمینه هر ردیف را تغییر دهیم. برای این کار شناسه مربوط به رنگ زمینه را در تگ <tr> قرار می دهیم:
این هم جدول به دست آمده:
صورتی | این ردیف صورتی است |
خاکستری | این ردیف خاکستری است |