بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML عناصر فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 عناصر جدید HTML5 عناصر معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

جداول HTML


جداول HTML به توسعه دهندگان وب اجازه می دهد تا داده ها را در سطرها و ستون ها مرتب کنند.

مثال جدول ها در HTML

شرکت مخاطب کشور
فارسی w3 احمد ایران
ال جی سعید ترکیه
دی جی وحید اتریش
سامسونگ محمد اذربایجان
موتورلا علی کانادا
خودتان آزمایش کنید »

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

برچسب <table> جدول HTML را تعریف می کند.

هر سطر جدول با برچسب <tr> تعریف می شود. هر سربرگ جدول با برچسب <th> تعریف می شود. هر داده / سلول جدول با برچسب <td> تعریف می شود.

به طور پیش فرض ، متن در المان <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 استفاده کنید:

حاشیه با استفاده از ویژگی CSS تنظیم می شود:

مثال

table, th, td {
  border: 1px solid black;
}
خودتان آزمایش کنید »

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


جدول HTML - حاشیه های جمع شده border-collapse

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

مثال

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
خودتان آزمایش کنید »

جدول HTML - افزودن حاشیه درونی - cell padding

حاشیه درونی سلول cell padding فضای بین محتوای سلول و حاشیه های آن را مشخص می کند.

اگر یک padding حاشیه درونی مشخص نکنید ، سلولهای جدول بدون padding حاشیه درونی نمایش داده می شوند.

برای تنظیم padding حاشیه درونی ، از ویژگی CSS padding استفاده کنید:

مثال

th, td {
  padding: 15px;
}
خودتان آزمایش کنید »

جدول HTML - عناوین چپ چین text-align

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

برای تراز بندی سمت راست عناوین جدول ، از ویژگی text-align استفاده کنید: :

مثال

th {
  text-align: left;
}
خودتان آزمایش کنید »

جدول HTML - فاصله حاشیه border-spacing

فاصله حاشیه ای border-spacing فضای بین سلول ها را مشخص می کند.

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

مثال

table {
  border-spacing: 5px;
}
خودتان آزمایش کنید »

توجه:: اگر جدول دارای حاشیه های جمع شده border-collapse باشد ، فاصله حاشیه border-spacing هیچ تأثیری ندارد.


جدول HTML - سلولی که ستون های زیادی را در بر می گیرد colspan

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

مثال

<table style="width:100%">
  <tr>
    <th>نام</th>
    <th colspan="2">تلفن</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>
خودتان آزمایش کنید »

جدول HTML - سلولی که تعداد زیادی ردیف را در بر می گیرد rowspan

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

مثال

<table style="width:100%">
  <tr>
    <th>نام:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">تلفن:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>
خودتان آزمایش کنید »

جدول HTML - عنوان را اضافه کنید caption

برای افزودن عنوان به جدول ، از برچسب <caption> استفاده کنید:

مثال

<table style="width:100%">
  <caption> ذخیره ماهانه</caption>
  <tr>
    <th>ماه</th>
    <th>ذخیره</th>
  </tr>
  <tr>
    <td>خرداد</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>مرداد</td>
    <td>$50</td>
  </tr>
</table>
Попробуйте сами »

توجه:: برچسب <caption> باید بلافاصله بعد از برچسب <table> درج شود.


یک سبک خاص برای یک جدول Id

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

مثال

<table id="t01">
  <tr>
    <th>نام</th>
    <th>نام خانوادگی</th>
    <th>سن</th>
  </tr>
  <tr>
    <td>سعید</td>
    <td>سعیدی</td>
    <td>30</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;
}
خودتان آزمایش کنید »

خلاصه ی فصل

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

تمرینات HTML

خود را امتحان کنید

تمرین:

یک ردیف جدول با دو هدر جدول اضافه کنید.

دو عنوان صفحه باید دارای ارزش "Name" و "Age" باشند.

<table>
  
    
    
  
  <tr>
    <td>Jill Smith</td>
    <td>50</td>
  </tr>
</table>

تمرین را شروع کنید


برچسب های جدول HTML

برچسب توضیحات
<table> جدول را تعریف می کند
<th> یک سلول هدر را در یک جدول تعریف می کند
<tr> یک ردیف را در یک جدول تعریف می کند
<td> یک سلول را در یک جدول تعریف می کند
<caption> عنوان جدول را تعریف می کند
<colgroup> گروهی از یک یا چند ستون را در جدول برای قالب بندی مشخص می کند
<col> خصوصیات ستون را برای هر ستون در یک عنصر <col> مشخص می کند
<thead> محتوای عنوان را در یک جدول گروه بندی کنید
<tbody> محتوای بدن را در یک جدول گروه بندی کنید
<tfoot> محتوای پاورقی را در یک جدول گروه بندی کنید

برای لیست کامل همه برچسب های HTML موجود ، به مرجع برچسب HTML ما مراجعه کنید. .






این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir