آموزش HTML - ساخت جدول
جداول در html با استفاده از تگ table ایجاد می شوند .
نحوه ی نوشتار صحیح تگ table بصورت زیر می باشد .
<table></table>
یک جدول از سطر ها و سطون هایی تشکیل می شوند که با سطر را با تگ tr و سلول ها را با تگ td مشخص خواهیم کرد .
Tr مخفف کلمه ی table row و td مخفف کلمه ی table data می باشد .
تگ td میتواند حاوی لینک , متن , عکس و جداول , فرم و... باشد .
مثال :
<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>
مثال بالا بصورت زیر در مرورگر نمایش داده خواهد شد :
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
خصوصیا border در تگ table :
این خصوصیت برای نمایش لبه های جداول مورد استفاده قرار خواهد گرفت .
در هنگام ساخت جدول اگر خصوصیت border را برای تگ table مشخص نکنیم جداول موقع نمایش در مرورگر بدون هیچگونه قالب نمایش داده خواهند شد .
از این خصوصیت برای زیبایی و تفکیک جدول از سایر عناصر و تفکیک سطر ها از یکدیگر از خصوصیت 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>
با اجرای مثال بالا مرورگر بصورت زیر به نمایش در خواهد آمد :
|
Jill
|
Smith
|
50
|
|
Eve
|
Jackson
|
94
|
|
John
|
Doe
|
80
|
نکته ی مهم : به منظور رعایت استاندارد های روز نباید از خصوصیات داخلی استفاده کنید . به این منظور از css استفاده کنید .
در آموزش css بیشتر در این زمینه آشنا خواهید شد .
توجه : با استفاده از خصوصیت border تمامی جدول از جمله سطون ها و سطر ها و کل جدول را در بر خواهد گرفت .
تبدیل لبه ها 2 خطی به یک خطی :
در مثال زیر با استفاده از کد های css لبه های 2 خطی را به 1 خطی تبدیل خواهیم کرد :
<!DOCTYPE html>
<html>
<head>
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<table 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>
مثال بالا در مرورگر بصورت زیر به نمایش در خواهد آمد :
|
Jill
|
Smith
|
50
|
|
Eve
|
Jackson
|
94
|
|
John
|
Doe
|
80
|
تنظیم فاصله محتوای جداول از لبه ی جدول :
جهت تنظیم فاصله محتوای درون تگ با لبه ی یا بردر از خصوصیت padding استفاده میکنیم .
با مثال زیر بهتر با این موضوع آشنا خواهید شد :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td
{
border-collapse:collapse;
border:1px solid black;
}
th, td
{
padding:15px;
}
</style>
</head>
<body>
<table 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>
<p>Try to change the padding to 5px.</p>
</body>
</html>
مثال بالا در مرورگر بصورت زیر به نمایش در خواهد آمد :
|
Jill
|
Smith
|
50
|
|
Eve
|
Jackson
|
94
|
|
John
|
Doe
|
80
|
اگر از این خصوصیت استفاده نکنید فاصله ی محتوا تا لبه صفر پیکسل در نظر گرفته خواهد شد .
تنظیم فاصله سلول ها از یکدیگر در جداول :
با استفاده از خصوصیت border-spacing فاصله سلول های موجود در جداول را تعیین میکنیم .
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td
{
border:1px solid black;
padding:5px;
}
table
{
border-spacing:15px;
}
</style>
</head>
<body>
<table 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>
<p>Try to change the spacing to 5px.</p>
</body>
</html>
مثال بالا در مرورگر بصورت زیر نمایش داده خواهد شد :
|
Jill
|
Smith
|
50
|
|
Eve
|
Jackson
|
94
|
|
John
|
Doe
|
80
|
Try to change the spacing to 5px.
عناوین جداول در HTML :
در جداول عناوین با تگ TH مشخص خواهند شد . <th></th>
در اکثر مرورگر ها محتوای موجود در تگ th بصورت بلد bold و وسط چین نمایش داده می شوند .
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
th,td
{
padding:5px;
}
</style>
</head>
<body>
<table style="width:300px">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<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>
مثال بالا در مرورگر بصورت زیر نمایش داده می شود :
|
Firstname
|
Lastname
|
Points
|
|
Jill
|
Smith
|
50
|
|
Eve
|
Jackson
|
94
|
|
John
|
Doe
|
80
|
خصوصیت text-align :
با استفاده از خصوصیت text-align میتوانیم سرتیتر ها و تمامی محتوا و عناصر html را راست چین , چپ چین و یا وسط چین کرد .
با مثال زیر بیشتر با خصوصیت text-align آشنا خواهید شد :
<!DOCTYPE html>
<html>
<head>
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
th,td
{
padding:5px;
}
th
{
text-align:left;
}
</style>
</head>
<body>
<table style="width:300px">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<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>
مثال بالا در مرورگر بصورت زیر برایمان نمایش داده خواهد شد :
|
Firstname
|
Lastname
|
Points
|
|
Jill
|
Smith
|
50
|
|
Eve
|
Jackson
|
94
|
|
John
|
Doe
|
80
|
همانطور که مشاهده میکنید عناوین در این جدول بصورت چپ چین نمایش داده شده اند .
مهمترین خصوصیات به منظور ساخت جداول را در بخش بالا شرح دادیم اما در جداول تگ های دیگری نیز وجود دارند که در ادامه ی این آموزش در مورد آنها برایتان توضیح خواهیم داد .
تگ caption : به منظور تعریف تیتر اصلی برای جداول به کار برده می شو د .
تگ <colgroup> : به منظور فرمت دهی یک یا تعدادی از سلول ها مورد استفاده قرار میگیرد .
تگ <thead> : عناوین ستون های یک جدول را گروه بندی میکنند . (header (
تگ <tbody > : محتویات بدنه ی جداول را گروه بندی میکنند .
تگ <tfooter> : محتویات انتهای ستونهای جداول را گروه بندی میکنند . (footer)
در آموزش بعدی شما را با عنصر div آشنا خواهیم ساخت . با ما همراه باشید
درس بعدی : آموزش HTML - عنصر div