توسط روشن احمدی

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

تگ جدول 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>

خروجی: