گروه مقاله : HTML 4
تاريخ انتشار : 1394/02/21 - 10:45
كد :422

جداول در HTML

Number First Name Last Name Points
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50
 
جداول توسط تگ <table> تعریف می شوند.
 
یک جدول حاوی سطرهایی می باشد که با تگ <tr> مشخص می شوند و هر سطر شامل تعدادی سلول است که با تگ <td> مشخص می شوند.
td مخفف "table data" است و حاوی داده های سلول ها می باشد. تگ <td> می تواند حاوی متن، لینک، تصویر، لیست ها، فرم ها، جداول دیگر و غیره باشد.
 
مثال :
 
<!DOCTYPE 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>
 
نتیجه :
 
 
Jill Smith 50
Eve Jackson 94
John Doe 80
 
جدول با خصوصیت border 
 
اگر برای جدول خصوصیت border را مشخص نکنید، جدول بدون لبه نمایش داده می شود(مانند مثال بالا).
با استفاده از خصوصیت border می توانیم به جدول لبه اضافه کنیم.
 
مثال :
 
<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>
</table>
 
نتیجه :
 
Jill Smith 50
Eve Jackson 94
John Doe 80
 
نکته : توجه داشته باشید که اگر بخواهید طبق استاندارهای HTML پیش بروید نباید از ویژگی border استفاده کنید.
برای تنظیم لبه ها بهتر است از CSSها استفاده کنید.
 
با استفاده از خاصیت border در CSS می توانید لبه ها را تنظیم نمایید:
 
table, th, td {
    border: 1px solid black;
}
 
نکته : به یاد داشته باشید که لبه ها را هم برای برای دور جدول و هم برای تمام سلول های جدول تنظیم کنید.
 
تبدیل لبه های دو خطی به یک خطی
 
برای تبدیل لبه های دو خطی به یک خطی در CSS از خصوصیت  border-collapse استفاده کنید :
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
نتیجه :
 
Jill Smith 50
Eve Jackson 94
John Doe 80
 
تنظیم فاصله ی محتوای سلول ها از لبه (Cell Padding) 
 
خصوصیت padding در CSS فاصله محتویات یک سلول را از لبه هایش تنظیم می کند.
اگر این خصوصیت را تنظیم نکنید، فاصله محتوی تا لبه، صفر در نظر گرفته می شود.
 
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}
 
Jill Smith 50
Eve Jackson 94
John Doe 80
 
عنوان ها در جدول (Headings) 
 
عنوان ها در جدول به وسیله تگ <th> تعریف می شوند. 
اکثر مرورگرها به صورت پیش فرض متن داخل <th>( عنوان های جدول) را به صورت bold و وسط چین نمایش می دهند.
 
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>
 
Firstname Lastname Points
Jill Smith 50
Eve Jackson 94
John Doe 80
 
برای چپ چین کردن عنوان از خصوصیت text-align در CSS استفاده کنید :
 
th {
    text-align: left;
}
 
Firstname Lastname Points
Jill Smith 50
Eve Jackson 94
John Doe 80
 
تنظیم فاصله سلول ها از یکدیگر
 
برای تنظیم فاصله بین سلول های جدول از خصوصیت border-spacing در CSS استفاده کنید :
 
table {
    border-spacing: 5px;
}
 
نکته : اگر لبه های جدول به صورت دو تایی باشد خصوصیت border-spacing تاثیری روی آن نخواهد داشت.
 
چگونگی تعریف سلول های جدول که بیش از یک ستون را شامل می شوند
 
برای این کار باید از خصوصیت colspan در CSS استفاده کنید :
 
<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>
 
Name Telephone
Bill Gates 555 77 854 555 77 855
 
چگونگی تعریف سلول های جدول که بیش از یک سطر را شامل می شوند
 
برای این کار از خصوصیت 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/>
 
Name: Bill Gates
Telephone: 555 77 854
555 77 855
 
اضافه کردن عنوان به یک جدول
 
برای اضافه کردن عنوان به جدول از تگ  <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>
 
Monthly savings
Month Savings
January $100
February $50
 
تگ <caption> بلافاصله بعد از تگ <table> می آید.
 
تگ های جدول در HTML
 
تگ توضیحات
<table> تعریف جدول
<th> تعریف عنوان جدول
<tr> تعریف سطر جدول
<td> تعریف سلول جدول
<caption> تعریف تیتر جدول
<colgroup> برای فرمت دهی یک یا تعدادی از ستون ها کاربرد دارد
<col> برای فرمت دهی یک یا تعدادی از ستون ها کاربرد دارد
<thead> عناوین ستون های یک جدول  را گروه بندی می کند
<tbody> محتویات بدنه یک جدول را گروه بندی می کند
<tfoot> محتویات انتهای ستون های یک جدول  را گروه بندی می کند
نظرات كاربران :
نام :
ايميل :
متن نظر : * 
 
متن بالا را وارد نماييد*