آشنایی با جداول در HTML

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


 مثالی از یک جدول در HTML

Country Contact Company
Germany Maria Anders Alfreds Futterkiste
Mexico Francisco Chang Centro comercial Moctezuma
Austria Roland Mendel Ernst Handel
UK Helen Bennett Island Trading
Canada Yoshi Tannamuri Laughing Bacchus Winecellars
Italy Giovanni Rovelli Magazzini Alimentari Riuniti

خودتان امتحان کنید


تعریف یک جدول در 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>
خودتان امتحان کنید

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


اضافه کردن border به جدول 

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

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

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

به خاطر داشته باشید که border را هم برای جدول و هم سلول های آن تعریف کنید(همانند مثال قبل)


خاصیت border-collapse در جداول 

همانطور که در امتحان کنید مثال قبل دیدید تعریف خط دور برای جداول و سلول ها باعث ایجاد خطوط جداگانه ای برای هم جدول و هم سلول ها میشود. در این صورت خطوط به صورت دوبل مشاهده میشود. برای حل این مشکل میتوان از خاصیت border-collapse در CSS کمک گرفت :

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

اضافه کردن padding به سلول های جدول

Padding در سلول همان فضای بین محتوای سلول و خط دور آن است.

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

برای مقداردهی padding از خاصیت padding در CSS استفاده میکنیم.

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

ترازبندی سرتیتر ها در جداول

به صورت پیشفرض سرتیتر ها در جداول بولد و وسط چین هستند.

برای تراز بندی متون در سرتیتر ها از خاصیت text-align در CSS استفاده میکنیم.

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

نکته : ترازبندی متون در سلول های td نیز همانند ترازبندی سرتیتر هاست.


استفاده از border-spacing در جداول 

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

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

نکته : اگر از خاصیت border-collapse در جدول استفاده کرده باشید، تنظیم border-spacing هیچ اثری در خروجی نخواهد داشت.


استفاده از صفت colspan در جداول 

اگر قرار باشد سلول خاصی بیش از فضای یک ستون را اشغال کند از صفت 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>
خودتان امتحان کنید

استفاده از صفت rowspan در جداول 

اگر قرار باشد سلول خاصی بیش از فضای یک ردیف را اشغال کند از صفت 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>
خودتان امتحان کنید

اضافه کردن caption به جدول

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

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

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> برای تعریف جدول استفاده کنید
  • از عنصر <tr> برای تعریف ردیف های جدول استفاده کنید
  • از عنصر <td> برای تعریف داده های جدول استفاده کنید
  • از عنصر <th> برای تعریف سرتیتر های جدول استفاده کنید
  • از عنصر <caption> برای تعریف عنوان جدول استفاده کنید
  • از خاصیت border در CSS برای تعریف خط دور در جدول استفاده کنید.
  • از خاصیت border-collapse در CSS برای از بین بردن خط دورهای دوتایی استفاده کنید.
  • از خاصیت padding برای اضافه کردن فضا به سلول ها استفاده کنید.
  • از خاصیت text-align در CSS برای ترازبندی متن در سلول ها استفاده کنید.
  • از خاصیت border-spacing در CSS برای تنظیم فضای بین سلولی استفاده کنید.
  • از صفت colspan برای زمانی که سلول خاصی بیش از فضای یک ستون را اشغال میکند استفاده کنید.
  • از صفت rowspan برای زمانی که سلول خاصی بیش از فضای یک ردیف را اشغال میکند استفاده کنید.
  • از صفت id برای تعریف یک جدول منحصر به فرد استفاده کنید.
منتشر شده در ۱۲ خرداد ۱۳۹۶ حمید رضا ملکی ۷۷۲ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده