تگ table

تگ table

فهرست مقاله [نمایش]


    تگ جدول HTML برای نمایش داده ها به صورت جدول (سطر*ستون ) استفاده می شود. می توانید تعداد زیادی ستون در یک ردیف وجود داشته باشیم

    ما می توانیم با کمک عناصر <tr> ، <td> و <th> ، جدول را برای نمایش داده ها به صورت جداول ایجاد کنیم و از عنصر <table> استفاده کنیم.

    در هر جدول ، سطر جدول با تگ <tr> تعریف می شود ، هدر جدول توسط <th> تعریف می شود ، و داده های جدول با تگ های <td> تعریف می شوند.

    در html از جداول برای مدیریت طرح صفحه به عنوان استفاده می شود، به عنوان مثال برای بخش سرصفحه، نوار پیمایش، محتوای اصلی، بخش پاورقی و غیره. اما برای مدیریت طرح صفحه توصیه می شود از تگ div روی جدول استفاده کنید.

     

     
    تگ توضیحات 
    <table> این تگ جدول را مشخص می کند
    <tr> این تگ یه سطر را در جدول مشخص می کند
    <th> این تگ یک سلول هدر را در جدول مشخص می کند
    <td>  این تگ یک سلول را در جدول مشخص می کند
    <caption> عنوان جدول را تعریف می کند
    <colgroup> گروهی از یک یا چند ستون را در یک جدول برای قالب بندی مشخص می کند
    <col>

     برای مشخص کردن خصوصیات ستون برای هر ستون از عنصر

    <colgroup> استفاده می شود.

    <tbody> برای گروه بندی محتوای اصلی در یک جدول استفاده می شود.
    thead>>  برای گروه بندی محتوای هدر در یک جدول استفاده می شود.
    <tfooter>  برای گروه بندی محتوای پاورقی در یک جدول استفاده می شود.

     

    مثال:

    <table>  
    <tr><th>نام</th><th>نام خانوادگی</th><th>سن</th></tr>  
    <tr><td>پویا</td><td>حیدری</td><td>20</td></tr>  
    <tr><td>سیما</td><td>حسینی</td><td>35</td></tr>  
    <tr><td>زهرا</td><td>اکبری</td><td>29</td></tr>  
    <tr><td>رها</td><td>دیبا</td><td>19</td></tr>  
    </table>  

    خروجی:

                     

    نام نام خانوادگی سن
    پویا حیدری 20
    سیما حسینی 35
    زهرا اکبری 29
    رها دیبا 19

    در جدول بالا ، 5 سطر و 3 ستون  دارد.

     

    جدول HTML با Border


    دو روش برای ایجاد حاشیه جدول وجود دارد


    1) ایجاد حاشیه با استفاده از اتریبیوت border  در html

    2)  با استفاده از ویژگی در css

     

    1) اتریبیوت  Border درHtml


    برای  ایجاد حاشیه می توانید از ویژگی border تگ جدول در HTML استفاده کنید.استفاده از این تگ در  حال حاضر توصیه نمی شود.

    مثال:

    
    <table border="1"> 
    <tr><th>نام</th><th>نام خانوادگی</th><th>سن</th></tr>  
    <tr><td>پویا</td><td>حیدری</td><td>20</td></tr>  
    <tr><td>سیما</td><td>حسینی</td><td>35</td></tr>  
    <tr><td>زهرا</td><td>اکبری</td><td>29</td></tr>  
    <tr><td>رها</td><td>دیبا</td><td>19</td></tr>  
    
     </table>  

    خروجی:

    نام نام خانوادگی سن
    پویا حیدری 20
    سیما حسینی 35
    زهرا اکبری 29
    رها دیبا 19

    2) ایجاد حاشیه با استفاده از ویژگی در css

    در حال حاضر توصیه می شود برای ایجاد حاشیه از css  استفاده شود.

    مثال:

    <html>  
    <head>
    <style>  
    table, th, td {  
        border: 1px solid black;  
    }  
    </style>  
    </head>
    
    <body>
    
    <table> 
    <tr><th>نام</th><th>نام خانوادگی</th><th>سن</th></tr>  
    <tr><td>پویا</td><td>حیدری</td><td>20</td></tr>  
    <tr><td>سیما</td><td>حسینی</td><td>35</td></tr>  
    <tr><td>زهرا</td><td>اکبری</td><td>29</td></tr>  
    <tr><td>رها</td><td>دیبا</td><td>19</td></tr>  
    
     </table>    
      
    </body>
    </html>  

    خروجی:

    نام نام خانوادگی سن
    پویا حیدری 20
    سیما حسینی 35
    زهرا اکبری 29
    رها دیبا 19

     

     

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

    مثال:

    <html>  
    <head>
    <style>  
    table, th, td {  
        border: 1px solid black;  
        border-collapse: collapse;  
    }  
    </style>  
    </head>
    <body>  
    <table> 
    <tr><th>نام</th><th>نام خانوادگی</th><th>سن</th></tr>  
    <tr><td>پویا</td><td>حیدری</td><td>20</td></tr>  
    <tr><td>سیما</td><td>حسینی</td><td>35</td></tr>  
    <tr><td>زهرا</td><td>اکبری</td><td>29</td></tr>  
    <tr><td>رها</td><td>دیبا</td><td>19</td></tr>  
    
     </table>    
       
    </body>
    </html>  
    

    خروجی:

    نام نام خانوادگی سن
    پویا حیدری 20
    سیما حسینی 35
    زهرا اکبری 29
    رها دیبا 19

     

    ویژگی cellpadding


    ویژگی cellpadding میزان فاصله محتوای سلول ها، از خطوط کناری (حاشیه) آنها را مشخص می کند، هر چه مقدار آن بیشتر باشد، فضای داخلی سلول ها نیز بیشتر شده و محتوای درون آنها با فاصله بیشتری از خطوط دربرگیرنده، نمایش داده می شود.

    این کار به دو روش صورت می گیرد

     

    1) ا با استفاده از اتریبیوت cellpadding در html

    2)  با استفاده از ویژگی padding در css

    ویژگی cellpadding  در html منسوخ شده است وبهتر است  از ویژگی  css استفاده شود.

    مثال:

    <!DOCTYPE>
    <html>  
    <head>
    <style>  
    table, th, td {  
        border: 1px solid black;  
        border-collapse: collapse;  
    }  
    th, td {
        padding: 10px;
    }
    </style>  
    </head>
    <body>  
    <table> 
    <tr><th>نام</th><th>نام خانوادگی</th><th>سن</th></tr>  
    <tr><td>پویا</td><td>حیدری</td><td>20</td></tr>  
    <tr><td>سیما</td><td>حسینی</td><td>35</td></tr>  
    <tr><td>زهرا</td><td>اکبری</td><td>29</td></tr>  
    <tr><td>رها</td><td>دیبا</td><td>19</td></tr>  
    
     </table>    
       
    </body>
    </html>  

    خروجی:

    نام نام خانوادگی سن
    پویا حیدری 20
    سیما حسینی 35
    زهرا اکبری 29
    رها دیبا 19

    عرض جدول:


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

    مثال:

    <!DOCTYPE html>  
    <html>  
    <head>  
        <title>table</title>  
        <style>  
            table{  
                border-collapse: collapse;  
                width: 100%;   
            }  
        th,td{  
            border: 2px solid green;   
            padding: 15px;  
        }  
                   
        </style>  
      </head>  
    <body>  
      <table>  
        <tr>  
            <th>1 header</th>  
            <th>1 header</th>  
            <th>1 header</th>  
        </tr>  
        <tr>  
            <td>1data</td>  
            <td>1data</td>  
            <td>1data</td>  
        </tr>  
        <tr>  
            <td>2 data</td>  
            <td>2 data</td>  
            <td>2 data</td>  
        </tr>  
        <tr>  
            <td>3 data</td>  
            <td>3 data</td>  
            <td>3 data</td>  
        </tr>  
    </table>  
    </body>  
    </html>  

    خروجی:

    table

    1 header 1 header 1 header
    1data 1data 1data
    2 data 2 data 2 data
    3 data 3 data 3 data

     

    ایجاد تگ با colspan


    اگر می خواهید یک سلول بیش از یک ستون داشته باشید می توانید از ویژگی colspan استفاده کنید. یک سلول / ردیف را به چند ستون تقسیم می کند ، و تعداد ستون ها به مقدار صفت colspan بستگی دارد.

    بیایید نمونه ای را ببینید که دو ستون را در بر می گیرد.

    با استفاده از کد CSS

    <style>  
    table, th, td {  
      border: 1px solid black;  
      border-collapse: collapse;  
    }  
    th, td {  
      padding: 5px;  
    }  
    </style>  

    با استفاده از html

    <!DOCTYPE>
    <html>  
    <head>
    <style>  
    table, th, td {  
        border: 1px solid black;  
        border-collapse: collapse;  
    }  
    th, td {  
        padding: 5px;  
        text-align: left;      
    }  
    </style> 
    </head>
    <body>  
    <table style="width:100%">  
      <tr>  
        <th>نام</th>  
        <th colspan="2">شماره موبایل.</th>  
      </tr>  
      <tr>  
        <td>رضا عباسی</td>  
        <td>7503520801</td>  
        <td>9555879135</td>  
      </tr>  
    </table>  
    </body>
    </html>  
    
     
    

    خروجی:

    نام شماره موبایل.
    رضا عباسی 7503520801 9555879135

    ایجاد جدول با استفاده از rowspan


    اگر می خواهید بیش از یک ردیف سلول ایجاد کنید ، می توانید از ویژگی rowspan استفاده کنید. این سلول را به چندین ردیف تقسیم می کند. تعداد ردیف های تقسیم شده بستگی به مقادیر سطر دارد.

    بیایید نمونه ای را ببینید که دو ردیف دارد.

     با استفاده از کد CSS:

    <style>  
    table, th, td {  
      border: 1px solid black;  
      border-collapse: collapse;  
    }  
    th, td {  
      padding: 10px;  
    }  
    </style>  

    با استفاده از Html:

    <!DOCTYPE>
    <html>  
    <head>
    <style>  
    table, th, td {  
        border: 1px solid black;  
        border-collapse: collapse;  
    }  
    th, td {
        padding: 10px;
    }
    </style>  
    </head>
    <body>  
    <table>  
    <tr><th>نام </th><td>رضا عباسی</td></tr>  
    <tr><th rowspan="2">شماره موبایل.</th><td>7503520801</td></tr>  
    <tr><td>9555879135</td></tr>  
    </table>  
    </body>
    </html>  
    
     
    

    خروجی :

    نام رضا عباسی
    شماره موبایل. 7503520801
    9555879135

     

    تگ caption در جداول

    برای ایجاد یک عنوان (سرلوحه) استفاده می شود، این عنوان در قسمت بالای جدول قرار می گیرد و معرف آن است، برای هر جدول تنها می توان از یک caption استفاده کرد و این تگ باید بلافاصله بعد از تگ table قرار گیرد.

    <!DOCTYPE>
    <html>  
    <head>
    <style>  
    table, th, td {  
        border: 1px solid black;  
        border-collapse: collapse;  
    }  
    th, td {
        padding: 10px;
    }
    </style>  
    </head>
    <body>  
    <table>  
    <caption>list</caption>  
    <tr><th>نام</th><th>نام خانوادگی</th><th>سن</th></tr>  
    <tr><td>پویا</td><td>حیدری</td><td>30</td></tr>  
    <tr><td>سینا</td><td>عباسی</td><td>25</td></tr>  
    <tr><td>حسین</td><td>شمسی</td><td>42</td></tr>  
    <tr><td>رها</td><td>حسینی</td><td>19</td></tr>  
    </table>  
    </body>
    </html>  

    خروجی:

    list
    نام نام خانوادگی سن
    پویا حیدری 30
    سینا عباسی 25
    حسین شمسی 42
    رها حسینی 19

    تعریف استایل برای ردیف های زوج و فرد جدول(Styling HTML table even and odd cells)

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

     مثال:

    <!DOCTYPE>
    <html>  
    <head>
    <style>  
    table, th, td {  
        border: 1px solid black;  
        border-collapse: collapse;  
    }  
    th, td {  
        padding: 10px;  
    }  
    table#alter tr:nth-child(even) {  
        background-color: #eee;  
    }  
    table#alter tr:nth-child(odd) {  
        background-color: #fff;  
    }  
    table#alter th {  
        color: white;  
        background-color: gray;  
    }  
    </style>  
    </head>
    <body>  
    <table id="alter">  
    <tr><th>نام</th><th>نام خانوادگی</th><th>امتیاز</th></tr>  
    <tr><td>حسین</td><td>رحیمی</td><td>60</td></tr>  
    <tr><td>پویا</td><td>حیدری</td><td>80</td></tr>  
    <tr><td>رضا</td><td>عباسی</td><td>82</td></tr>  
    <tr><td>علی</td><td>شیری</td><td>72</td></tr>  
    </table>   
    </body>
    </html>  
    
     
    

    خروجی:

    نام نام خانوادگی امتیاز
    حسین رحیمی 60
    پویا حیدری 80
    رضا عباسی 82
    علی شیری 72

    تگ table  در همه مرورگر ها پشتیبانی می شود .

     

    مقاله قبلی     مقاله بعدی

    جدیدترین ویدئوهای آموزشی

    در بخش TV باگتو، آموزش های کوتاه و جدید را مشاهده نمایید

    0 نظرات

    برای ارسال نظر باید وارد حساب کاربری خود شوید
    ورود به حساب کاربری ثبت نام