جداول HTML

جداول HTML به توسعه دهندگان وب اجازه می دهد تا داده ها را در سطرها و ستون ها مرتب کنند.

مثال:

شرکت مخاطب کشور
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Centro comercial Moctezuma Roland Mendel Austria
Centro comercial Moctezuma Helen Bennett UK
Centro comercial Moctezuma Yoshi Tannamuri Canada
Centro comercial Moctezuma Giovanni Rovelli Italy

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

تگ <table> یک جدول HTML را تعریف می کند.

هر ردیف در جدول با تگ <tr> تعریف می شود.

هر سربرگ جدول با تگ <th> و هر داده / سلول با تگ <td> تعریف می شود.

به صورت پیش فرض، متن در عنصر <th> پررنگ و وسط چین نشان داده می شود.

همچنین حالت پیش فرض متن در عنصر <td> منظم و چپ چین است.

<table style="width:100%">
  <tr>
    <th>نام</th>
    <th>نام خانوادگی</th>
    <th>سن</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 در CSS استفاده کنید.

table, th, td {
  border: 1px solid black;
}
امتحان کنید

 

به یاد داشته باشید که هم برای جدول و هم برای سلول های جدول مرز تعیین کنید.

 

مرزهای جمع شده در جدول HTML

برای اینکه مرزها به یک مرز سقوط کنند ، خاصیت border-collapse  در CSS را اضافه کنید:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
امتحان کنید

 

افزودن لایه سلول به جدول HTML

بالشتک سلول فضای بین محتوای سلول و مرزهای آن را مشخص می کند.

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

برای تنظیم padding ، از ویژگی CSS padding استفاده کنید:

th, td {
  padding: 15px;
}
امتحان کنید

 

عناوین چپ چین در جدول HTML

به طور پیش فرض ، عناوین جدول پررنگ و مرکز هستند.

برای تراز بندی سمت چپ عناوین جدول ، از ویژگی text-align در CSS استفاده کنید:

th {
  text-align: left;
}
امتحان کنید

 

افزودن فاصله مرزی به جدول HTML

فاصله مرزی فضای بین سلول ها را مشخص می کند.

برای تنظیم فاصله مرز برای یک جدول ، از ویژگی CSS border-spacing استفاده کنید:

table {
  border-spacing: 5px;
}
امتحان کنید

 

توجه: اگر جدول دارای مرزهای فروپاشی شده باشد ، border-spacing هیچ تأثیری ندارد.