ساخت جدول در HTML و کار با تگ table

آخرین بروزرسانی در تاریخ : 31 شهریور 1402

باید لاگین کنید!

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

راهنمای مطالعه:

تگ table در html

تگ <table> در HTML یک تگ بسیار مهم و کاربردی است که برای ایجاد جداول در صفحات وب استفاده می‌شود. با استفاده از این تگ، می‌توانید ساختار و نمایش داده‌ها را به صورت جدولی سازماندهی کنید. تگ <table> به تنهایی یک جدول خالی ایجاد می‌کند، اما برای اضافه کردن سطرها و ستون‌ها و محتوای جدول، باید از تگ‌های دیگری مانند <tr> (سطر)، <th> (سرستون) و <td> (ستون) استفاده کنید.

با استفاده از ویژگی‌های CSS نیز می‌توانید استایل دهی کرده و ظاهر جدول را به دلخواه خود تغییر دهید. این ویژگی‌ها شامل رنگ‌بندی، پس‌زمینه، حاشیه‌ها، پهنا و بالا‌بردن سلول‌ها و بسیاری ویژگی‌های دیگر می‌شوند.

به طور کلی، استفاده از تگ <table> در HTML بسیار مفید است و به شما امکان می‌دهد تا اطلاعات را به صورت منظم و قابل فهم در صفحات وب نمایش دهید.

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

<!DOCTYPE html>
<html lang="fa-IR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>کار با جدول‌ها</title>
</head>
<body>
<table>
  <tr>
    <th>نام</th>
    <th>نام خانوادگی</th>
    <th>سن</th>
    <th colspan="2">شماره تماس</th>
  </tr>
  <tr>
    <td>نبـــی</td>
    <td>عبدی</td>
    <td rowspan="2">29</td>
    <td>0912222232</td>
  </tr>
  <tr>
    <td>مجید</td>
    <td>کامرانی</td>
    <td>25</td>
    <td>0935564645</td>
  </tr>
</table>
</body>
</html>

کدهای CSS ساخت جدول

table, td, th {
  border: 1px solid #90a4ae;
  padding: 5px;
  border-collapse: collapse;
}
td, th {
  width: 100px;
  text-align: center;
}

ساخت جدول عمودی در HTML

بسیار خوب! جداول در HTML با استفاده از تگ‌های <table>, <tr>, <td> و <th> ساخته می‌شوند. به طور کلی، جدول عمودی مشابه جدول افقی است، اما تعداد سطر‌ها و ستون‌ها معمولاً متفاوت است. در زیر، یک نمونه کد برای ساخت جدول عمودی در HTML آورده شده است:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ساخت جدول در HTML</title>
    <style>
        table {
            width: 50%;
            border-collapse: collapse;
            margin: 25px 0;
        }
        th, td {
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>عنوان</th>
    </tr>
    <tr>
        <td>مورد 1</td>
    </tr>
    <tr>
        <td>مورد 2</td>
    </tr>
    <tr>
        <td>مورد 3</td>
    </tr>
    <!-- می‌توانید موارد دیگری را نیز اضافه کنید -->
</table>

</body>
</html>

توضیحات کد بالا:

تگ <table> جدول را شروع می‌کند.
هر تگ <tr> یک سطر از جدول را مشخص می‌کند.
تگ <th> برای هدر یا سر ستون‌ها استفاده می‌شود.
تگ <td> هر یک از سلول‌ها را نشان می‌دهد.
CSS بالا به جدول و سلول‌های آن استایل می‌دهد، اما این قسمت به دلخواه و بسته به طراحی وب‌سایت می‌تواند تغییر کند.

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

جمع بندی

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

3.8/5 - (6 امتیاز)

دیدگاه و پرسش

برای ارسال دیدگاه لازم است وارد شده یا ثبت‌نام کنیدورود یا ثبت نام

معصومه عبدی میگوید:
سلام خسته نباشید.ببخشید من میخاستم جدولم عمودی باشه نه افقی..چجوری میتونم انجامش بدم؟

در
- پشتیبانی میگوید:
  درود بر شما، نحوه ساخت جدول عمودی به مقاله اضافه شد.
  
  در
M میگوید:
سلام خسته نباشید
میخواستم بپرسم که برای اینکه به جدولمون حاشیه یا کادر بدیم باید چیکار کنیم ؟
من هرچقدر که از خاصیت border استفاده میکنم هیچ چیزی اعمال نمیشه میشه راهنمایی کنین لطفاً 🙏🌼

در
- پشتیبانی میگوید:
  درود، این مورد به کامل داخل همین جلسه آموزش داده شده است، اگر برای شما کار نمی‌کند به این معنی است که بخشی از کار را اشتباه انجام داده‌اید.
  
  در
الیاس میگوید:
یه عکس و پاراگراف رو کنار هم در یک سطر قرار دادن برای این کار رسم جدول پیشنهاد میشه یا راه بهتری هست؟ الان برای تنظیم سایز عکس و.. کدهای width و.. به خوبی تراز نمی کنه راهش چیه؟

در
- پشتیبانی میگوید:
  آموزش‌ها را دنبال کنید، تا اینجا فقط مباحث بسیار مقدماتی آموزش داده شده است، دنیای ‌html css بسیار بزرگ تر از آن چیزی است که فکر می‌کنید، برای انجام هر کاری در این دنیا ده ها راه مختلف وجود دارد.
  
  در
الیاس میگوید:
سلام چطوری عرض و ارتفاع جدول رو دستی تنظیم کنیم؟ مثلا عرض یک ستون 60% یکی 40% ؟ کال اسپن مخفف چیه؟

در
- پشتیبانی میگوید:
  سلام، این سوال شما در ویدیوهای بعدی پاسخ داده می شود. (ویدیوهای پروژه محور)
  
  در

زبان برنامه نویسی html چیست و چه کاربردی دارد؟

CSS چیست و چه کاربردی دارد؟

بهترین ویرایشگر کد برای HTML و CSS کدام است؟

آموزش ساخت فایل html در VSCode (سند خام html)

مفاهیم پایه زبان HTML | آشنایی با تگ‌ ها و صفت ها

آموزش 3 روش افزودن کدهای CSS به HTML

آموزش حل مشکل نوشتن فارسی در HTML و CSS

اضافه کردن فونت فارسی در CSS و HTML

آموزش تگ‌ های قالب بندی متن در HTML

آموزش کار با تگ‌ لینک‌ a و تصویر در HTML

آموزش استایل دهی به متن‌ها در Html & CSS