جدول html
آنچه در این مطلب میخوانید:
جدول 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>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
توجه: عناصر <td> داده های ظاهر جدول هستند.
آنها می توانند تمام انواع عناصر HTML را دارا باشند: متن، تصاویر، لیست ها، جداول دیگر، و غیره
آنها می توانند تمام انواع عناصر 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; }
۱
۲
۳
۴
۵
میانگین امتیازات ۳ از ۵
از مجموع ۲ رای
برچسب ها:
HTML
دیدگاهتان را بنویسید