تگ 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 header1 header1 header
    1data1data1data
    2 data2 data2 data
    3 data3 data3 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>  
    
     
    

    خروجی:

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

    ایجاد جدول با استفاده از 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>  

    خروجی:

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

    تعریف استایل برای ردیف های زوج و فرد جدول(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  در همه مرورگر ها پشتیبانی می شود .

     

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

    اطلاعات نویسنده
    • نویسنده: روشن احمدی

    ارسال دیدگاه

    برای افزودن دیدگاه خود، نیاز است ابتدا وارد حساب کاربری‌تان شوید


    دیدگاه کاربران