جداول در HTML

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

طریقه تعریف یک جدول HTML

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

هر سطر از جدول با استفاده از تگ <tr> تعریف می شود. تیتر یا هدر جدول با استفاده از تگ <th> تعریف می شود. بطور پیش فرض در HTML هدر جدول به صورت فونت سیاه (bold) و وسط چین نمایش می یابد. هر واحد داده یا خانه جدول با استفاده از تگ <td> تعریف می شود.

مثال: ایجاد یک جدول HTML

<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

شرکت

خدمات

پلکسا

مرکز خدمات تهیه محتوا و ترجمه وبسایت

تز

مرکز خدمات آکادمیک و مطبوعاتی

پرستار

مرکز تبادل رایگان محتوای پرستاری و علوم پزشکی

لب

مرکز علوم آزمایشگاهی پرستار

طریقه ایجاد جدول حاشیه دار در HTML

اگر برای جدول حاشیه (border) تعیین نکنید، مرورگر جدول را بدون حاشیه نمایش می دهد.

برای ست کردن حاشیه خانه های جدول بایستی از خصیصه CSS border استفاده کرد.

مثال:

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

توجه: بایستی هم برای خود جدول و هم خانه های جدول حاشیه تعریف کرد. /p>

حاشیه درهم در جدول HTML

اگر می خواهید حاشیه های جدول به صورت درهم (Collapsed Borders) باشد یعنی حاشیه ها بصورت دوخطی نباشد و دو حاشیه کنار هم در همدیگر ادغام شوند، از خصیصه CSS border-collapse استفاده می شود.

مثال:

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

اضافه کردن پدینگ به خانه های جدول HTML

پدینگ خانه ها (Cell Padding) در جداول HTML یک فضای خالی بین محتوای هر خانه و حاشیه های آن ایجاد می کند.
اگر برای جدول پدینگ تعیین نکنیم، خانه های جدول بدون فضای خالی اطراف محتوا نمایش خواهند یافت.
برای ست کردن پدینگ برای خانه های جدول HTML از خصیصه CSS padding استفاده می شود.

مثال:

th, td {
padding: 15px;
}

طریقه چپ چین کردن تیتر ستون های جدول HTML

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

برای اینکه محتوای خانه تیتر جدول را چپ چین یا راست چین کنیم، از خصیصه CSS text-align استفاده می کنیم.

مثال:

th {
text-align: left;
}

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

فضای حاشیه (Border spacing) بین خانه های جدول فاصله ای در نظر می گیرد.
برای ست کردن فضای حاشیه در جدول از خصیصه CSS border-spacing استفاده می شود.

مثال:

table {
border-spacing: 5px;
}

توجه: اگر جدول دارای حاشیه های درهم (کولاپس) باشد، ست کردن فاصله بین حاشیه های جدول تاثیر نخواهد داشت.

خانه های چند ستونی در جدول HTML

برای اینکه یک خانه از جدول چند سطر یک ستون را پر کند، مثلا در یک جدول 4 ستونی یکی از خانه های جدول سه ستون باشد، از ویژگی 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 استفاده می کنیم. با استفاده از این ویژگی مثلا می توان در یک جدو 5 ستونی در یک سطر دو خانه داشته باشیم.

مثال:

<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>

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

برای اضافه کردن عنوان به جداول 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> قرار داده شود.

طریقه استیل دهی یک جدول خاص

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

حالا برای این جدول با id="t01" سبک و استیل خاصی تعریف می کنیم:

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> برای تعریف جدول HTML استفاده می شود.
  • با استفاده از عنصر <tr> سطرهای جدول در HTML تعریف می شود.
  • با استفاده از عنصر <td> خانه های جدول HTML تعریف می شود.
  • با استفاده از عنصر <th> هدینگ ستون های جدول HTML تعریف می شود.
  • با استفاده از عنصر <caption> عنوان جدول HTML تعریف می شود.
  • خصیصه border برای تعیین حاشیه در جداول HTML استفاده می شود.
  • خصیصه border-collapse برای یکی کردن حاشیه در جداول HTML استفاده می شود.
  • خصیصه padding برای تعیین فاصله خالی دور خانه جداول HTML استفاده می شود.
  • خصیصه text-align برای چیدن متن در خانه های جداول HTML استفاده می شود.
  • خصیصه border-spacing برای تعیین فاصله بین خانه ها در جداول HTML استفاده می شود.
  • با استفاده از ویژگی colspan می توان خانه را در چند ستون جدول HTML بسط داد.
  • با استفاده از ویژگی rowspan می توان خانه را در چند سطر جدول HTML بسط داد.
  • با استفاده از ویژگی id می توان سبک منحصر به فردی برای جدول HTML خود تعریف کرد.

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

تگ های مورد استفاده برای ساخت و طراحی جدول در سند HTML در جدول زیر لیست شده است:

تگ

شرح

<table>

تعریف جدول

<th>

تعریف هدینگ یا تیتر ستون های جدول

<tr>

تعریف سطرهای جدول

<td>

تعریف خانه های جدول

<caption>

تعریف عنوان جدول

<colgroup>

مشخص کردن گروه یک یا چند ستونی از جدول برای قالب دهی

<col>

تعیین مشخصات هر ستون از یک گروه ستون تعیین شده با استفاده از <colgroup>

<thead>

تعیین گروه خانه های هدینگ یا تیتر جدول

<tbody>

گروه بندی کردن بدنه جدول

<tfoot>

گروه بندی فوتر جدول

اگر در اجرای این راهنما به مشکل برخورد کردید و سایر سئوالات و پیشنهادات خود را در بخش سئوالات عمومی انجمن پلکسا مطرح نمایید. گروه توسعه وب پلکسا به سئوالات شما پاسخ خواهند داد.

عضویت در خبرنامه پلکسا

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

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

در صورتی که به دنبال جذب بازدید کننده یا ارتقای رنکینگ سایت خود هستید، پیشنهاد می کنیم پلکسا را یک پست یا مطلب مهمان کنید. همانطور که برای سایت خود مطلب می نویسید، مطلب خود را آماده و کد نویسی کرده و در پلکسا منتشر کنید. پلکسا هیچگونه دخل یا تصرفی در پست شما نخواهد داشت.