جدول ها در HTML

مثال :

جدول ها
<table>
  <tr>
    <th>شرکت</th>
    <th>مدیر عامل</th>
    <th>کشور</th>
  </tr>
  <tr>
    <td>آلفردز فوترکیست</td>
    <td>ماریا آندرس</td>
    <td>آلمان</td>
  </tr>
  <tr>
    <td>سنترال کومرشیال موچزوما</td>
    <td> فرانسیسکو چنگ</td>
    <td>مکزیک</td>
  </tr>
    
</table>
مشاهده مثال

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

یک جدول در زبان HTML با استفاده از تگ <table> تعریف می شود.
هر ردیف از جدول با تگ <tr> تعریف شده و سرتیتر آن نیز با تگ <th> قابل تعریف است. سرتیتر های جداول به صورت پیش فرض ، ضخیم و وسط چین هستند. هر سلول/داده از ردیف های جداول نیز با تگ <td> تعریف می شود.

مثال :

تعریف یک جدول
<table style="width:100%" dir="rtl">
  <tr>
    <th>نام </th>
    <th>نام خانوادگی</th> 
    <th>سن</th>
  </tr>
  <tr>
    <td>آرمان</td>
    <td>علایی</td>
    <td>32</td>
  </tr>
</table>
مشاهده مثال


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

اضافه کردن خط حاشیه به جدول در HTML

اگر برای جدول مود نظر خط حاشیه تعیین نکنید ، جدول بدون حاشیه نمایش داده خواهد شد. خط حاشیه با استفاده از صفت border در CSS تنظیم می شود.

مثال :

خط حاشیه جدول
table, th, td {
    border: 1px solid black;
}
مشاهده مثال

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

 

خطوط حاشیه تکی در جدول های HTML

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

مثال :

خط حاشیه تک خط
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
مشاهده مثال

اضافه کردن فضای حاشیه

padding در جداول بین محتوا و حاشیه سلول های جدول در HTML فضای خالی ایجاد می کند. اگر padding تعیین نشود ، سلول های جدول بدون فضای حاشیه ، نمایش داده می شوند.
برای تنظیم padding از صفت padding در CSS استفاده می شود.

مثال :

فضای حاشیه سلول ها
th, td {
    padding: 15px;
}
مشاهده مثال

 

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

سرتیتر های جداول به صورت پیش فرض ضخیم و وسط چین هستند. برای راست چین یا چپ چین کردن سرتیتر های جدول از صفت text-align در CSS استفاده می کنیم

مثال :

تیتر راست چین جدول
th {
    text-align: left;
}
مشاهده مثال

 

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

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

مثال :

فضای بین سلول های جدول
table {
    border-spacing: 5px;
}
مشاهده مثال

نکته ! اگر جدول شامل border-collapse می شود ، border-spacing تاثیری نخواهد داشت.

 

سلول های دارای ستون های متعدد

در HTML برای اضافه کردن ستون در یک سلول از صفت colspan استفاده می کنیم .

مثال :

سلول های دارای ستون های متعدد
<table style="width:100%">
  <tr>
    <th>نام</th>
    <th colspan="2">تلفن</th>
  </tr>
  <tr>
    <td>جناب خان</td>
    <td>061-11112222</td>
    <td>061-11112222</td>
  </tr>
</table>
مشاهده مثال

 

سلول های دارای ردیف های متعدد

برای اضافه کردن ردیف های بیشتر به یک سلول در جدول های HTML از صفت rowspan استفاده می کنیم.

مثال :

سلول دارای دو ردیف
<table style="width:100%">
  <tr>
    <th>نام : </th>
    <td> جناب خان</td>
  </tr>
  <tr>
    <th rowspan="2">تلفن : </th>
    <td>061-11112222</td>
  </tr>
  <tr>
    <td>061-11113333</td>
  </tr>
</table>
مشاهده مثال

 

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

برای اضافه کردن یک عنوان یا همان caption از تگ <caption> استفاده می کنیم.

مثال :

عنوان جدول
<table style="width:100%">
  <caption>پس اندازهای ماهانه</caption>
  <tr>
    <th>ماه</th>
    <th>پس انداز</th>
  </tr>
  <tr>
    <td>فروردین</td>
    <td>75 T</td>
  </tr>
  <tr>
    <td>اردیبهشت</td>
    <td>60 T</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 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
   background-color:#fff;
}
table#t01 th {
    background-color: black;
    color: white;
}
مشاهده مثال


خلاصه درس :

عنصر <table> در HTML برای تعریف جدول
عنصر <tr> در HTML برای تعریف ردیف های جدول
عنصر <td> در HTML برای تعریف سلول های جدول
عنصر <th> در HTML برای تعریف سرتیتر جدول
عنصر <caption> در HTML برای تعریف عنوان  جدول
صفت border  در CSS برای تعریف خطوط حاشیه
صفت border-collapse در CSS برای تکی کردن خطوط حاشیه
صفت padding در CSS برای تعریف فاصله بین محتوا و خطوط حاشیه
صفت text-align در CSS برای تعریف تراز بندی متن سلول
صفت border-spacing در CSS برای تعریف فاصله میان سلول ها
صفت colspan  در CSS برای تعریف چند ستون برای یک سلول
صفت rowspan  در CSS برای تعریف چند ردیف برای یک سلول
صفت id در CSS برای تعریف با ویژگی خاص یک جدول
 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط