سرفصل دوره

کار با جدول در html، صفر تا صد جدول تو در تو در html

رایگان
  • .دسترسی مادام العمر به ویدئوهای دوره
  • .دسترسی رایگان به آپدیت های دوره
  • .تدریس روان و ساده با کیفیت بالا
  • .سرفصل های بسیار جامع و غنی
2798فارغ التحصیل
avatar

مهدی عباسی

مهندس ارشد کارشناسی کامپیوتر
5

مهدی عباسی هستم، مسلط به حداقل ۲۰ زبان مطرح برنامه نویسی به صورت پیشرفته، مدیر عامل شرکت آریا نرم افزار و بنیانگذار آکادمی درسمن، مسلط به تدریس دروس تخصصی کاردانی و کارشناسی کامپیوتر، پایگاه داده ها، برنامه نویسی پیشرفته، مبانی برنامه نویسی، مباحث ویژه طراحی وب و ....

نظرات دانشجویان

حسین زارع

1401/6/4

سلام و خسته نباشید میشه لطف کنید جواب تمرین این درس رو برام بفرستید هر کار کردم نتونستم

avatar
پشتیبانی1401/6/6
پشتیبان درسمن

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

از صبوری شما متشکریم.

کار با جدول در html، صفر تا صد جدول تو در تو در html

آموزش کار با جداول در hrml

  • <table> : برای ساخت جدول استفاده می شود.
  • <tr> : برای ایجاد سطر جدول استفاده می شود.
  • <td> : برای ایجاد خانه یا سلول جدول استفاده می شود. می تواند حاوی متن، عکس، جدول و... باشد.
  • <th> : برای ساخت سلول های سطر اول که سرتیترجدول می باشد،استفاده می شود.

برای گروه بندی بخش های مختلف جدول از <thead>,<tbody>,<tfoot> استفاده می شود.

  • <thead> : برای  گروه بندی بالای جدول استفاده می شود.
  • <tbody> : برای گروه بندی بدنه اصلی جدول استفاده می شود.
  • <tfoot> : برای گروه بندی پاورقی جدول استفاده می شود.
  • <caption> : برای عنوان جدول استفاده می شود.


برای ادغام کردن سطر وخانه های جدول از colspan و rowspan استفاده می شود.

به مثال  های زیر را توجه کنید :


یک جدول ساده، شامل دو ستون و دو ردیف : 
با استفاده از صفت border برای جدول حاشیه تعیین می کنیم. 

 

<table border=1>                           
  <tr>
    <th>name</th>
    <th>family</th>
  </tr>
  <tr>
   <td>mehdi</td>
   <td>abbasi</td>
  </tr>
</table>

 

ایجاد جدول در html

نحوه استایل دهی با css ، ایجادعنوان، ادغام سلول ها:

    <table border="1" style="width: 800px;">
        <caption>ليست اطلاعات دانشجويان</caption>
        <thead style="background-color: burlywood;">
            <tr>
                <th>رديف</th>
                <th>نام</th>
                <th>سن</th>
            </tr>
        </thead>
        <tbody style="background-color: aqua;">
            <tr>
                <td>1</td>
                <td>Mehdi</td>
                <td>34</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Ali</td>
                <td>24</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Reza</td>
                <td>45</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Mohammad</td>
                <td>18</td>
            </tr>
        </tbody>
        <tfoot>
            <tr style="height: 30px;">
                <td colspan="3">نسخه چاپي</td>
            </tr>
        </tfoot>
    </table>

 

آموزش ساخت جدول با استفاده از hrml

ایجاد جداول تو در تو و قراردادن عکس در سلول های جدول:

    <table border="1" style="width: 800px;">
        <caption>ليست اطلاعات دانشجويان</caption>
        <thead style="background-color: burlywood;">
            <tr>
                <th>رديف</th>
                <th>نام</th>
                <th>سن</th>
            </tr>
        </thead>
        <tbody style="background-color: aqua;">
            <tr>
                <td>1</td>
                <td>
                    <img src="https://thr-storage.abramad.com:9021/images/../Images/slider/002.webp?AWSAccessKeyId=zradfi8e9on5crea7roho17l7nj69btwwyh7fbfmnnji545u&Signature=WnK82DjFeGEEVqKNgvq9UrQED5g%3D&Expires=2108711377" style="width: 200px; height: 80px;"/>
                </td>
                <td>34</td>
            </tr>
            <tr>
                <td>2</td>
                <td rowspan="3">
                    <table border="1">  
                        <tr>
                            <th>aaaaaa</th>
                            <th>aaaaaa</th>
                            <th>aaaaaa</th>
                        </tr>
                        <tr>
                            <td>eeee</td>
                            <td>rrr</td>
                            <td>ggggg</td>
                        </tr>
                        <tr>
                            <td>eeee</td>
                            <td>rrr</td>
                            <td>ggggg</td>
                        </tr>
                        <tr>
                            <td>eeee</td>
                            <td>rrr</td>
                            <td>ggggg</td>
                        </tr>
                    </table>

                </td>
                <td>24</td>
            </tr>
            <tr>
                <td>3</td>
                <td>45</td>
            </tr>
            <tr>
                <td>4</td>
                <td>18</td>
            </tr>
        </tbody>
        <tfoot>
            <tr style="height: 30px;">
                <td colspan="3">نسخه چاپي</td>
            </tr>
        </tfoot>
    </table>

ایجاد جدول تو در تو در html

ممنون که تا اینجا با ما همراه بودید، برای یادگیری نکات بیشتر و درک بهتر مطالب می توانید ویدئو آموزشی این بخش را مشاهده کنید.smiley