طراحی وب

جدول html

جدول html را چطور طراحی کنیم؟

آموزش html  درس شانزدهم

تعریف یک جدول html

 جدول html با تگ <table> تعریف شده است.هر ردیف جدول با تگ <tr> تعریف شده است. هدر جدول با تگ <th> تعریف شده است. به طور پیش فرض، عناوین جدول درشت و متمرکز هستند. داده جدول / سلول با تگ <td> تعریف شده است.

جدول html
جدول html

مثال:

<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
توجه: عناصر <td>  داده های ظاهر جدول هستند.
آنها می توانند تمام انواع عناصر HTML را دارا باشند:  متن، تصاویر، لیست ها، جداول دیگر، و غیره

جدول HTML – اضافه کردن یک مرز یا border

اگر مرز برای جدول مشخص نکنید، بدون مرز نمایش داده خواهد شد.

مرز با استفاده از خصوصیت  border در  CSS تنظیم می شود:

مثال:

table, th, td {
    border: 1px solid black;
}
 به یاد داشته باشید که هم برای جدول و هم برای سلول های جدول مرزها را تعریف کنید.

HTML Table – Collapsed Borders

اگر می خواهید مرزها تبدیل به یک مرز شوند خصوصیت border-collapse را در css  اضافه کنید.
مثال:
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

جدول HTML – اضافه کردن  فضای سلول


padding   در سلول فضای بین محتوای سلول و مرزهای آن را مشخص می کند.
اگر شما padding  را مشخص نکنید، سلول های جدول بدون padding نمایش داده خواهند شد.برای تنظیم padding، از ویژگی padding  در css استفاده کنید:
مثال:
th, td {
    padding: 15px;
}

چپ چین کردن هدینگ ها

به طور پیش فرض عناوین جدول درشت و متمرکز هستند.
برای قرار دادن عنوان ها در سمت چپ از خاصیت text-align در  css  استفاده کنید.
مثال :
th {
    text-align: left;
}

جدول html – اضافه کردن فضای border

Border spacing  فضای بین سلول ها را مشخص می کند.
برای تنظیم فاصله Border spacing در جدول از ویژگی border-spacing در  css  استفاده می کنیم:
مثال :

 

table {
    border-spacing: 5px;
}
برچسب ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پیشنهاد ویژه

تا 75% ذخیره کنید

این آخرین فرصت استفاده از تخفیف 75% است
این پیشنهاد را ببینید
این پیشنهاد فقط یکبار به شما نمایش داده می‌شود !
close-link
بستن