سلام پی وی لرنی های عزیز!
به دوره آموزش تگ های HTML خوش آمدید!
HTML یا Hypertext Markup Language یک نوع زبان نشانهگذاری استاندارد برای ایجاد صفحات اینترنت و وب محسوب می شود.
می توان ادعا کرد که HTML دروازه ورود و پیشرفت برای یادگیری سایر زبان های برنامه نویسی هم چون CSS و جاوا اسکریپت است.
HTML ساختار و اسکلت صفحات وب را تشکیل می دهد و بدون آن نمی توان هیچ صفحه وبی را ساخت.
دوست دارید طراح وب شوید؟
خب باید HTML را بیاموزید!
نگران نشوید! یادگیری HTML کار دشواری نیست و با کمی تلاش خیلی زود در آن استاد می شوید.
در جلسه گذشته به کار با تگ svg پرداختیم؛ تگ svg تگ است که ظرفی را برای گرافیک SVG تعریف می کند.
در این جلسه آموزش کار با تگ table در HTML ارائه خواهیم کرد.
به مثال زیر توجه نمایید.
در این مثال یک (table) جدول HTML ساده، شامل دو ستون و دو ردیفرا مشاهده می نمایید:
1 2 3 4 5 6 7 8 9 10 | <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> |
همان طور که تا به حال متوجه شده اید تگ table یک جدول HTML را مشخص می کند.
یک جدول HTML از عنصر table و یک یا چند عنصر tr ،th و td تشکیل شده است.
عنصر tr یک ردیف جدول را مشخص می کند، عنصر th یک هدر جدول را تعریف می کند، و عنصر td یک سلول جدول را تعریف می نماید.
یک جدول HTML پیچیده تر همچنین می تواند شامل عناصر <caption> ، <col> ، <colgroup> ، <thead> ، <tfoot> و <tbody> باشد.
برای چیدمان صفحه نباید از جداول استفاده شود!
برخی از نویسندگان وب از جدول های HTML استفاده کرده و آن را به عنوان روشی برای کنترل صفحه بندی خود به کار می برند!
گزینه های مختلفی برای استفاده از جداول HTML برای layout وجود دارد و پیشنهاد می شود که در درجه اول به سراغ استفاده از CSS بروید.
عنصر | |||||
<table> | بله | بله | بله | بله | بله |
خصیصه های “align”, “bgcolor”, “border”, “cellpadding”, “cellspacing”, “frame”, “rules”, “summary” و “width” در HTML5 پشتیبانی نمی شوند.
خصیصه | مقدار | توضیحات |
---|---|---|
align | left center right | این خصیصه تراز جدول را با توجه به متن اطراف آن مشخص می کند. این خصیصه در در HTML5 پشتیبانی نمی شود. |
bgcolor | rgb(x,x,x) xxxxxx# colorname | رنگ پس زمینه یک جدول را مشخص می کند. این خصیصه در در HTML5 پشتیبانی نمی شود. |
border | ۱ ۰ | مشخص می کند که از جدول برای اهداف layout استفاده شده است یا نه. این خصیصه در در HTML5 پشتیبانی نمی شود. |
cellpadding | pixels | فضای بین دیواره سلولی و محتوای سلول را مشخص می کند. این خصیصه در در HTML5 پشتیبانی نمی شود. |
cellspacing | pixels | فضای بین سلول ها را مشخص می کند. این خصیصه در در HTML5 پشتیبانی نمی شود. |
frame | void above below hsides lhs rhs vsides box border | مشخص می کند کدام قسمت از مرزهای بیرونی که باید قابل مشاهده باشند. این خصیصه در در HTML5 پشتیبانی نمی شود. |
rules | none groups rows cols all | این خصیصه قسمت هایی از مرزهای داخل را که باید قابل مشاهده باشند را مشخص می کند. این خصیصه در در HTML5 پشتیبانی نمی شود. |
summary | text | این خصیصه خلاصه ای از محتوای یک جدول را ارائه می دهد. این خصیصه در در HTML5 پشتیبانی نمی شود. |
width | pixels % | این خصیصه اندازه عرض یک جدول را مشخص می کند. این خصیصه در در HTML5 پشتیبانی نمی شود. |
تگ <table> از خصیصه های سراسری در HTML پشتیبانی می کند.
تگ <table> از خصیصه رویداد در HTML پشتیبانی می کند.
در ادامه آموزش کار با تگ table در HTML ، با ارائه چند مثال تکمیلی، سعی می کنیم که با کمک چند مثال بیشتر با تگ table آشنا شویم.
هدر Table ( نحوه ایجاد هدرهای جدول )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <h4>Table headers:</h4> <table> <tr> <th>Name</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> </tr> </table> <h4>Vertical headers:</h4> <table> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> </table> </body> </html> |
Table به همراه متن (یک جدول HTML با متن)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table> <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> |
تگ ها در داخل یک Table (نحوه نمایش عناصر در عناصر دیگر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html> |
نمایش سلول های یک Table که بیش از یک ردیف دارند (نحوه تعریف سلولهای جدول که بیش از یک ردیف یا یک ستون دارند)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <h4>Cell that spans two columns:</h4> <table> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html> |
بیشتر مرورگرها عنصر <table> را با مقادیر پیش فرض زیر نمایش می دهند:
1 2 3 4 5 6 | table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; } |
در این جلسه با آموزش کار با تگ table در HTML همراه شما بودیم؛ به طور خلاصه تگ table یک جدول HTML را مشخص می کند.
در جلسه آینده با تگ tbody آشنا می شویم.
با پی وی لرن همراه باشید.