در این جلسه از دوره آموزش html ساختار کار با جدول html را به شما آموزش خواهیم داد.
جدول html :
جدول html با تگ <table> تعریف می شود.
ردیف های جدول html با تگ <tr> تعریف شده اند.
هدر جدول html با تگ <th> در html تعریف شده است.
به طور پیش فرض، عناوین جدول html درشت و متمرکز هستند.
داده جدول / سلول با تگ <td> در html تعریف شده است.
<!DOCTYPE html><html><body><h2>Basic HTML Table</h2><table style="width:100%"><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>Smith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr></table></body></html>
border در html :
به طور پیش فرض border در جدول html صفر است. و اگرborder برای جداول تعریف نکنید بدون حاشیه نمایش داده می شود.border با استفاده از css تعریف می شود.به مثال زیر دقت کنید.
<!DOCTYPE html><html><head><style>table, th, td {border: 1px solid black;}</style></head><body><h2>Bordered Table</h2><p>Use the CSS border property to add a border to the table.</p><table style="width:100%"><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>Smith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr></table></body></html>
برای نمایش جداول با یک حاشیه از ویژگی Collapsed Borders استفاده می شود.
<!DOCTYPE html><html><head><style>table, th, td {border: 1px solid black;border-collapse: collapse;}</style></head><body><h2>Collapsed Borders</h2><p>If you want the borders to collapse into one border, add the CSS border-collapse property.</p><table style="width:100%"><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>Smith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr></table></body></html>
فضای بین محتوای سلول و حاشیه (border) را در اصطلاح pading می گویند.
pading در جداول به طور پیش فرض صفر هستند.
برای تنظیم padding،از css ها استفاده کنید.
<!DOCTYPE html><html><head><style>table, th, td {border: 1px solid black;border-collapse: collapse;}th, td {padding: 15px;}</style></head><body><h2>Cellpadding</h2><p>Cell padding specifies the space between the cell content and its borders.</p><table style="width:100%"><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>Smith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr></table><p>Try to change the padding to 5px.</p></body></html>
به طور پیش فرض، عناوین جدول درشت و متمرکز هستند. برای انتقال عنوانهای جدول به سمت چپ،راست از ویژگی text-align در CSS استفاده کنید:
<!DOCTYPE html><html><head><style>table, th, td {border: 1px solid black;border-collapse: collapse;}th, td {padding: 5px;}th {text-align: left;}</style></head><body><h2>Left-align Headings</h2><p>To left-align the table headings, use the CSS text-align property.</p><table style="width:100%"><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>Smith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr></table></body></html>
مشخصهborder spacing :
این ویژگی به سلول ها ی جدول از داخل یک حاشیه می دهد.به مثال زیر دقت کنید.
<!DOCTYPE html><html><head><style>table, th, td {border: 1px solid black;padding: 5px;}table {border-spacing: 15px;}</style></head><body><h2>Border Spacing</h2><p>Border spacing specifies the space between the cells.</p><table style="width:100%"><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>Smith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr></table><p>Try to change the border-spacing to 5px.</p></body></html>
مشخصه colspan :
برای ترکیب چند ستون با هم و ایجاد یک ستون بزرگتر استفاده می شود.
<html><head><style>table, th, td {border: 1px solid black;border-collapse: collapse;}th, td {padding: 5px;text-align: left; }</style></head><body><h2>Cell that spans two columns</h2><p>To make a cell span more than one column, use the colspan attribute.</p><table style="width:100%"><tr><th>Name</th><th colspan="2">Telephone</th></tr><tr><td>Bill Gates</td><td>55577854</td><td>55577855</td></tr></table></body></html>
برای ترکیب چند سطر با هم و ایجاد یک سطر بزرگتر استفاده می شود.
<!DOCTYPE html><html><head><style>table, th, td {border: 1px solid black;border-collapse: collapse;}th, td {padding: 5px;text-align: left; }</style></head><body><h2>Cell that spans two rows</h2><p>To make a cell span more than one row, use the rowspan attribute.</p><table style="width:100%"><tr><th>Name:</th><td>Bill Gates</td></tr><tr><th rowspan="2">Telephone:</th><td>55577854</td></tr><tr><td>55577855</td></tr></table></body></html>
تگ <caption> :
برای اضافه کردن یک عنوان به یک جدول، از تگ <caption> استفاده کنید:
برچسب <caption> باید بلافاصله بعد از برچسب <table> وارد شود.
<!DOCTYPE html><html><head><style>table, th, td {border: 1px solid black;border-collapse: collapse;}th, td {padding: 5px;text-align: left;}</style></head><body><h2>Table Caption</h2><p>To add a caption to a table, use the caption tag.</p><table style="width:100%"><caption>Monthly savings</caption><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$50</td></tr></table></body></html>
استایل دهی ویژه به جدول :
برای تعریف یک استایل خاص برای یک جدول ،به صورت زیر اقدام کنید: