ساخت جدول در HTML – آموزش کامل و ساده + کد و مثال

ساخت جدول‌ها یکی از قابلیت‌های پایه و مهم در زبان نشانه‌گذاری HTML است که امکان نمایش داده‌ها به صورت سازمان یافته را ممکن ساخته و سهولت در مدیریت آن‌ها را فراهم می‌کند. ما در این مطلب از «مجله فرادرس» به شیوه‌ها و تکنیک‌های ساخت جدول در HTML پرداخته و تمامی جنبه‌های مربوط به طراحی و ساخت آن‌ها را بررسی خواهیم کرد. از ساختار ابتدایی یک جدول گرفته تا ایجاد «سردسته» (هدر | header)، سطرها و سلول‌ها، تعیین عنوان سطرها و همچنین استفاده از ویژگی‌ها و استایل‌ها برای بهینه‌سازی قالب جدول‌ها، در این مطلب بحث خواهد شد. با مرور این مطلب، کاربر قادر خواهد بود تا با استفاده از تگ‌های مناسب و قابلیت‌های HTML، جداولی را با استفاده زبان HTML با ابعاد و تنظیمات مختلف ایجاد کند. یادگیری این مطلب در اصل به کاربر امکان می‌دهد تا جدول‌هایی با نمایش دلخواه بر اساس نیازهای وب‌سایت‌ خود طراحی کند.

جدول در HTML چیست؟

جدول در HTML راهی برای سازمان‌دهی و نمایش داده‌ها به روشی ساختاریافته است. این ساختار معمولاً برای ارائه اطلاعات در سطرها و ستون‌ها استفاده می‌شود. جداول با استفاده از تگ‌های HTML ایجاد می‌شوند که ساختار و محتوای جدول را تعریف می‌کنند. یکی از تگ‌های کلیدی که برای ایجاد جدول استفاده می‌شود، تگ table است.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

این تگ به عنوان کانتینر اصلی جدول عمل می‌کند و ابتدا وانتهای آن را مشخص خواهد کرد. در داخل تگ table ، از تگ‌های دیگر برای تعریف سطڕها و سلول‌های جدول استفاده خواهد شد. جداول در HTML روشی قدرتمند برای سازمان‌دهی و ارائه داده‌ها در قالبی ساختاریافته ارائه می‌دهند که آن‌ها را به ابزاری ضروری برای توسعه‌دهندگان وب تبدیل می‌کند.

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

در HTML، چندین تگ رایج وجود دارد که برای ساختارمند کردن و سازماندهی داده‌های جدولی استفاده می‌شود. از تگ‌های مهم برای ساخت جدول در HTML می‌توان فهرست موارد زیر را نام برد:

• tr : این تگ نمایانگر ردیف یا سطر جدول است.
• td  : این تگ برای ایجاد سلول‌های داده در ردیف جدول استفاده می‌شود.
• th : این تگ برای افزودن سرفصل‌های (هدرها) جدول به سطرهای جدول مورد استفاده قرار می‌گیرد.
• caption : این تگ برای درج عنوان برای جدول استفاده می‌شود.
• thead : این تگ برای افزودن قسمت هدر جداگانه به جدول مورد استفاده قرار می‌گیرد.
• tbody : این تگ برای تعریف بدنه اصلی جدول استفاده خواهد شد.
• tfoot : این تگ برای ایجاد قسمت پاورقی یا فوتر جداگانه برای جدول استفاده می‌شود.

هر کدام از تگ‌های بالا برای ساختاربندی و استایل‌بندی جداول HTML برای ارائه داده‌ها به صورت سازمان یافته ضروری هستند.

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

«سینتکس» (Syntax) ساخت جدول در HTML به صورت زیر است:

1<table>
2  <tr>
3    <td>Cell 1</td>
4    <td>Cell 2</td>
5    <td>Cell 3</td>
6  </tr>
7  <tr>
8    <td>Cell 4</td>
9    <td>Cell 5</td>
10    <td>Cell 6</td>
11  </tr>
12</table>

سینتکس بالا جدولی به صورت جدول تصویر زیر خواهد ساخت:

یک نمونه جدول دیگر که از تگ‌های متفاوتی استفاده کرده به صورت زیر است:

1<table border="1" >
2  <tr>
3    <th>Name</th>
4    <th>Age</th>  
5    <th>Country</th>
6  </tr>
7  <tr>
8    <td>Harry Depp</td>
9    <td>28</td>
10    <td>Britain</td>
11  </tr>
12  <tr>
13    <td>John Smith</td>
14    <td>35</td>
15    <td>USA</td>
16  </tr>
17  <tr>
18    <td>Ram Krishna</td>
19    <td>19</td>
20    <td>Nepal</td>
21  </tr>
22</table>

خروجی کد بالا هم به صورت زیر است:

در مثال بالا از تگ‌های زیر برای ساخت جدول استفاده شده است:

• table
• tr
• td
• th

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

نحوه ساخت سطر برای جداول اچ تی ام ال

در ساخت جدول در HTML، تگ tr برای تعریف ردیف یا سطر در جدول استفاده می‌شود. این تگ ساختار و سازمان‌دهی جدول را با تفکیک محتوای آن در سطرهای مجزا فراهم می‌کند.

فیلم آموزش طراحی سایت با HTML و CSS ویژه کودکان و نوجوانان در فرادرس

کلیک کنید

در اینجا مثالی از نحوه استفاده از تگ tr آورده شده است:

1<table>
2<tr>
3  ...
4</tr>
5</table>

به سطرهای جدول، می‌توان داده‌های جدول یا هدر جدول را اضافه کرد. تگ td نشان‌دهنده داده‌های جدول است که برای نمایش محتوای سلولی معمولی در جدول استفاده می‌شود. از سوی دیگر، تگ th نشان‌دهنده عنوان جدول است که برای نمایش اطلاعات هدر یا عنوان ستون‌های جدول مورد استفاده قرار می‌گیرد. در اینجا مثالی آورده شده است که هر دو مفهوم گفته شده را در جدول نشان می‌دهد:

1<tr>
2  <th>Name</th>
3  <th>Country</th>
4</tr>
5<tr>
6  <td>Prasanna</td>
7  <td>Nepal</td>
8</tr>
9<tr>
10  <td>Simon</td>
11  <td>USA</td>
12</tr>

در جدول، می‌توان به تعداد دلخواه ردیف‌های مورد نیاز برای نمایش داده‌ها ایجاد کرد. هر تگ tr ردیفی را در ساختار جدول تعریف می‌کند.

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

تگ td در HTML به طور خاص برای تعریف سلول‌ها در ساخت جدول در HTML استفاده می‌شود. این سلول‌های جدول داده‌هایی را ذخیره می‌کنند که قرار است در ساختار جدول نمایش داده شوند. در اینجا مثالی از نحوه استفاده از تگ td در جدول HTML آورده شده است:

1<tr>
2  <td>Apple</td>
3  <td>Mango</td>
4  <td>Orange</td>
5</tr>

در مثال بالا با استفاده از تگ table ساختار جدول مانند ایجاد کرده‌ایم. در جدول، سطری وجود دارد که با استفاده از تگ tr تعریف شده است. در داخل این ردیف، سه خانه جدول (با تگ td ) وجود دارند که به ترتیب حاوی داده‌های Apple و Mango ،Orange  هستند.

تگ td معمولاً در محدوده تگ‌های tr (ردیف جدول) یا th (هدر جدول) استفاده می‌شود. توجه به این نکته ضروری است که سلول‌های جدول باید در سطرهای جدول ( tr ) محصور شوند تا ساختار جدول معتبر باشد. علاوه بر این، سلول‌های جدول را می‌توان در جداول تودرتو برای ایجاد طرح‌بندی جدول پیچیده‌تر نیز استفاده کرد.

حاشیه در ساخت در جدول در HTML

در ساخت جدول در HTML، می‌توان با استفاده از ویژگی border به جدول و سلول‌های آن حاشیه اضافه کرد که مثال زیر این موضوع را نشان می‌دهد:

1<table border="1">
2  ...
3</table>

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

نکته: باید به این نکته توجه داشت که استفاده از ویژگی border فقط به کاربر امکان می‌دهد سبک‌هایی با حاشیه‌ اولیه داشته باشد. اگر مرزهای خاص یا سفارشی‌تری خواسته شود، می‌توان از CSS استفاده کرد. برای جلوگیری از ظاهر شدن حاشیه‌های دوتایی (مانند نمونه بالا)، می‌توان ویژگی حاشیه جدول را روی collapse تنظیم کرد که مثال زیر برای بیان این هدف است:

1<table border="1" style="border-collapse: collapse;">
2  ...
3</table>

خروجی کد فوق به صورت زیر است:

با تنظیم border روی collapse ، اطمینان حاصل می‌شود که مرزهای داخلی سلول‌های جدول با حاشیه بیرونی ادغام می‌شوند و در نتیجه جدول تمیزتر و از نظر بصری جذاب‌تر می‌شود.

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

برای اضافه کردن عنوان جدول در HTML، می‌توان از عنصر th استفاده کرد. عنوان جدول معمولاً در سطر اول جدول قرار می‌گیرد و سپس داده‌های واقعی در سطرهای بعدی قرار خواهند گرفت.

فیلم آموزش طراحی وب با HTML اچ تی ام ال – تکمیلی در فرادرس

کلیک کنید

در اینجا مثالی با استفاده از تگ th آورده شده است:

1<table>
2  <tr>
3    <th>First Name</th>
4    <th>Last Name</th>
5    <th>Email Address</th>
6  </tr>
7  <tr>
8   <td>Hillary</td>
9   <td>Nyakundi</td>
10   <td>tables@mail.com</td>
11  </tr>
12  <tr>
13    <td>Lary</td>
14    <td>Mak</td>
15    <td>developer@mail.com</td>
16  </tr>
17</table>

در مثال بالا، جدولی با سه ستون داریم: « Name »، « Last Name » و « Email Address ». تگ‌های « th » عناوین هر ستون را نشان می‌دهد. داده‌های واقعی در ردیف‌های بعدی با استفاده از عنصر td ارائه می‌شود. به‌طور پیش‌فرض، متن درون تگ‌های th در مرکز و پررنگ است و آن را از ستون‌های داده متمایز می‌کند. جدول رندر شده نهایی به شکل زیر خواهد بود:

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

مثالی از تگ th برای ساخت جدول در HTML

مثالی دیگر از تگ th برای ساخت جدول در HTML به صورت زیر است:

1<table>
2  <tr>
3    <th>Item</th>
4    <th>Count</th>
5  </tr>
6  <tr>
7    <td>Mango</td>
8    <td>125</td>
9  </tr>
10  <tr>
11    <td>Orange</td>
12    <td>75</td>
13  </tr>
14</table>

خروجی کد بالا این بار به صورت زیر است:

در مثال بالا، Item و Count هدرهای جدول محسوب می‌شوند و به منظور نشان دادن دسته داده‌ها در ردیفی خاص مورد استفاده قرار می‌گیرند. در این مثال هم، سبک و استایل هدرهای جدول پررنگ و وسط‌چین است، دلیل این اتفاق این بوده که تگ th دارای نوعی استایل پیش‌فرض است.

نحوه اضافه کردن کپشن به جدول اچ تی ام ال

افزودن کپشن یا توضیحات به جدول به منظور ارائه توضیحات مختصر از داده‌های ارائه شده در جدول است. کپشن را می‌توان در بالا یا پایین جدول قرار داد ولی حالت پیش‌فرض آن به صورت وسط‌چین و در بالای جدول است. برای درج توضیحات در ساخت جدول در HTML، می‌توان از تگ caption استفاده کرد. سینتکس استفاده از این تگ به صورت زیر است:

1<table>
2  <caption></caption>
3  <tr> </tr>
4</table>

در اینجا مثالی از نحوه اضافه کردن کپشن به جدول آورده شده است:

1<table>
2  <caption>Free Coding Resources</caption>
3  <tr>
4    <th>Sites</th>
5    <th>Youtube Channels</th>
6    <th>Mobile Appss</th>
7  </tr>
8  <tr>
9    <td>Freecode Camp</td>
10    <td>Freecode Camp</td>
11    <td>Enki</td>
12  </tr>
13  <tr>
14    <td>W3Schools</td>
15    <td>Academind</td>
16    <td>Programming Hero</td>
17  </tr>
18  <tr>
19    <td>Khan Academy</td>
20    <td>The Coding Train</td>
21    <td>Solo learn</td>
22  </tr>
23</table>

خروجی مثال بالا به صورت زیر است:

در جدول بالا، کپشن Free Coding Resources به معرفی مختصری از داده‌های ارائه شده می‌پردازد که شامل نام وب‌سایت‌ها، کانال‌های یوتیوب و اپلیکیشن‌های موبایل مرتبط با منابع کدنویسی است. هنگامی‌که عنوانی به جدول اضافه شود، می‌توان ظاهر آن را با استفاده از CSS سفارشی کرد.

نحوه استفاده از ویژگی Scope برای ساخت جدول در اچ تی ام ال

ویژگی scope  در جداول HTML برای نشان دادن اینکه آیا هدری خاص برای ستون، سطر یا گروهی از هر دو در نظر گرفته شده است، استفاده می‌شود. برای درک بهتر کاربرد آن، مثالی را مرور می‌کنیم. هدف اصلی ویژگی scope ارائه وضوح به کاربران با بیان صریح داده‌های هدف سلول هدر است. این ویژگی در عنصر th اعلان می‌شود و می‌تواند یکی از چهار مقدار col و row، colgroup ،rowgroup را بگیرد. در اینجا سینتکس استفاده از ویژگی scope آمده است:

1<table>
2 <tr>
3   <th scope="value">
4 </tr>
5</table>

مثال زیر از ویژگی scope استفاده می‌کند:

1<table>
2  <tr>
3    <th></th>
4    <th scope="col">Semester</th>
5    <th scope="col">Grade</th>
6  </tr>
7
8  <tr>
9    <td>1</td>
10    <td>Jan - April</td>
11    <td>Credit</td>
12  </tr>
13
14  <tr>
15    <td>2</td>
16    <td>May - August</td>
17    <td>Pass</td>
18  </tr>
19    
20  <tr>
21    <td>2</td>
22    <td>September - December</td>
23    <td>Distinction</td>
24  </tr>
25</table>

خروجی مثال فوق به صورت زیر است:

در مثال بالا، جدولی با سه ستون وجود دارد. سطر اول از سلول‌های هدر تشکیل شده است، در حالی که سطرهای بعدی حاوی داده‌های Grade و Semester هستند. ویژگی scope برای تعیین اینکه سلول‌های هدر Semester  و Grade  به ستون تعلق دارند، با تنظیم مقدار scope به col  استفاده می‌شود. این بدان معنی است که این هدرها داده‌ها را در ستون‌های مربوطه نشان می‌دهند. با استفاده از ویژگی scope ، می‌توان به وضوح رابطه بین سلول‌های هدر و داده‌های مرتبط با آن‌ها را تعریف کرد.

نحوه استفاده از Cell Spanning در جدول HTML

«پوشش سلولی» (Cell Spanning) به توانایی سلول در جدول برای قابلیت گسترش در چندین ستون یا ردیف اشاره دارد. این ویژگی معمولاً در برنامه‌هایی مانند «MS Office» یا «Excel» استفاده می‌شود، جایی که می‌توان سلول‌ها را برجسته کرده و از دستورات برای گسترش آن‌ها استفاده کرد.

فیلم آموزش طراحی صفحات ریسپانسیو یا واکنشگرا با HTML و CSS در فرادرس

کلیک کنید

در جداول HTML، می‌توان با استفاده از دو ویژگی به پوشش سلولی رسید: colspan برای گسترش در حالت افقی و rowspan برای گسترش در حالت عمودی. به این ویژگی‌ها مقادیر بزرگ‌تر از صفر اختصاص داده می‌شود که نشان‌دهنده تعداد سلول‌هایی است که کاربر می‌خواهد گسترش دهد. در اینجا مثالی از نحوه استفاده از پوشش سلولی در جدول HTML آورده شده است:

1<table>
2  <tr>
3    <th>Name</th>
4    <th>Subject</th>
5    <th>Marks</th>
6  </tr>
7  <tr>
8    <td rowspan = "2">Hillary</td>
9    <td>Advanced Web</td>
10    <td>75</td>
11  </tr>
12  <tr>
13    <td>Operating Syatem</td>
14    <td>60</td>
15  </tr>
16      <tr>
17    <td rowspan = "2">Lary</td>
18    <td>Advanced Web</td>
19    <td>80</td>
20  </tr>
21  <tr>
22    <td>Operating Syatem</td>
23    <td>75</td>
24  </tr>
25  <tr>
26    <td colspan="3">Total Average: 72.5</td>
27  </tr>
28</table>

خروجی مثال فوق به صورت زیر است:

در مثال بالا، از Cell Spanning برای گسترش ۲ سلول به صورت عمودی در ردیف‌هایی که نام Hillary و Lary ظاهر می‌شود، استفاده شده و همچنین در مثال بالا ۳ سلول به صورت افقی در ردیفی که Total Average نمایش داده می‌شود، گسترش یافته است.

کاربرد استفاده از Colspan و Rowspan در ساخت جدول در HTML چیست؟

تخصیص مقادیر «Colspan» و «Rowspan» به درستی اهمیت و مزایای زیادی دارد و در اصل استفاده از این دو ویژگی از همپوشانی سلول‌ها جلوگیری خواهد کرد.

مثال استفاده از Colspan

در اصل ویژگی colspan سلول‌ها را در چندین ستون ادغام می‌کند. این ویژگی معمولاً برای ایجاد سلولی که به صورت افقی در چندین ستون قرار دارد استفاده می‌شود. در زیر مثالی برای استفاده از colspan آورده شده است:

1<table>
2  <tr>
3    <th>S.N</th>
4    <th>Item</th>
5    <th>Quantity</th>
6  </tr>
7  <tr>
8    <td>1</td>
9    <td>Apple</td>
10    <td>2</td>
11  </tr>
12  <tr>
13    <td>2</td>
14    <td>Mango</td>
15    <td>2</td>
16  </tr>
17  <tr>
18    <td>3</td>
19    <td>Orange</td>
20    <td>1</td>
21  </tr>
22  <tr>
23    <td colspan="2">Total</td>
24    <td>5</td>
25  </tr>
26</table>

خروجی مثال فوق به صورت زیر است:

در مثال بالا، آخرین ردیف حاوی سلولی با ویژگی « colspan=2 » بوده که این بدان معنی است که سلول به جای یک ستون، در دو ستون قرار می‌گیرد. در نتیجه، سلول با سلول کناری خود ادغام می‌شود و سلولی گسترده‌تر ایجاد خواهد کرد که دو ستون را اشغال می‌کند.

مقدار ویژگی colspan تعیین می‌کند که سلول باید چند ستون را اشغال کند. با تنظیم مقدار آن، می‌توان عرض و پهنای سلول ادغام‌شده در جدول خود را کنترل کرد. باید به این نکته توجه داشته که ویژگی colspan مختص عناصر td و th در عنصر tr (ردیف جدول) است. این ویژگی برای انواع دیگر عناصر HTML قابل‌اجرا نیست.

مثال استفاده از Rowspan

ویژگی rowspan برای ادغام سلول‌ها به صورت عمودی در چندین ردیف در ساخت جدول در HTML استفاده می‌شود. این ویژگی به کاربر امکان می‌دهد سلول‌های مجاور را در سلولی واحد که در چندین ردیف قرار دارد ترکیب کند. مثال زیر نحوه استفاده از ویژگی rowspan را نشان می‌دهد:

1<table>
2  <tr>
3    <th>Name</th>
4    <th>Subject</th>
5    <th>Marks</th>
6  </tr>
7  <tr>
8    <td rowspan="3">Mark Smith</td>
9    <td>English</td>
10    <td>67</td>
11  </tr>
12  <tr>
13    <td>Maths</td>
14    <td>82</td>
15  </tr>
16  <tr>
17    <td>Science</td>
18    <td>91</td>
19  </tr>
20</table>

خروجی مثال فوق به صورت زیر است:

در مثال بالا، ستون اول جدول دارای ویژگی rowspan با مقدار ۳ است. این بدان معنی بوده که سلول حاوی نام Mark Smith در سه سطر قرار می‌گیرد. در نتیجه، سلول‌های باقی‌مانده در همان ستون فقط دو سطر دارند، زیرا یک ردیف به‌وسیله سلول ادغام‌شده اشغال شده است. هدف اصلی از استفاده از rowspan ایجاد طرح‌بندی‌های جدول پیچیده‌تر است که در آن سلول‌های خاصی باید در چندین ردیف قرار بگیرند. این ویژگی به سازمان‌دهی و ارائه بهتر داده‌ها در جدول HTML کمک می‌کند.

نحوه اضافه کردن هدر، فوتر و بدنه به جدول اچ تی ام ال

جدول، درست مانند وب‌سایت یا هر سند دیگری، می‌تواند به سه بخش اصلی تقسیم شود: هدر (سر صفحه)، بدنه و پاورقی (فوتر). این بخش‌ها با استفاده از ویژگی‌های خاص HTML مشخص می‌شوند:

فیلم آموزش پروژه محور اچ تی ام ال و سی اس اس – پروژه های کاربردی طراحی وب با HTML و CSS در فرادرس

کلیک کنید

• عنصر thead برای تعریف قسمت هدر جدول استفاده می‌شود. این عنصر معمولاً شامل عناوین ستون یا هر اطلاعات دیگری مربوط به هدر جدول است.
• عنصر tbody محتوای اصلی یا بدنه جدول را نشان می‌دهد. این عنصر شامل سطرها و سلول‌هایی است که داده‌های جدول را تشکیل می‌دهند.
• عنصر tfoot برای تعریف قسمت پاورقی یا فوتر جدول استفاده می‌شود. برای افزودن خلاصه اطلاعات، مجموع، یا هر محتوای مرتبط دیگری به پاورقی جدول مفید است.

در اینجا مثالی آورده شده است که استفاده از عناصر «thead» و «tbody» ،«tfoot»  را در جدول HTML نشان می‌دهد:

1<table>
2  <thead>
3    <tr>
4      <th colspan="2">October</th>
5      <th colspan="2">November</th>
6    </tr>
7  </thead>
8
9  <tbody>
10    <tr>
11      <td>Sales</td>
12      <td>Profit</td>
13      <td>Sales</td>
14      <td>Profit</td>
15    </tr>
16    <tr>
17      <td>$200,00</td>
18      <td>$50,00</td>
19      <td>$300,000</td>
20      <td>$70,000</td>
21    </tr>
22  </tbody>
23    
24  <tfoot>
25    <tr>
26      <th colspan= "4">November was more produstive</th>
27    </tr>
28  </tfoot>
29</table>

خورجی مثال فوق به صورت زیر است:

در مثال بالا، بخش thead حاوی سطر هدر با نام دو ماه سال است. بخش tbody شامل سطرهای داده برای ارقام فروش و سود است. بخش tfoot ردیف فوتر را ارائه می‌کند.

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

مثالی از نحوه اضافه کردن هدر، فوتر و بدنه در ساخت جدول در اچ تی ام ال

در این بخش از آموزش ساخت جدول در HTML، مثالی جامع از نحوه ساخت هدر، فوتر و بدنه جدول ارائه شده خواهد شد.

۱. افزودن هدر جدول

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

1<table>
2  <thead>
3    <tr>
4        <th>Head1</th>
5        <th>Head2</th>
6    </tr>
7  </thead>
8
9  ...
10  ...
11</table>

محتوای عنصر thead در قسمت بالای جدول قرار می‌گیرد. معمولاً سطرها با هدر جدول در داخل تگ thead قرار می‌گیرند.

۲. افزودن بدنه جدول

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

1<table>
2  <thead>
3    ...
4  </thead>
5  <tbody>
6    <tr>
7      <td>Cell 1</td>
8      <td>Cell 2</td>
9    </tr>
10  </tbody>
11
12  ...
13  ...
14</table>

محتوای عنصر tbody در قسمت مرکزی جدول قرار می‌گیرد. معمولاً ردیف‌هایی را با محتوایی که می‌خواهیم نشان دهیم در tbody قرار می‌دهیم.

۳. افزودن فوتر به جدول

برای افزودن پاورقی یا فوتر جدول، از تگ tfoot استفاده می‌شود. این تگ باید بعد از تگ tbody و قبل از هر تگ دیگری در عنصر table قرار گیرد. مثال استفاده از تگ نام برده به صورت زیر است:

1<table>
2  <thead>
3    ...
4  </thead>
5  <tbody>
6    <tr>
7      <td>Cell 1</td>
8      <td>Cell 2</td>
9    </tr>
10  </tbody>
11
12  ...
13  ...
14</table>

محتوای عنصر tfoot در قسمت پایین جدول قرار می‌گیرد. معمولاً سطرهایی را با محتوای فوتر در tfoot قرار می‌دهیم. همه این تگ‌ها باید در یک تگ table قرار گیرند و باید حداقل یک تگ tr برای تعریف هر ردیف از جدول داشته باشند. مثال جامع زیر درک بهتری به کاربر از موضوع اضافه کردن هدر، فوتر و بدنه در ساخت جدول در HTML می‌دهد:

1<table>
2  <thead>
3    <tr>
4      <th>S.N</th>
5      <th>Item</th>
6      <th>Quantity</th>
7    </tr>
8  </thead>
9  <tbody>
10    <tr>
11      <td>1</td>
12      <td>Apple</td>
13      <td>2</td>
14    </tr>
15    <tr>
16      <td>2</td>
17      <td>Mango</td>
18      <td>2</td>
19    </tr>
20    <tr>
21      <td>3</td>
22      <td>Orange</td>
23      <td>1</td>
24    </tr>
25  </tbody>
26  <tfoot>
27    <tr>
28      <td></td>
29      <td>Total</td>
30      <td>5</td>
31    </tr>
32  </tfoot>
33</table>

خروجی مثال فوق به صورت زیر است:

استایل بخشیدن به جدول HTML با استفاده از CSS

CSS به کاربر این امکان را می‌دهد که به جداول HTML استایل دهد تا ظاهر آن‌ها را بهبود ببخشد و از نظر بصری آن‌ها را جذاب‌تر کند. با استفاده از سبک‌های مختلف، مانند رنگ‌ها، فونت‌ها و هایلایت، می‌توان جدولی ساده را به جدولی حرفه‌ای تبدیل کرد.

فیلم آموزش پروژه محور HTML و CSS – ساخت مگامنو یا منوی چند سطحی در فرادرس

کلیک کنید

برای استایل دادن به جدول HTML با CSS، باید فایل CSS جداگانه با پسوند .css  ایجاد شود. این فایل شامل سبک‌هایی است که کاربر می‌خواهد در جدول خود اعمال کرده و باید آن را به فایل HTML خود پیوند دهد. در زیر نمونه‌ای از جدول استایل دهی شده با کد CSS در ساخت جدول در HTML آورده شده است. می‌توان کد زیر را سفارشی‌تر کرده و تمرین‌های مختلفی با آن انجام دهد. قطعه کد HTML این مثال به صورت زیر است:

1<table>
2  <caption>A summary of top sites with both paid and free course</caption>
3  <thead>
4    <tr>
5      <th class="primary" scope="col">Websites</th>
6      <th scope="col">Certification</th>
7      <th scope="col">Tuition</th>
8      <th scope="col">Top Courses</th>
9    </tr>
10  </thead>
11  <tbody>
12    <tr>
13      <th scope="row">Freecode Camp</th>
14      <td>Yes</td>
15      <td>Free</td>
16      <td>Web Development and Design</td>
17    </tr>
18    <tr>
19      <th scope="row">Udemy</th>
20      <td>Yes</td>
21      <td>Paid</td>
22      <td>Python and Machine Learning</td>
23    </tr>
24    <tr>
25      <th scope="row">Coursera</th>
26      <td>Yes</td>
27      <td>Free and Paid</td>
28      <td>IoT and AI</td>
29    </tr>
30  </tbody>
31  <tfoot>
32    <tr>
33      <th>Total Courses</th>
34      <td colspan="4"><i>What are you waiting for? Get Started now for free</i></td>
35    </tr>
36  </tfoot>
37</table>

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

1table {
2  text-align: left;
3  position: relative;
4  border-collapse: collapse; 
5  background-color: #f6f6f6;
6}/* Spacing */
7td, th {
8  border: 1px solid #999;
9  padding: 20px;
10}
11th {
12  background: brown;
13  color: white;
14  border-radius: 0;
15  position: sticky;
16  top: 0;
17  padding: 10px;
18}
19.primary{
20  background-color: #000000
21}
22
23tfoot > tr  {
24  background: black;
25  color: white;
26}
27tbody > tr:hover {
28  background-color: #ffc107;
29}

در مثال بالا، جدولی با استفاده از ویژگی‌های CSS در تگ style ، استایل دهی شده است. تراز متن، موقعیت و حاشیه جدول و همچنین رنگ پس‌زمینه با استفاده از CSS تغییر یافته‌اند. همچنین در مثال بالا استایل یا سبک‌های خاصی به عنوان جدول th اضافه شده‌اند.

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

شکل دادن به جداول HTML با استفاده از CSS می‌تواند به جذاب‌تر و حرفه‌ای‌تر شدن جداول HTML کمک کند. با آزمایش ویژگی‌های مختلف CSS، می‌توان جداول را مطابق با نیازهای طراحی خاص خود سفارشی کرد.

چه زمانی باید از جداول HTML استفاده شود؟

جداول می‌توانند به طور مؤثر در سناریوهای مختلف در طول توسعه پروژه‌ها استفاده شوند. جداول زمانی سودمند هستند که نیاز به مقایسه داده‌ها، ارائه نمای کلی از اطلاعات عددی، یا تسهیل بازیابی سریع و سازمان‌یافته اطلاعات باشد. گنجاندن جداول در چنین شرایطی می‌تواند وضوح و دسترسی به داده‌ها را افزایش دهد.

فیلم مجموعه آموزش طراحی و برنامه ‌نویسی سایت – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

در اینجا چند مورد از پروژه‌هایی که ساخت جدول در ‌HTML می‌تواند در آن‌ها مفید واقع شود، آورده شده است:

• مقایسه داده‌ها: جداول زمانی مفید هستند که کاربری بخواهد تفاوت بین دو موجودیت را بررسی کرده یا داده‌ها را با ویژگی‌های مشترک مقایسه کند. به عنوان مثال، می‌توان از جداول برای مقایسه ویژگی‌های محصول A و محصول B یا مقایسه امتیازات تیم X با تیم Y استفاده کرد.
• ارائه داده‌های عددی: جداول قالبی واضح و سازمان‌یافته برای ارائه داده‌های عددی ارائه می‌دهند. برای مثال، می‌توان از جدول برای نمایش نمرات دانش‌آموزان در کلاس یا نمایش جدول رده‌بندی فعلی تیم‌ها در لیگ ورزشی، استفاده کرد.
• بازیابی سریع اطلاعات: زمانی که کاربر حجم زیادی از اطلاعات دارد که باید به راحتی برای خوانندگان قابل دسترسی باشد، جداول می‌توانند فرآیند را ساده کنند. به عنوان مثال، اگر فهرست طولانی‌ای از نام‌ افراد موجود باشد، می‌توان با استفاده از جدول، فهرست را به دسته‌های جداگانه تقسیم کرد و این کار یافتن اطلاعات خاص را برای خوانندگان راحت‌تر می‌کند.

سخن پایانی

جداول روشی مؤثر برای نمایش داده‌های جدولی در HTML هستند. آن‌ها با استفاده از عناصر table و tr ،td ایجاد می‌شوند. با استفاده از این عناصر اولیه HTML، می‌توان جدولی با سطرها و سلول‌های دلخواه ساخت. برای اینکه جدول از نظر بصری جذاب شوند و دسترسی به داده‌ها افزایش یابد، می‌توان با استفاده از CSS ظاهر طراحی را جذاب‌تر کرد. این به کاربر امکان می‌دهد رنگ‌ها، فونت‌ها، حاشیه‌ها و سایر جنبه‌های بصری جدول را سفارشی کند.

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

در مطلب فوق از مجله فرادرس نحوه ساخت جدول در HTML به همرا‌ه چندین مثال عملی مورد بررسی قرار گرفت. در این مطلب آموزش نحوه ساخت سطر و سلول برای جداول HTML، نحوه اضافه کردن کپشن، هدر و فوتر به جداول، استفاده از ویژگی SCOPE در ساخت جدول‌ها، بهره بردن از ویژگی‌های rowspan و colspan و همچنین نحوه استایل بخشیدن به جداول ساخته شده با استفاده از CSS مورد بررسی قرار گرفت.