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