ایجاد جدال در HTML

ایجاد جدول در HTML

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 5 دقیقه آخرین بروز رسانی: 02 آذر 1399

با نحوه ایجاد جدول در HTML که شامل داده های جدولی در چندین ردیف و ستون است آشنا می شویم.

یک مثال جدول HTML پایه

یک جدول در HTML با استفاده از تگ <table> تعریف می شود. محتوای کل جدول باید در این عنصر گنجانده شود:

<table>
<tr>
    <th>Name</th>
    <th>Surname</th> 
    <th>Points</th>
</tr>
<tr>
    <td>Kayle</td>
    <td>Jax</td> 
    <td>42</td>
</tr>
<tr>
    <td>Eve</td>
    <td>Cho</td> 
    <td>14</td>
</tr>
</table>

منظور از جداول HTML فقط نگهداری داده های جدولی است، از آن ها برای اصلاح طرح صفحه استفاده نکنید.

تعریف ساختار جدول با تگ های HTML

برای درک نحوه ساخت جدول در HTML ، باید با یادگیری تگ های مناسب شروع کنید. عنصر <table> یک جدول را در یک سند HTML تعریف می کند. همه تگ های جدول HTML دیگر باید در این تگ گنجانده شوند:

<table>
  <tr>
    <td>This is the first row in the first column</td>
    <td>This is the first row in second column</td>
  </tr>
  <tr>
    <td>This is the second row in the first column</td>
    <td>This is the second row in the second column</td>
  </tr>
</table>

عنصر <tr> یک ردیف در جدول HTML تنظیم می کند. یک ردیف می تواند شامل دو نوع سلول باشد:

  • سلول های سرصفحه توسط عناصر <th>  تعریف می شوند
  • سلول های استاندارد توسط عناصر <td> تعریف می شوند
<table>
  <tr>
    <th>Fruits</th>
    <th>Prices</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>$1.26</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>$0.60</td>
  </tr>
</table>

عنصر <caption> عنوان اصلی جدول HTML را مشخص می کند. در حالی که <th> برای بخشی از محتوای جدول یک سرآیند تعریف می کند ، <caption> نام را برای تعریف کل جدول ایجاد می کند:

<table style="width: 100%; border: 1px solid;">
  <caption>Average Price List of Fruits [July 2017]</caption>
  <tr>
    <th>Fruits</th>
    <th>Prices</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>€0.60</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>€0.32</td>
  </tr>
</table>

توجه: <caption> باید درست بعد از تگ باز <table> قبل از هر محتوای دیگری درج شود.

سر برگ ، بدنه سایت و پاورقی

در هر سند HTML ، یک بخش <head> و یک <body> وجود دارد. جداول HTML ساختاری کاملاً مشابه دارند که می توانید با استفاده از عناصر <tbody> و <thead>  و <tfoot> آن را تعریف کنید.

از عنصر <thead> برای گروه بندی محتوای headrer استفاده می شود:

<table border>
 <thead>
  <tr>
    <td>Purchase</td>
    <td>Price</td>
  </tr>
 </thead>
</table>

تگ <tbody> بدنه جدول HTML را تعریف می کند. تمام مطالب باید در این عنصر گنجانده شود:

<table>
 <tbody>
  <tr>
    <td>Long Island</td>
    <td>45</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Geeky stuff</td>
    <td>85</td>
    <td>90</td>
  </tr>
  <tr>
    <td>StayAtHomeMart</td>
    <td>25</td>
    <td>30</td>
  </tr>
  <tr>
    <td>BestBuy</td>
    <td>60</td>
    <td>10</td>
  </tr>
 </tbody>
</table>

عنصر <tfoot> زیر صفحه را تعریف می کند. باید در ابتدای کد قرار گیرد – با این حال ، مرورگر آن را در انتهای جدول نشان می دهد:

<tfoot>
  <tr>
    <td>Summary</td>
    <td>It was mostly sunny.</td>
  </tr>
</tfoot>

ادغام سلول ها با ویژگی ها

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

ویژگی colspan چندین سلول را در یک ردیف ادغام می کند و یکی ایجاد می کند:

<table>
  <tr>
    <th colspan="2">List of Fruit Prices</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>€0.60</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>€0.32</td>
  </tr>
</table>

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

<table>
  <tr>
    <th>Fruits</th>
    <th>Prices</th>
    <th rowspan="3">Month of June 2017</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>€0.6</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>€0.32</td>
  </tr>
</table>

سبک کردن جداول HTML

اگر می خواهید یک یا چند ستون را به روشی متفاوت از کل جدول HTML تنظیم کنید ، باید با عناصر <colgroup> و <col> آشنا باشید. استفاده از آن ها به شما امکان می دهد یک سبک خاص برای ستون های خاص اختصاص دهید:

<table>
  <colgroup>
    <col span="1" style="background-color: cornsilk;">
    <col style="background-color: bisque;">
  </colgroup>
  <tr>
    <th>Price</th>
    <th>Item</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>100</td>
    <td>Peanut Butter</td>
    <td>2</td>
  </tr>
</table>

استفاده از ویژگی های CSS

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

ویژگی Border یک مرز جدول HTML ایجاد می کند:

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

در مثال بالا ، مرز دو برابر می شود. این اتفاق می افتد زیرا خاصیت یک مرز جداگانه به هر سلول جدول اضافه می کند. با این حال ، می توانید از ویژگی فروپاشی مرز استفاده کنید تا مرز دو برابر را در یک خط ادغام کنید:

table {
    border-collapse: collapse;
}

می توانید مرز دوتایی را نیز حفظ کنید و آن را سبک کنید. ویژگی مرز-فاصله به شما امکان می دهد فاصله بین مرزهای سلول های جداگانه در جدول HTML خود را اصلاح کنید:

table {
    border-spacing: 5px;
}

به طور پیش فرض ، جداول HTML هیچگونه فرم خاصی برای آن ها ندارند. اگر می خواهید بین داده های خود فاصله ایجاد کنید ، می توانید هنگام استفاده از ویژگی padding که معمولاً در پیکسل تعریف می شود ، آن ها را تنظیم کنید:

th, td {
    padding: 15px;
}

با استفاده از ویژگی text-align می توانید متن را در جدول HTML خود تراز کنید. می توانید تراز را در سمت چپ ، راست یا مرکز تنظیم کنید:

th {
    text-align: left;
}

توجه: سلول های header از قبل تراز وسط دارند و سلول های بدنه به طور پیش فرض با چپ تراز می شوند.

خلاصه نکات ایجاد جدول در HTML

  • عرض جدول HTML به محتوای آن بستگی دارد. این یک عنصر در سطح بلوک است ، اما اگر محتوا فضای کمتری اشغال کند ، به طور خودکار کل عرض صفحه را طی نمی کند.
  • بخاطر داشته باشید که صفحه خوان ها برای کاربران معلول وجود جداول HTML را اعلام کرده و آنها را از چپ به راست و از بالا به پایین می خوانند.
  • توجه کنید که <col> یک عنصر خالی است ، اما <colgroup> چنین نیست ، زیرا شامل همه عناصر <col> است.

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊