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

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

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

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

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

پیشنمایش

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

 

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

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

پیشنمایش

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

 

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

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

پیشنمایش

 

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

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

پیشنمایش

 

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

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

 

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

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

پیشنمایش

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

 

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

اگر می‌خواهید یکی از سلول‌های جدولتان در بیش از یک ستون گسترش یابد از ویژگی colspan استفاده کنید:

پیشنمایش

 

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

اگر می‌خواهید یکی از سلول‌های جدولتان در بیش از یک ردیف گسترش یابد از ویژگی rowspan استفاده کنید:

پیشنمایش

 

اضافه کردن کپشن (Caption) به جدول در Html

برای اضافه کردن کپشن به جدول خود از تگ <caption> استفاده کنید:

پیشنمایش

توجه کنید که تگ <caption> باید بلافاصله پس از تگ <table> وارد شود.

 

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

برای تعریف یک استایل خاص برای یک جدول خاص، ویژگی id را به جدول اضافه کنید:

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

پیشنمایش

حالا استایل‌های بیشتری اضافه کنید:

پیشنمایش

 

Description
<table>Defines a table
<th>Defines a header cell in a table
<tr>Defines a row in a table
<td>Defines a cell in a table
<caption>Defines a table caption
<colgroup>Specifies a group of one or more columns in a table for formatting
<col>Specifies column properties for each column within a <colgroup> element
<thead>Groups the header content in a table
<tbody>Groups the body content in a table
<tfoot>Groups the footer content in a table

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

منبع : 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 مهندس رحمانی