خانه / آموزش HTML / بخش شانزدهم-جداول HTML

مهندس زهرا بهرامی

تاریخ بروزرسانی: ۱۲ آبان ۱۳۹۷ تعداد بازدید : 19 بازدید بدون دیدگاه

بخش شانزدهم-جداول 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>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

</table>

نکته: عناصر <td> ظروف داده شده از جدول هستند. آنها می توانند تمام انواع عناصر HTML را داشته باشند متن، تصاویر، لیست ها، جداول دیگر، و غیره

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

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

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

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

table, th, td {

border: 1px solid black;

}

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

جدول HTML – مرزهای درهم و برهم

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

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

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

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

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

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

th, td {
    padding: 15px;
}

th, td {

padding: 15px;

}

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

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

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

th {
    text-align: left;
}

th {

text-align: left;

}

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

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

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

table {
    border-spacing: 5px;
}

table {

border-spacing: 5px;

}

نکته: در صورتی که جدول مرزهای فروپاشیده شده است، فاصله مرزی تاثیری ندارد.

سلول هایی که تعداد زیادی ستون را در آن قرار می دهند

برای ایجاد فاصله سلولی بیش از یک ستون، از ویژگی 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>

<tr>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

سلول هایی که تعداد زیادی سطر را در آن قرار می دهند

<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>

<tr>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan="2">Telephone:</th>

</tr>

<tr>

</tr>

</table>

اضافه کردن عنوان

برای اضافه کردن یک عنوان به یک جدول، از تگ <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>

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</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>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Jackson</td>

</tr>

</table>

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

table#t01 {

width: 100%;

background-color: #f1f1c1;

}

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

table#t01 tr:nth-child(even) {

background-color: #eee;

}

table#t01 tr:nth-child(odd) {

background-color: #fff;

}

table#t01 th {

color: white;

background-color: black;

}

گام قبلی >

< گام بعدی