آموزش Html؛ آموزش کار با جدول در HTML

آموزش Html؛ آموزش کار با جدول در HTML

در جلسه دهم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با جدول در HTML از وب سایت آموزش برنامه نویسی سورس باران. با ما همراه باشید…

آموزش Html؛ آموزش کار با جدول در 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 شامل متن، تصویر، فهرست یا حتی جداول دیگر باشند.

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

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

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

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

کادرهای مشترک جدول در Html

اگر می‌خواهید تمام کادرهای جدولتان در یک یک کادر ادغام شود باید از ویژگی border-collapse در CSS استفاده کنید:

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

افزودن فاصله به سلول ها جدول در Html

با استفاده از قابلیت cell padding می‌توانید بین محتوا و کادر سلول‌های جدول یک فاصله مشخص کنید. اگر این padding را مشخص نکنید سلول‌های جدول و محتوای آن‌ها بدون فاصله نمایش داده خواهند شد. برای ایجاد فاصله از ویژگی padding در CSS استفاده کنید:

th, td {
  padding: 15px;
}

چپ چین کردن تیتر در HTML

تیتر جدول‌ها به صورت پیش‌فرض به صورت پررنگ و در وسط قرار دارند. برای چپ‌چین کردن تیترها از ویژگی text-align استفاده کنید:

th {
  text-align: left;
}

ایجاد فاصله بین کادرها (border spacing) در Html

با استفاده از ویژگی border-spacing در CSS به ایجاد فاصله بین سلول‌های یک جدول می‌پردازید:

table {
  border-spacing: 5px;
}

به یاد داشته باشید که اگر جدول شما دارای collapsed border باشد این ویژگی هیچ تاثیری در آن نخواهد داشت.

گسترش سلول در بیش از یک ستون جدول در Html

اگر می‌خواهید یکی از سلول‌های جدولتان در بیش از یک ستون گسترش یابد از ویژگی 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>

گسترش سلول در بیش از یک ردیف جدول در Html

اگر می‌خواهید یکی از سلول‌های جدولتان در بیش از یک ردیف گسترش یابد از ویژگی 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) به جدول در Html

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

تعریف استایل خاص برای یک جدول در Html

برای تعریف یک استایل خاص برای یک جدول خاص، ویژگی 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;
}

امیدواریم که این مطلب مورد توجه دوستان قرار گرفته باشد…

منبع : W3Schools

لیست جلسات قبل آموزش Html

1. آموزش اصول اولیه و عناصر HTML
2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
3. آموزش کار با پاراگراف و استایل در Html
4. آموزش کار با قالب بندی متن در Html
5. آموزش کار با کامنت در HTML
6. آموزش کار با کامنت در HTML
7. آموزش کار با رنگ ها در HTML
8. آموزش کار با تصاویر در HTML
9. آموزش کار با لینک در HTML
10. آموزش کار با جدول در HTML
11. آموزش کار با لیست ها در HTML
12. آموزش کار با عناصر Block و Inline در HTML
13. آموزش کار با عنصر Class در HTML
14. آموزش Html؛ آموزش iframe در HTML
15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
16. آموزش کار با عنصر Head در HTML
17. آموزش Layout در HTML
18. آموزش طراحی سایت ریسپانسیو در HTML
19. آموزش عناصر کد کامپیوتر در HTML
20. آموزش موجودیت (Entities) در HTML
21. آموزش نمادها (Symbols) در HTML
22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
23. آموزش رمزگذاری URL در HTML
24. آموزش کامل کار با فرم ها در HTML
25. آموزش انواع ورودی (Input) در HTML
26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

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