| قدم قبلی > | < قدم بعدی |
تعریف یک جدول HTML
در این آموزش html به جداول در HTML می پردازیم.
جدول HTML با برچسب <table> تعریف شده است.
هر ردیف جدول با برچسب <tr> تعریف شده است. هدر جدول با برچسب <th> تعریف شده است. به طور پیش فرض، عناوین جدول درشت و متمرکز هستند. داده جدول / سلول با تگ <td> تعریف شده است.
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ | <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>۵۰</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>۹۴</td> </tr> </table> |
نکته: عناصر <td> ظروف داده شده از جدول هستند. آنها می توانند تمام انواع عناصر HTML را داشته باشند متن، تصاویر، لیست ها، جداول دیگر، و غیره
جدول HTML – اضافه کردن یک حاشیه
اگر مرز برای جدول مشخص نکنید، بدون مرز نمایش داده خواهد شد.
مرز با استفاده از خصوصیت مرزی CSS تنظیم می شود:
۱ ۲ ۳ | table, th, td { border: ۱px solid black; } |
به یاد داشته باشید حاشیه ها را برای هر دو جدول و سلول های جدول تعریف کنید.
جدول HTML – مرزهای درهم و برهم
اگر می خواهید مرزها به یک مرز سقوط کنند، ویژگی border-collapse را اضافه کنید:
۱ ۲ ۳ ۴ | table, th, td { border: ۱px solid black; border-collapse: collapse; } |
جدول HTML – اضافه کردن لایه بندی سلول
محفظه سلول فضای بین محتوای سلول و مرزهای آن را مشخص می کند.
اگر شما polding را مشخص نکنید، سلولهای جدول بدون پدینگ نمایش داده خواهند شد.
برای تنظیم padding، از ویژگی padding در css استفاده کنید:
۱ ۲ ۳ | th, td { padding: ۱۵px; } |
جدول HTML – عنوان چپ چین
به طور پیش فرض، عناوین جدول درشت و متمرکز هستند.
برای چسباندن عنوانهای جدول با چپ، از ویژگی text-align در css استفاده کنید:
۱ ۲ ۳ | th { text-align: left; } |
جدول HTML – اضافه کردن فاصله
فاصله بین فضای بین سلول ها را مشخص می کند.
برای تنظیم فاصله مرز برای یک جدول، از ویژگی border-spacing در css استفاده کنید:
۱ ۲ ۳ | table { border-spacing: ۵px; } |
نکته: در صورتی که جدول مرزهای فروپاشیده شده است، فاصله مرزی تاثیری ندارد.
سلول هایی که تعداد زیادی ستون را در آن قرار می دهند
برای ایجاد فاصله سلولی بیش از یک ستون، از ویژگی colspan استفاده کنید:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ | <table style="width:100%"> <tr> <th>Name</th> <th colspan="۲">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>۵۵۵۷۷۸۵۴</td> <td>۵۵۵۷۷۸۵۵</td> </tr> </table> |
سلول هایی که تعداد زیادی سطر را در آن قرار می دهند
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ | <table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="۲">Telephone:</th> <td>۵۵۵۷۷۸۵۴</td> </tr> <tr> <td>۵۵۵۷۷۸۵۵</td> </tr> </table> |
اضافه کردن عنوان
برای اضافه کردن یک عنوان به یک جدول، از تگ <caption> استفاده کنید:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ | <table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$۱۰۰</td> </tr> <tr> <td>February</td> <td>$۵۰</td> </tr> </table> |
یک استایل ویژه برای یک جدول
برای تعریف یک سبک خاص برای یک جدول خاص، یک ویژگی id را به جدول اضافه کنید:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ | <table id="t01"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>۹۴</td> </tr> </table> |
۱ ۲ ۳ ۴ | table#t01 { width: ۱۰۰%; background-color: #f1f1c1; } |
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ | table#t01 tr:nth-child(even) { background-color: #eee; } table#t01 tr:nth-child(odd) { background-color: #fff; } table#t01 th { color: white; background-color: black; } |
| گام قبلی > | < گام بعدی |
هنوز دیدگاهی برای این مطلب ثبت نشده است.