ساخت جدول با html

هدایت عباسی آموزش HTML

آموزش ویدئویی ساخت جدول با html

در این فیلم و آموزش ویدئویی با ایجاد و ساخت جدول در html و تگ های table , thead , tbbody , tr , td و غیره آشنا می شوید.

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

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش html از تاپ سایت 98 به سراغ ساخت جدول با html می رویم. جدول برای نظم دادن و مرتب سازی اطلاعات مناسب می باشد .

ابتدا کدها را جداگانه بررسی می کنیم و سپس آن را در قالب یک مینی پروژه در انتهای کار قرار می دهیم.

تگ table

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

پس از استفاده از تگ table , th , tr , td و غیره یک جدول ساده ایجاد می شود. برای زیباسازی جدول می بایست از css استفاده کنید.

سطرها در جدول

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

با هر tr یک سطر ایجاد میشود.در مثال زیر با نحوه کار تگ table , tr آشنا می شوید.

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

تگ th در جدول

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

در زیر یک مثال را خواهید دید.

<!DOCTYPE html>
<html>
<head>
<style>
th {
background-color: limegreen;
color: white;
width: 200px;
}
</style>
</head>
<body>
<a href="https://topsite98.com/">Click me!</a>
<p>HTML CSS Table topsite98.com</p>
<table>
<tr>
<th>name</th>
<th>lname</th>
</tr>
<tr>
<td>ali</td>
<td>rezaee</td>
</tr>
<tr>
<td>ahmad</td>
<td>ahmadi</td>
</tr>
</table>
</body></html>

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

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

در مثال بالا دو فیلد در دو ستون قرار داده ایم. سطر اول شامل عنوان و سطرهای بعد محتوای جدول را در برمی گیرند.

این کد را در یک فایل html قرار داده و اجرا کنید.

کاربرد collapse در جدول

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

برای فهم بهتر می تواند مثال زیر را اجرا کنید. تمام خطوط اضافه با collapse از بین می رود.

<!DOCTYPE html>
<html>
<head>
<style>
table,td{
border: 1px solid #333;
border-collapse: collapse;
}
th {
background-color: limegreen;
color: white;
width: 200px;
}
</style>
</head>
<body>
<a href="https://topsite98.com/">Click me!</a>
<p>HTML CSS Table topsite98.com</p>
<table>
<tr>
<th>name</th>
<th>lname</th>
</tr>
<tr>
<td>ali</td>
<td>rezaee</td>
</tr>
<tr>
<td>ahmad</td>
<td>ahmadi</td>
</tr>
</table>
</body></html>

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

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

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

با استفاده از collapse می توانیم کادرهای اضافه را پاک کنیم.

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

دستور text-align در جدول

با استفاد از دستور text-align می توانیم در جدول می توانیم محتوای جدول را در جهات مختلف قرار دهیم.

مثلا right برای متن های فارسی مناسب است یا center برای وسط و left برای متن های چپ چین.

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

برای ادغام ستون یا سطرها می توانیم از colspan , rowspan استفاده کنیم. بعضی مواقع نیاز است که چند ستون با هم ادغام شود.

با استفاده از colspan قادر خوایم بود چند ستون را با هم ادغام کنیم.

مثال زیر را ببینید تا متوجه کاربرد colspan , rowspan شوید.

<!DOCTYPE html>
<html>
<body>
<a href="https://topsite98.com/">Click me!</a>
<table border="1">
<tr>
<th>name</th>
<th>lname</th>
</tr>
<tr>
<td>ali</td>
<td>rezaee</td>
</tr>
<tr>
<td colspan="2">ahmad</td>
</tr>
</table>
</body></html>

ادغام چند سطر

در بعضی پروژه ها نیاز است که چند سطر با هم ادغام شود. برای ادغام چند سطر باید از دستور rowspan استفاده کنیم.

در مثال زیر با ادغام چند سطر آشنا می شوید. این مثال را در یک فایل html قرار داده و اجرا کنید.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
</body>
</html>

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید