جدول های HTML توسعه دهندگان وب را قادر می سازد تا اطلاعات را در سطر ها و ستون ها دسته بندی کنند.
تعریف یک جدول HTML
تگ table یک جدول را تعریف می کند. هر سطر جدول با تگ tr تعریف می شود. هر عنوان جدول با تگ th تعریف می شود. هر داده در جدول با تگ td تعریف می شود. بصورت پیش فرض در متن عنصرهای th در وسط و به بصورت برجسته قرار دارند. بصورت پیش فرض در متن عنصرهای td اندازه شان معمولی بوده و چپ چین می باشند.
تعریف table در این مثال نشان داده شده است. مشاهده می کنید که در هر tr تعدادی td وجود دارد که در آن اطلاعات جدول را قرار می دهیم. در مثال بالا، از width برای بزرگ کردن اندازه جدول استفاده شده است. نتیجه کد بالا به شکل زیر است:
جدول در HTML – اضافه کردن خطوط
برای اضافه کردن یک خط به جدول، باید از مشخصه border استفاده کنید:
در این مثال بین تمام td و tr ها، border قرار داده شده است تا اطلاعات بهتر نمایش داده شوند. نتیجه کد بالا به شکل زیر است:
جدول HTML – Collapsed Borders
با استفاده از قابلیت Collapsed Borders می توانید خطوط جدول که دو خطی هستند را به یک خط تبدیل کنید.
Collapsed Borders این اجازه را به ما می دهد تا خط هایی که در کنار یکدیگر هستند، به یک خط تبدیل کنیم که در بخش زیر قابل مشاهده است:
جدول HTML - Cell Padding
Cell Padding فاصله بین داده و خط های کنارش را تعیین می کند. اگر این فاصله گذاری را تعیین نکنید، اطلاعات درون جدول بدون فاصله از لبه های جدول نمایش داده خواهند شد. برای تنظیم کردن padding، از مشخصه ی padding استفاده کنید:
جدول HTML – عناوین چپ چین
بصورت پیش فرض، عناوین جدول ها وسط چین و برجسته هستند. برای چپ چین کردن آن ها باید از مشخصه ی text-align استفاده کنید:
در این مثال به همه th و td ها padding: 5px داده شده تا اطلاعات موجود در جدول، از لبه جدول، 5 px فاصله داشته باشند. همچنین به همه th ها text-align: left داده شده تا اطلاعات درون th ها در سمت چپ نمایش داده شوند. در بخش زیر خروجی کار مشخص است:
جدول HTML – اضافه کردن Border Spacing
Border Spacing فاصله بین بخش های جدول را تعیین می کند. برای این کار، از مشخصه border-spacing استفاده کنید:
در این مثال، در حقیقت با استفاده از border-spacing، فاصله بین th ها را به 15px افزایش دادیم. این کار برای نمایش بهتر و واضح تر اطلاعات موجود در جدول انجام شده است. نتیجه کد بالا به شکل زیر است:
جدول HTML – بخشی که چند ستون را در بر می گیرد
برای اینکه کاری کنید که یک بخش چند ستون را در بر بگیرد، از ویژگی colspan استفاده کنید:
در این مثال، با استفاده از ویژگی colspan، کاری کردیم تا یک th بتواند به صورت افقی 2 برابر فضا بگیرد. عدد درون colspan به صورت دلخواه قابل تنظیم است که نتیجه آن به شکل زیر است:
جدول HTML – بخشی که چند سطر را در بر می گیرد
برای اینکه کاری کنید که یک بخش چند سطر را در بر بگیرد، از ویژگی rowspan استفاده کنید:
در این مثال نیز، با استفاده از ویژگی colspan، کاری کردیم تا یک th بتواند به صورت عمودی 2 برابر فضا بگیرد. عدد درون rowspan به صورت دلخواه قابل تنظیم است که نتیجه آن به شکل زیر است:
جدول HTML – اضافه کردن کپشن
برای اضافه کردن کپشن، از تگ caption استفاده کنید:
از caption برای ارائه توضیحات بیشتر درون table استفاده می شود. در این مثال نیز از caption استفاده شده که نتیجه آن در زیر قابل مشاهده است:
استایل دهی اختصاصی به یک جدول
برای تعریف کردن یک استایل به خصوص برای یک جدول، یک ویژگی id به جدول اضافه کنید، سپس از طریق style به آن id ، استایل های اختصاصی را اضافه می کنیم:
در این مثال به جدول "id="t01 داده شده و در بخش استایل به آن عرض 100% و رنگ پس زمینه f1f1c1 # داده شده است. نتیجه این مثال را در زیر مشاهده می کنید:
