صفر تا صد کار با جداول در 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="../Images/slider/002.jpg" 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

 


نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد .
برای ارسال نظر نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.


مشخصات دوره


مدرس دوره : مهدی عباسی
تعداد جلسات 27 جلسه
مدت زمان 900 دقیقه
حجم دوره 3/55 گیگابایت
سطح مهارت مقدماتی تا پیشرفته
وضعیت دوره پایان یافته
: میانگین امتیاز

180,000تومان
برای دسترسی به این دوره وارد یا عضو شوید.
مهدی عباسی
مهدی عباسی

درباره مدرس :

مدیر‌ عامل‌ شرکت آریا‌ نرم‌‌ افزار دارنده مدرک کارشناسی‌ ارشد مهندسی کامپیوتر 12‌ سال سابقه تدریس دروس کامپیوتر را در دانشگاههای دولتی، آزاد، پیام‌نور ملایر، شهیدشمسی‌پور تهران و تدریس برنامه‌نویسی در ... ر انیستیتو ایزایران، مجتمع فنی و موسسه راه‌آینده تهران دارا میباشد و تا به حال راهنمایی انجمنهای علمی دانشگاه و صدها پروژه دانشجویی را برعهده داشته است. تخصص اصلی: با داشتن گواهی‌نامه‌های معتبر تدریس از انیستیتو‌ ایزایران، راه آینده‌تهران و سازمان‌فنی‌حرفه‌ای، تدریس و آموزش‌ دروس کامپیوتر، ‌برنامه‌نویسی کامپیوتر و کلاسهای کنکور کارشناسی و کارشناسی‌ارشد میباشد.همچنین تجربه داوری و نظارت مسابقات برنامه‌نویسی کشوری‌ACM را در سالهای متعدد داشته و تیم مورد رهبری ایشان در 3سال متوالی مقام اول مسابقات کشوری را از آن خود کرده است.ایشان مقالاتی در زمینه شبکه‌های کامپیوتری، تکنیک‌های وزارت دفاع و ... به ثبت رسانده و مشاور و کارشناس در طراحی و برنامه نویسی بیش از 50‌برنامه کاربردی تحت وب و ویندوز و موبایل میباشد. افتخارات دیگر:کسب مقام دوم ایده‌های برتر در مسابقات استارت‌آپ و بکند کشوری را نام برد.بیشتر بدانید