جدول 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>

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

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

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

مثال:

table, th, td {
    border: 1px solid black;
}

HTML Table – Collapsed Borders

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

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

th, td {
    padding: 15px;
}

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

th {
    text-align: left;
}

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

table {
    border-spacing: 5px;
}