ساخت جدول با HTML

یکی از مواردی که در بیشتر سایت ها استفاده می شود جدول می باشد. جدول به صفحه و اطلاعات نظم خاصی می دهد. در این بخش از آموزش HTMLبه بررسی کامل ساخت جدول در HTML می پردازیم .

برای یادگیری بهتر کدها را در قسمت body قرار دهید . ذخیره کنید و سپس آن را اجر ا کنید تا بهتر یاد بگیرید.

تگ table

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

با کد زیر هیچ چیز در صفحه مشاهده نمی شود.

از جدول در طراحی قالب سایت استفاده می شود با استفاده از css می توانیم سایت را زیبا کنیم.

در قسمت پایین ، با تگ table آشنا می شوید. در ادامه در مورد همه گزینه ها بحث خواهیم کرد.

<table></table>

ایجاد سطر در جدول

برای ایجاد سطر باید از تگ tr استفاده کنیم. با هر tr یک سطر ایجاد میشود.

در مثال زیر با نحوه کار آن آشنا می شوید.

برای هر سطر باید یک تگ tr استفاده کنیم.

<table> <tr> </tr> </table>

ایجاد ستون در جدول

برای ایجاد ستون باید از تگ td استفاده کنیم. با هر td یک ستون ایجاد میشود.

در مثال زیر با نحوه کار آن آشنا می شوید.

برای هر ستون باید یک تگ td استفاده کنیم.  در مثال پایین یک جدول ایجاد خواهیم کرد که شامل 3 فیلد id,name,num می باشد که به معنی کد فرد و نام و نمره می باشد.

این کد را در قسمت body قرار دهید ذخیره کرده و اجر ا کنید تا با نحوه کار جدول و تگ های مختلف آشنا شوید.

<table>
<tr>
<td>id</td>
<td>name</td>
<td>num</td>
</tr>
<tr>
<td>1</td>
<td>ali</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>reza</td>
<td>19</td>
</tr>
</table>

ایجاد border برای جدول

با استفاده از border می توانیم یک خط دور جدول بیندازیم.  این کادر باعث می شود جدول زیباتر شده و محتوا از هم جدا شوند و سطرها و ستون ها نیز بهتراز هم متمایز شوند.

در مثال زیر از border استفاده می کنیم.

<table border="3">
<tr> <td>id</td> <td>name</td> <td>num</td> </tr>
<tr> <td>1</td> <td>ali</td> <td>16</td> </tr>
<tr> <td>2</td> <td>reza</td> <td>19</td> </tr>
</table>

آشنایی با collapse

وقتی از border استفاده میکنیم خطوط روی هم می افتند اگر می خواهید خطوط تبدیل به یک خط شود می توانید از css استفاده کرد و از دستور collapse استفاده کرد. همه خطوط تبدیل به یک خط میشود.

در کد زیر با دستور collapse آشنا میشوید و نحوه کار آن را فرار می گیرید ما در قسمت head از css استفاده کرده ایم این کد را تست کنید.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse; } </style>
</head>
<body>
<table border="3">
<tr> <td>id</td> <td>name</td> <td>num</td> </tr>
<tr> <td>1</td> <td>ali</td> <td>16</td> </tr>
<tr> <td>2</td> <td>reza</td> <td>19</td> </tr>
</table>
</body>
</html>

ادغام چند ستون

گاهی لازم می شود که چند ستون در جدول با هم ادغام شود برای ادغام چند ستون از دستور colspan استفاده می کنیم. با استفاده از دستور colspan می توانیم چند ستون را با هم ادغام کنیم.

در مثال زیر با دستور colspan در جدول آشنا می شوید. این کد را در جدول تست کنید تا با نحوه کار آن آشنا شوید.

<table border="3">
<tr> <td>id</td> <td>name</td> <td>num</td> </tr>
<tr> <td>1</td> <td colspan="2">ali</td> </tr>
<tr> <td>2</td> <td>reza</td> <td>19</td> </tr>
</table>

ادغام چند سطر

برای  ادغام چند سطر می توانیم از rowspan استفاده کنیم. با دستور rowspanمی توانیم چند سطر را با هم ادغام کنیم.

<table border="3">
<tr> <td>id</td> <td>name</td> <td>num</td> </tr>
<tr> <td>1</td> <td rowspan="2">ali</td> <td>16</td> </tr>
<tr> <td>2</td> <td>19</td> </tr>
</table>

زیباسازی جدول

با استفاده از استایل یا css می توانیم جدول زیباتری طراحی کنیم.

یکی از استایل ها که در جدول بکار می رود border میباشد که خطوط دور جدول را ایجاد می کند.

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

برای اینکه بتوانیم دو خانه از جدول را با هم ادغام کنیم از colspan استفاده می شود.

برای اینکه بتوانیم دو خانه از ستون جدول را با هم ادغام کنیم از rowspan استفاده می شود.

برای قرار دادن برچسب از caption استفاده می شود.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
th{
background-color:#BBC8D0;
}
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>
<table style="width:100%">
<tr>
<th>Name:</th>
<th colspan="2">Telephone:</th>
</tr>
<tr>
<td>sh711.com</td>
<td>55577854</td>
<td>666</td>

</tr>
<tr>
<td>sh711.ir</td>
<td>55577854</td>
<td>666</td>
</tr>
</table>

</body>
</html>

دانلود فیلم آموزش HTML

برای دانلود فیلم های آموزش html می توانید به لینک زیر مراجعه کنید.دانلود فیلم آموزش HTML


نویسنده : هدایت عباسی

عضویت طلایی
ثبت نظر