آموزش جداول HTML

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

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

<table>برچسب یک جدول HTML را معرفی میکند

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

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

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

مثال

یک جدول HTML ساده:

<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ویژگی 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 ، از paddingویژگی CSS استفاده کنید :

th, td {
  padding: 15px;
}

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

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

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

th {
  text-align: left;
}

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

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

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

table {
  border-spacing: 5px;
}

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

برای ایجاد یک بازه سلول بیش از یک ستون ، از colspanویژگی استفاده کنید :

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

جدول HTML – سلولی که در بسیاری از ردیف ها قرار دارد

برای ایجاد یک بازه سلول بیش از یک ردیف ، از rowspanویژگی استفاده کنید :

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

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

برای افزودن عنوان به جدول ، از <caption>برچسب استفاده کنید :

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</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>94</td>
  </tr>
</table>

اکنون می توانید سبک خاصی را برای این جدول تعریف کنید:

#t01 {
  width: 100%;
  background-color: #f1f1c1;
}

و سبک های بیشتری اضافه کنید:

#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}

منبع