جستجو برای:
سبد خرید 0
  • خانه
  • دوره هاداغ
    • آموزش صفر تا صد html css
    • هوش برنامه نویسی نوین
    • آموزش تدوین ویدیو
    • همه ی محصولات
  • دوره ی حضوری
    • آموزش وردپرس
    • آموزش html css
    • آموزش php
    • آموزش جاوا اسکریپت
  • ویدیو های آموزشی
  • تماس با ما
    • تبریز - نصف راه روبروی شهرداری جنب نمایندگی ایران خودرو ساختمان مهدیه طبقه ی 6 واحد B (ملاقات حضوری فقط با هماهنگی قبلی)

      09338776735

      info@wppush.ir

      اینستاگرام
      کانال آپارات
  • آموزش رایگان

برای یاد گیری طراحی سایت از اینجا شروع کن

روز
ساعت
دقیقه
ثانیه
جشنواره فروش ویژه دوره ی html css به پایان رسید
مشاهده ی دوره

ورود

گذرواژه خود را فراموش کرده اید؟

ارسال مجدد رمز عبور یکبار مصرف (00:30)

ثبت نام

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

داده های شخصی شما برای پشتیبانی از تجربه شما در این وب سایت، برای مدیریت دسترسی به حساب کاربری شما و برای اهداف دیگری که در سیاست حفظ حریم خصوصی ما شرح داده می شود مورد استفاده قرار می گیرد.

ارسال مجدد رمز عبور یکبار مصرف (00:30)
  • 09338776735
  • info@wppush.ir
0
آموزش طراحی سایت در تبریز | آموزش وردپرس در تبریز | 09141107278 | آموزش وردپرس pdf
  • خانه
  • دوره هاداغ
    • آموزش صفر تا صد html css
    • هوش برنامه نویسی نوین
    • آموزش تدوین ویدیو
    • همه ی محصولات
  • دوره ی حضوری
    • آموزش وردپرس
    • آموزش html css
    • آموزش php
    • آموزش جاوا اسکریپت
  • ویدیو های آموزشی
  • تماس با ما
    • تبریز - نصف راه روبروی شهرداری جنب نمایندگی ایران خودرو ساختمان مهدیه طبقه ی 6 واحد B (ملاقات حضوری فقط با هماهنگی قبلی)

      09338776735

      info@wppush.ir

      اینستاگرام
      کانال آپارات
  • آموزش رایگان
آخرین اطلاعیه ها
جهت نمایش اطلاعیه باید وارد سایت شوید
عضویت و وورد

وبلاگ

آموزش طراحی سایت در تبریز | آموزش وردپرس در تبریز | 09141107278 | آموزش وردپرس pdfوبلاگآموزش html cssآموزش تگ table در HTML

آموزش تگ table در HTML

31 مرداد 1401
ارسال شده توسط کامران علیایی
آموزش html css

آموزش تگ table در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html و css قراره که با آموزش تگ table در HTML به صورت کامل آشنا بشید.

تگ table در HTML

همان طور که از نام تگ table پیداست. این تگ تگی است که با استفاده از آن میتوانیم یک جدول را در یک صفحه وبسایتمان ایجاد کنیم. یک سری از تگ ها هم هستند که همگی داخل این تگ <table>  قرار میگیرند که این تگ ها به صورت زیر هستند.

  1. <tr> : این تگ برای ایجاد سطرهای جدول
  2. <th> : این تگ برای ایجاد ستون های جدول
  3. <td> : این تگ برای ایجاد سلول های جدول
  4. <caption> : این تگ برای ایجاد کپشن جدول
  5. <thead> : این تگ برای ایجاد هدر ثابت برای جدول
  6. <tbody> : این تگ برای ایجاد بدنه ثابت برای جدول
  7. <tfoot> : این تگ برای ایجاد فوتر ثابت برای جدول
  8. <colgroup> : این تگ برای انتخاب گروهی ستون های جدول

مثل های تگ table در HTML

و حالا در ادامه به مشاهده شش مثال از این تگ table میپردازیم تا بیشتر و بهتر با این تگ آشنا شوید.

اولین مثال : ایجاد یک جدول در صفحه ( فاقد استایل )

<body>
  <table>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>D</td>
      <td>E</td>
      <td>F</td>
    </tr>
  </table>
</body>

دومین مثال : ایجاد یک جدول با ستون های مشخص + استایل داده شده از طریق کد های CSS

<table>
 <tr>
  <th>نام</th>
  <th>فامیلی</th>
 </tr>
  
 <tr>
  <td>میلاد</td>
  <td>علیزاده</td>
 </tr>
  
 <tr>
  <td>ساسان</td>
  <td>درویش پور</td>
 </tr>
  
 <tr>
  <td>علی</td>
  <td>نریمانی</td>
 </tr> 
</table>

مثال سوم : مشخص کردن کپشن با استفاده از تک Caption برای جداول

<table>
  <caption>WWW.WPPUSH.IR</caption>
    <tr>
       ...
    </tr>
</table>

راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید

شماره چهار : برای مشخص کردن انواع قسمت های جدول مثل هدر ، بدنه و فوتر میتوانیم به ترتیب از تگ های thead و tbody و tfoot استفاده کنیم.

<table>
 
  <thead>
   <tr>
    ...
   </tr>
  </thead> 
  <tbody>
   <tr>
    ...
   </tr>
  </tbody>
 
  <tfoot>
   <tr>
    ...
   </tr>
  </tfoot>
 
</table>

مثال پنجم: استفاده از صفت rowspan برای همگام سازی سطرها در جداول

<tr>
 <td rowspan="2">A</td>
 <td>B</td>
 <td>C</td>
</tr>

آخرین مثال : استفاده از صفت colspan برای همگام سازی سطرها در جداول

 <tr>
   <td colspan="2">سایت آموزشی wppush</td>
 </tr>

پشتیبانی مرورگرها از تگ table

در جدول زیر میتوانید مرورگرهای اینترنتی که از تگ table در HTML پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…

پشتیبانی مرورگر هار از تگ table

پشتیبانی تگ table از صفات و رویدادهای عمومی

تگ table قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.

نکات و توضیحات ضروری

  • چندین سال پیش طراحان سایت ، برای قالب بندی سایت از جداول استفاده میکردند. ولی امروزه به لطف وجود تگ div یا سیستم grid یا سیستم flex box دیگه نیازی به استفاده از جدول ها برای قالب بندی سایت های نیست.
  • اکنون بخاطر دلایل ذکر شده در سطر بالا ستفاده از جدول برای قالب بندی یک وبسایت کاری کاملا غیر حرفه ای و اشتباه است و در سئو هم تاثیر منفی از خود به جای میگذارد.

دستوراتی که بصورت پیش فرض در CSS از آن استفاده میکنیم.

مرورگر های حال حاضر دنیا تگ table را به صورت کد های css به شکل زیر نمایان میکنند که شما عزیزان می توانید بدون هیچ تغییر خاصی از این کد های آماده استفاده کنید.

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

شما عزیزان همچنین میتوانید برای ارتقاء دانش برنامه نویسی فرانت اند خود دوره آموزشی HTML CSS پروژه محور ما را مشاهده نمایید…

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها: HTML CSShtml5 css3آموزش cssآموزش css3آموزش htmlآموزش html cssآموزش html css پروژه محورآموزش html و cssآموزش html و css رایگانآموزش html5آموزش تگ table در htmlتگ tableتگ table در htmlجدول سازی در html
قبلی آموزش تگ tfoot در HTML
بعدی آموزش تگ summary در HTML

دیدگاهتان را بنویسید لغو پاسخ

تمامی حقوق این وبسایت متعلق به وردپرس پوش می باشد.
اشتراک گذاری در شبکه های اجتماعی
ارسال به ایمیل
https://wppush.ir/?p=9987
ورود ×
کد تأیید
لطفا کد تأیید ارسال شده به را وارد کنید
ثبت
ورود با رمز عبور یکبار مصرف
ارسال مجدد رمز عبور یکبار مصرف(00:30)
حساب کاربری ندارید؟
ثبت نام

ارسال مجدد رمز عبور یکبار مصرف (00:30)
بازگشت به ورود
  • (+93) Afghanistan
  • (+355) Albania
  • (+213) Algeria
  • (+1) American Samoa
  • (+376) Andorra
  • (+244) Angola
  • (+1) Anguilla
  • (+1) Antigua
  • (+54) Argentina
  • (+374) Armenia
  • (+297) Aruba
  • (+61) Australia
  • (+43) Austria
  • (+994) Azerbaijan
  • (+973) Bahrain
  • (+880) Bangladesh
  • (+1) Barbados
  • (+375) Belarus
  • (+32) Belgium
  • (+501) Belize
  • (+229) Benin
  • (+1) Bermuda
  • (+975) Bhutan
  • (+591) Bolivia
  • (+599) Bonaire, Sint Eustatius and Saba
  • (+387) Bosnia and Herzegovina
  • (+267) Botswana
  • (+55) Brazil
  • (+246) British Indian Ocean Territory
  • (+1) British Virgin Islands
  • (+673) Brunei
  • (+359) Bulgaria
  • (+226) Burkina Faso
  • (+257) Burundi
  • (+855) Cambodia
  • (+237) Cameroon
  • (+1) Canada
  • (+238) Cape Verde
  • (+1) Cayman Islands
  • (+236) Central African Republic
  • (+235) Chad
  • (+56) Chile
  • (+86) China
  • (+57) Colombia
  • (+269) Comoros
  • (+682) Cook Islands
  • (+225) Côte d'Ivoire
  • (+506) Costa Rica
  • (+385) Croatia
  • (+53) Cuba
  • (+599) Curaçao
  • (+357) Cyprus
  • (+420) Czech Republic
  • (+243) Democratic Republic of the Congo
  • (+45) Denmark
  • (+253) Djibouti
  • (+1) Dominica
  • (+1) Dominican Republic
  • (+593) Ecuador
  • (+20) Egypt
  • (+503) El Salvador
  • (+240) Equatorial Guinea
  • (+291) Eritrea
  • (+372) Estonia
  • (+251) Ethiopia
  • (+500) Falkland Islands
  • (+298) Faroe Islands
  • (+691) Federated States of Micronesia
  • (+679) Fiji
  • (+358) Finland
  • (+33) France
  • (+594) French Guiana
  • (+689) French Polynesia
  • (+241) Gabon
  • (+995) Georgia
  • (+49) Germany
  • (+233) Ghana
  • (+350) Gibraltar
  • (+30) Greece
  • (+299) Greenland
  • (+1) Grenada
  • (+590) Guadeloupe
  • (+1) Guam
  • (+502) Guatemala
  • (+44) Guernsey
  • (+224) Guinea
  • (+245) Guinea-Bissau
  • (+592) Guyana
  • (+509) Haiti
  • (+504) Honduras
  • (+852) Hong Kong
  • (+36) Hungary
  • (+354) Iceland
  • (+91) India
  • (+62) Indonesia
  • (+98) Iran
  • (+964) Iraq
  • (+353) Ireland
  • (+44) Isle Of Man
  • (+972) Israel
  • (+39) Italy
  • (+1) Jamaica
  • (+81) Japan
  • (+44) Jersey
  • (+962) Jordan
  • (+7) Kazakhstan
  • (+254) Kenya
  • (+686) Kiribati
  • (+965) Kuwait
  • (+996) Kyrgyzstan
  • (+856) Laos
  • (+371) Latvia
  • (+961) Lebanon
  • (+266) Lesotho
  • (+231) Liberia
  • (+218) Libya
  • (+423) Liechtenstein
  • (+370) Lithuania
  • (+352) Luxembourg
  • (+853) Macau
  • (+389) Macedonia
  • (+261) Madagascar
  • (+265) Malawi
  • (+60) Malaysia
  • (+960) Maldives
  • (+223) Mali
  • (+356) Malta
  • (+692) Marshall Islands
  • (+596) Martinique
  • (+222) Mauritania
  • (+230) Mauritius
  • (+262) Mayotte
  • (+52) Mexico
  • (+373) Moldova
  • (+377) Monaco
  • (+976) Mongolia
  • (+382) Montenegro
  • (+1) Montserrat
  • (+212) Morocco
  • (+258) Mozambique
  • (+95) Myanmar
  • (+264) Namibia
  • (+674) Nauru
  • (+977) Nepal
  • (+31) Netherlands
  • (+687) New Caledonia
  • (+64) New Zealand
  • (+505) Nicaragua
  • (+227) Niger
  • (+234) Nigeria
  • (+683) Niue
  • (+672) Norfolk Island
  • (+850) North Korea
  • (+1) Northern Mariana Islands
  • (+47) Norway
  • (+968) Oman
  • (+92) Pakistan
  • (+680) Palau
  • (+970) Palestine
  • (+507) Panama
  • (+675) Papua New Guinea
  • (+595) Paraguay
  • (+51) Peru
  • (+63) Philippines
  • (+48) Poland
  • (+351) Portugal
  • (+1) Puerto Rico
  • (+974) Qatar
  • (+242) Republic of the Congo
  • (+40) Romania
  • (+262) Runion
  • (+7) Russia
  • (+250) Rwanda
  • (+290) Saint Helena
  • (+1) Saint Kitts and Nevis
  • (+508) Saint Pierre and Miquelon
  • (+1) Saint Vincent and the Grenadines
  • (+685) Samoa
  • (+378) San Marino
  • (+239) Sao Tome and Principe
  • (+966) Saudi Arabia
  • (+221) Senegal
  • (+381) Serbia
  • (+248) Seychelles
  • (+232) Sierra Leone
  • (+65) Singapore
  • (+1) Sint Maarten
  • (+421) Slovakia
  • (+386) Slovenia
  • (+677) Solomon Islands
  • (+252) Somalia
  • (+27) South Africa
  • (+82) South Korea
  • (+211) South Sudan
  • (+34) Spain
  • (+94) Sri Lanka
  • (+1) St. Lucia
  • (+249) Sudan
  • (+597) Suriname
  • (+268) Swaziland
  • (+46) Sweden
  • (+41) Switzerland
  • (+963) Syria
  • (+886) Taiwan
  • (+992) Tajikistan
  • (+255) Tanzania
  • (+66) Thailand
  • (+1) The Bahamas
  • (+220) The Gambia
  • (+670) Timor-Leste
  • (+228) Togo
  • (+690) Tokelau
  • (+676) Tonga
  • (+1) Trinidad and Tobago
  • (+216) Tunisia
  • (+90) Turkey
  • (+993) Turkmenistan
  • (+1) Turks and Caicos Islands
  • (+688) Tuvalu
  • (+1) U.S. Virgin Islands
  • (+256) Uganda
  • (+380) Ukraine
  • (+971) United Arab Emirates
  • (+44) United Kingdom
  • (+1) United States
  • (+598) Uruguay
  • (+998) Uzbekistan
  • (+678) Vanuatu
  • (+58) Venezuela
  • (+84) Vietnam
  • (+681) Wallis and Futuna
  • (+212) Western Sahara
  • (+967) Yemen
  • (+260) Zambia
  • (+263) Zimbabwe
مرورگر شما از HTML5 پشتیبانی نمی کند.

سوالی دارید؟ از ما بپرسید، کارشناسان ما همین حالا با شما تماس می گیرند.

تماس با ما

پاسخگوی شما هستیم

  • 09338776735
  • همه روزه از ساعت 9 صبح تا 12 شب
  • info@wppush.ir
question