آنچه در این مطلب می‌خوانید:

جدول 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 – اضافه کردن یک مرز یا 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 استفاده کنید:

مثال: