ایجاد جدول در صفحات وب

ایجاد جدول در صفحات وب

 

نمایش داده‌ها بصورت جدول در همه‌جا کاربرد بسیار زیادی دارند. صفحات وب هم از این قائده مستثنی نیستند و همچنان ایجاد جدول یکی از روش‌های مرسوم نمایش داده‌ها در صفحات وب است. تگ table در HTML  وظیفه ایجاد جدول در صفحات وب را دارد.

 

کار با تگ table  

 

قدم اول: ایجاد سطرهای جدول با استفاده از تگ tr

 

تگ <tr> که از کلمه table row  گرفته شده وظیفه ایجاد سطرهای جدول را دارد. در مثال بالا جدول ما دارای ۴ سطر است که کد HTML ما تا اینجا به اینصورت است:

<table>

<tr></tr>

<tr></tr>

<tr></tr>

<tr></tr>

</table>

 

قدم دوم: ایجاد خانه‌های عنوان با استفاده از تگ th

 

تگ <th> که از کلمه table heading  گرفته شده وظیفه ایجاد خانه‌های عنوان را دارد. در جدولی که ما داریم ۴ خانه عنوان در سطر اول وجود دارد (نام – نام خانوادگی – سن – شماره تماس).

<table>

<tr>

<th>نام</th>

<th>نام خانوادگی</th>

<th>سن</th>

<th colspan=”2″>شماره تماس</th>

</tr>

<tr></tr>

<tr></tr>

<tr></tr>

</table>

 

قدم سوم: ایجاد خانه‌های داده با استفاده از تگ td

 

تگ <td> که از کلمه table data  گرفته شده وظیفه ایجاد خانه‌های داده را دارد. در جدول ما ۳ سطر برای داده‌های وجود دارد. در نهایت کد ما به کد زیر تبدیل می‌شود:

<table>

<tr>

<th>نام</th>

<th>نام خانوادگی</th>

<th>سن</th>

<th colspan=”2″>شماره تماس</th>

</tr>

<tr>

<td>علی</td>

<td>سلطانی</td>

<td>22</td>

<td>09118488003</td>

<td>01154627321</td>

</tr>

<tr>

<td>محمد</td>

<td>محمودی</td>

<td rowspan=”2″>18</td>

<td colspan=”2″>09123456789</td>

</tr>

<tr>

<td>فرهاد</td>

<td>جعفری</td>

<td colspan=”2″>09123456789</td>

</tr>

</table>

 

استایل دهی به جدول

 

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

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

 

در نهایت خروجی به شکل زیر است :