استفاده از جدول ها در HTML

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

یک جدول HTML با استفاده از یک تگ <table> تعریف می شود. هر ردیف جدول با استفاده از تگ <tr> تعریف می شود. یک عنوان در جدول، با استفاده از تگ <th> تعریف می شود. به طور پیش فرض، عنوان های جدول برجسته(Bold) و وسط چین هستند.

<table style="width:100%">
  <tr>
    <th>نام</th>
    <th>نام خانوادگی</th>
    <th>سن</th>
  </tr>
  <tr>
    <td>احسان</td>
    <td>عباسی</td>
    <td>30</td>
  </tr>
  <tr>
    <td>ماهان</td>
    <td>البرزی</td>
    <td>1</td>
  </tr>
</table>

جدول HTML - اضافه کردن یک کادر(Border)

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

کادرهای جمع شده(Collapsed) در جدول HTML

اگر بخواهید کادرها جمع شوند و به صورت یک خط تکی تبدیل شوند، ویژگی سی اس اس border-collapse را به کدها اضافه کنید:

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

اضافه کردن فاصله ی Padding به جدول

th, td {
  padding: 15px;
}

چینش سمت چپ برای جدول های HTML

th {
  text-align: left;
}

 جدول HTML - اضافه کردن فاصله گذاری کادرها

table {
  border-spacing: 5px;
}

جدول در HTML - سلول هایی که در چند ستون گسترش می یابند

<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">تلفن:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

 اضافه کردن یک کپشن برای یک جدول

<table style="width:100%">
  <caption>درآمد ماهانه</caption>
  <tr>
    <th>ماه</th>
    <th>درآمد</th>
  </tr>
  <tr>
    <td>اسفند</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>فروردین</td>
    <td>$50</td>
  </tr>
</table>

 استفاده از یک استایل خاص برای جدول

<table id="t01">
  <tr>
    <th>نام</th>
    <th>نام خانوادگی</th>
    <th>سنe</th>
  </tr>
  <tr>
    <td>ایلیا</td>
    <td>عباسی</td>
    <td>8</td>
  </tr>
</table>

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

خلاصه مقاله