HTML طراحی سایت گوناگون

۱۰-جداول در HTML

0 1,315 1 دقیقه قبل خوانده شده

جداول در HTML

جداول به وسیله تگ <table> تعریف می شوند.

یک جدول حاوی سطرهایی می باشد (که با تگ <tr> مشخص می شوند) و هر سطر شامل تعدادی سلول است (که با تگ <td> مشخص می شوند)

td مخفف “table data” است و حاوی داده های سلول ها می باشد. تگ <td> می تواند حاوی متن، لینک، تصویر، لیست ها، فرم ها، جداول دیگر و غیره باشد.

تذکر: دقت داشته باشید در فرایند کد نویسی در سایت تیچ وب ممکن است قطعه کد نوشته شده برای هر آموزش فقط همان بخش آموزش در قطعه کد نوشته شده باشد ولی شما برای انجام اموزش حتما باید قطعه کد را به شکل اصلی خود یعنی داخل تگ های <html>و<body> بنویسید.

قطعه کد ساخت جدول به شکل زیر میباشد :

<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

خصوصیت Border

اگر شما خصوصیت Border را برای جدولی مشخص نکنید، جدول بدون لبه نمایش داده می شود. گاهی اوقات این مورد می تواند کاربردی باشد، اما بیشتر مواقع ما نیاز به نمایش لبه ها داریم.

برای نمایش لبه ها باید خصوصیت Border را تنظیم کنیم.

<!DOCTYPE html>
<html>
<body>

<table border="1" style="width:300px">
<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>

<!DOCTYPE html>

<html>

<body>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

تصویر قطعه کد بالا

توجه داشته باشید برای تنظیم لبه ها بهتراست از CSS استفاده کنید.

با استفاده از خصوصیت border در CSS می توانید لبه ها را تنظیم نمایید:

<style>
table,th,td
{
border:1px solid black;
}
</style>

<style>

table,th,td

{

border:1px solid black;

}

</style>

تبدیل لبه های دوخطی به یک خطی

با استفاده از خصوصیت border-collapse در CSS می توانید، لبه های دوخطی جدول را به لبه های یک خطی تبدیل کنید:

<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse
}
</style>

<style>

table,th,td

{

border:1px solid black;

border-collapse:collapse

}

</style>

تنظیم محتوای جدول از لبه

با استفاده از خصوصیت padding در CSS می توانید فاصله محتویات یک سلول را از لبه هایش تنظیم کنید.

اگر این خصوصیت را تنظیم نکنید، فاصله محتوی تا لبه، صفر در نظر گرفته می شود.

th,td
{
padding:15px;
}

th,td

{

padding:15px;

}

تنظیم فاصله سلول ها از یکدیگر

با استفاده از خصوصیت border-spacing در CSS می توانید فاصله سلول ها از یکدیگر را تنظیم کنید.

table
{
border-spacing:5px;
}

table

{

border-spacing:5px;

}

عنوان جدول (Header)

اطلاعات سرتیتر در یک جدول به وسیله تگ <th> تعریف می شود.

بیشتر مرورگرها متن را در عنصر <th> به صورت برجسته (bold) و وسط چین نمایش می دهند.

<table style="width:300px">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>