آموزش HTML – قسمت دوازدهم(جدول)
سلام
با دوازدهمین جلسه از سری آموزش های HTML در خدمتتون هستیم.
در این قسمت می پردازیم به جدول و اینکه یاد بگیریم که چه طوری یک جدول بسازیم و با خصوصیاتش آشنا بشیم.
آموزش:
- نمونه جدول
کد های زیر یک جدول را درست می کند:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ |
<html> <body> <table> <tr> <td>Name</td> <td>Family</td> <td>Tell</td> </tr> <tr> <td>Ahmad</td> <td>Akhondy</td> <td>۱۲۳۴۵</td> </tr> <tr> <td>Ali</td> <td>Sadeghi</td> <td>۶۷۸۹</td> </tr> </table> </body> </html> |
توضیحات:
- برای ساخت یک جدول از تگ <table> استفاده می کنیم.
- برای ساخت سطر از تگ <tr> استفاده می کنیم.
- برای ساخت ستون هم از تگ <td> استفاده می کنیم.
پس در کد بالا یک جدول ساختیم با سه سطر و سه ستون.
- گذاشتن حاشیه
در مثال بالا جدولی که نوشتیم حاشیه نداشت ، برای اینکه برای جدول حاشیه قرار بدیم از border استفاده کنیم:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ |
<html> <body> <table border="۱"> <tr> <td>Name</td> <td>Family</td> <td>Tell</td> </tr> <tr> <td>Ahmad</td> <td>Akhondy</td> <td>۱۲۳۴۵</td> </tr> <tr> <td>Ali</td> <td>Sadeghi</td> <td>۶۷۸۹</td> </tr> </table> </body> </html> |
میتونید به جای ۱ هر عدد دیگه ای قرار بدید ، هر چه عدد بزرگتر باشه ، حاشیه بزرگتر میشه
- ترازبندی دادهای جدول
میتونیم متن های جدول را چپ چین،وسط چین و راست چین کنیم ، برای اینکار از text-align استفاده می کنیم:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ |
<html> <body> <table border="۱" style="width:100% ; text-align:center"> <tr> <td>Name</td> <td>Family</td> <td>Tell</td> </tr> <tr> <td>Ahmad</td> <td>Akhondy</td> <td>۱۲۳۴۵</td> </tr> <tr> <td>Ali</td> <td>Sadeghi</td> <td>۶۷۸۹</td> </tr> </table> </body> </html> |
- نوشتن عنوان برای جدول
کار دیگه ای که میتونیم بکنیم اینه که برای جدول یک عنوان بنویسیم ، برای این کار از تگ <caption> استفاده می کنیم:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ |
<html> <body> <table border="۱" style="width:100% ; text-align:center"> <caption> عنوان جدول </caption> <tr> <td>Name</td> <td>Family</td> <td>Tell</td> </tr> <tr> <td>Ahmad</td> <td>Akhondy</td> <td>۱۲۳۴۵</td> </tr> <tr> <td>Ali</td> <td>Sadeghi</td> <td>۶۷۸۹</td> </tr> </table> </body> </html> |
توجه داشته باشید که حتما نباید از تگ <caption> استفاده کنیم ، میتونید از تگ <h> یا تگ <p> هم نیز استفاده کنید:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ |
<html> <body> <head> <style type="text/css"> h3{text-align:center; color:white; width:۱۰۰px ; height:۴۰px; background-color:red ; } </style> </head> <table border="۱" style="width:100% ; text-align:center"> <center> <h3> عنوان جدول </h3> </center> <tr> <td>Name</td> <td>Family</td> <td>Tell</td> </tr> <tr> <td>Ahmad</td> <td>Akhondy</td> <td>۱۲۳۴۵</td> </tr> <tr> <td>Ali</td> <td>Sadeghi</td> <td>۶۷۸۹</td> </tr> </table> </body> </html> |
در کد بالا از تگ <h3> برای عنوان جدول استفاده کردیم ، در قسمت css براش نوشتیم : که متن وسط چین باشه،رنگ متنش سفید باشه،رنگ پس زمینه قرمز باشه و عرض و ارتفاع هم بهش دادیم(اگر جلسات قبلی را خوب مطالعه کرده باشید مشکلی نخواهید داشت).
با ما باشید تا آموزش های بعدی …
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید