شما اینجا هستید

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

برای ایجاد جدول از عنصر <table> بهره میگیریم.

یک جدول در چندین سطر بخش بندی میشود که هر سطر را میتوان با تگ <tr> تعریف کرد.

هر سطر از جدول هم به یک یا چند داده جدول بخش بندی میشود که هر داده را میتوان با تگ <td> مشخص کرد.

یک سطر از جدول میتواند به عنوان هدر جدول بکار گرفته شود که هدر را با تگ <th> مشخص میکنیم.

داده جدول یا همان تگ <td> شامل اطلاعات جدول است.

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

<html>

<body>


<table style="width:100%">

  <tr>

    <td>Jill</td>

    <td>Smith</td>                          

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>                      

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>                             

    <td>80</td>

  </tr>

</table>


</body>

</html>

 

حاشیه برای جداول

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

پس برای افزودن حاشیه به جداول میتوانیم از ویژگی border بهره ببریم.

<html>

<body>


<table border="1" style="width:100%">

  <tr>

    <td>Jill</td>

    <td>Smith</td>                          

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>                      

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>                             

    <td>80</td>

  </tr>

</table>


</body>

</html>

 

به جای استفاده از ویژگی  border که منسوخ هم شده! بهتر است از  CSS استفاده کنید.

برای افزودن حاشیه به جداول در CSS از صفت border استفاده میکنیم.

<html>

<head>

<style>

table, th, td {

    border: 1px solid black;

}

</style>

</head>

<body>


<table style="width:100%">

  <tr>

    <td>Jill</td>

    <td>Smith</td>                          

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>                      

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>                             

    <td>80</td>

  </tr>

</table>


</body>

</html>

 

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

اگر میخواهید که حاشیه های جدول به داخل هم بروند و به شکل یک خط (به جای دو خط) نمایش داده شوند، border-collapse را به  CSS اضافه کنید:

<html>

<head>

<style>

table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

}

</style>

</head>

<body>


<table style="width:100%">

  <tr>

    <td>Jill</td>

    <td>Smith</td>                          

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>                      

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>                             

    <td>80</td>

  </tr>

</table>


</body>

</html>

 

برای افزودن فضای خالی بین محتوای سلول و حاشیه های دورش از  padding که یک ویژگی CSS است استفاده میکنیم.

<html>

<head>

<style>

table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

}

th, td {

    padding: 15px;

}

</style>

</head>

<body>


<table style="width:100%">

  <tr>

    <td>Jill</td>

    <td>Smith</td>                          

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>                      

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>                             

    <td>80</td>

  </tr>

</table>


<p>Try to change the padding to 5px.</p>


</body>

</html>

 

عنوانهای جدول

عنوان جدول با تگ <th> تعریف میگردد.

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

<html>

<head>

<style>

table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

}

th, td {

    padding: 5px;

}

</style>

</head>

<body>


<table style="width:100%">

  <tr>

    <th>Firstname</th>

    <th>Lastname</th>                  

    <th>Points</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>                          

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>                      

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>                             

    <td>80</td>

  </tr>

</table>


</body>

</html>

 

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

th {
    text-align: left;
}

ایجاد فضای خالی بین سلول ها

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

table {
    border-spacing: 5px;
}

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

گسترده کردن یک سلول بر روی چند ستون

برای گسترده کردن یک سلول بر روی بیش از یک ستون، از ویژگی colspan استفاده نمایید که  colspan ویژگی آن میشود و مقدار آن میتواند یک عدد باشد که تعداد ستونهاسی تحت پوشش آن سلول را مشخص میکند.

<html>

<head>

<style>

table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

}

th, td {

    padding: 5px;

    text-align: left;   

}

</style>

</head>

<body>


<h2>Cell that spans two columns:</h2>

<table style="width:100%">

  <tr>

    <th>Name</th>

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

  </tr>

  <tr>

    <td>Bill Gates</td>

    <td>555 77 854</td>

    <td>555 77 855</td>

  </tr>

</table>


</body>

</html>

همینطور که در مثال میبینید سلول  telephone بر روی دو تا از ستونها گسترده شده.

گسترده کردن یک سلول بر روی چند سطر

برای گسترده کردن یک سلول بر روی چند سطر، از ویژگی  rowspan استفاده نمایید، که ویژگی آن rowspan است و مقدار آن میتواند یک عدد که تعداد سطرها را مشخص میکند باشد.

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</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 به جدول یک استایل ویژه برای یک جدول خاص تعریف کنید.

سپس برای استفاده از آن در CSS میتوانید با گذاشتن یک علامت # قبل از شناسه ای که به جدول داده اید استیل دلخواهتان را به جدول بدهید.

<html>

<head>

<style>

table {

    width:100%;

}

table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

}

th, td {

    padding: 5px;

    text-align: left;

}

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

    background-color: #eee;

}

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

   background-color:#fff;

}

table#t01 th       {

    background-color: black;

    color: white;

}

</style>

</head>

<body>


<table>

  <tr>

    <th>First Name</th>

    <th>Last Name</th>                

    <th>Points</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>                          

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>                      

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>                             

    <td>80</td>

  </tr>

</table>


<br>


<table id="t01">

  <tr>

    <th>First Name</th>

    <th>Last Name</th>                

    <th>Points</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>                          

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>                      

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>                             

    <td>80</td>

  </tr>

</table>


</body>

</html>

 

دیدگاه‌ها

صفحه‌ها

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.