چند نکته برای صرفه جویی در شارژ باتری لپ تاپ در ویندوز ۱۰
دی ۲۹, ۱۳۹۴لغو تحریم ایران از سوی شرکت های نرم افزاری
دی ۲۹, ۱۳۹۴در این جلسه از سری آموزش های HTML مدیاسافت قصد داریم به آموزش ساخت جدول و خاصیت های کاربردی در ساخت جدول بپردازیم . با مدیاسافت همراه باشید.
ساخت جدول در HTML
تگ <table> در HTML
در HTML با استفاده از تگ <table> می توان جدول تعریف کرد.
جدول ها از سطر و ستون تشکیل شده اند که در تگ <table> می بایست این سطر و ستون ها را تعریف کرد.
برای تعریف سطر از تگ <tr> و برای تعریف ستون از تگ <td> استفاده می شود. همچنین می توان برای ایجاد عنوان تگ <th> را به کار ببریم.
نگران نباشید ! برای تمامی تگ های بالا مثال خواهیم زد.
به مثال زیر توجه کنید :
<!DOCTYPE html>
<html>
<body>
<table>
<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>
خروجی
آن چیزی که در خروجی مشاهده می کنید قطعا یک جدول است. اما می بایست آن را به شکل بهتری نمایش دهیم.
با استفاده از صفت border در تگ <table> می توانیم جدول خود را خط کشی کنیم.
همچنین با استفاده از خاصیت width در صفت Style می توانیم اندازه ی جدول را تعیین کنیم.
مثال :
<!DOCTYPE html>
<html>
<body>
<table border=”1″ style=”width:100%”>
<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>
خروجی
همانطور که در خروجی مشاهده می کنید ، توانستیم با استفاده از صفت border ، خط های جدول را نمایان کنیم.
خاصیت width که در این مثال مقدار 100% را برای آن قرار دادیم ، بیانگر این است که عرض جدول اندازه ی 100% مرورگر باشد. یعنی اگر اندازه ی مرورگر را تغییر دهیم این جدول نیز تغیر اندازه می دهد.
توضیح تگ <tr> و <td>
تگ های <tr> و <td> اگر در داخل تگ جدول یعنی <table> استفاده نشوند، هیچ کاربردی ندارند.
همانطور که در کدهای بالا ملاحظه می کنید ابتدا با استفاده از تگ <tr> یک سطر از جدول را ایجاد می کنیم. با استفاده از تگ <td> نیز سلول یا ستون های هر سطر را ایجاد می کنیم.
نمایش خط های جدول در HTML با استفاده از CSS
با استفاده از خاصیت border در CSS می توان خطوط جدول را رسم کرد. برای این کار مانند کد زیر عمل می کنیم :
<style>
table,td{
border: 1px solid black;
}
</style>
همانطور که در جلسات قبل توضیح داده شد کد بالا یک CSS داخلی است که می بایست آن را داخل تگ <head> نوشت.
نکته : همانطور که در کد بالا مشاهده می کنید فقط برای table و td از خاصیت border را به کار برده ایم. برای tr نمی توان border تعریف کرد.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 1px solid black;
}
</style>
</head>
<body>
<table style=”width:100%”>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</body>
</html>
خروجی
همانطور که مشاهده می کنید ، در این مثال فقط برای تگ <table> خاصیت border را تعیین کرده ایم. بنابراین دور کل جدول حاشیه ایجاد شده است.
نکته : در مثال های قبل از صفت border استفاده کردیم که استاندارد HTML است . اما بهتر است از کد CSS استفاده کنید.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style=”width:100%”>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</body>
</html>
خروجی
در این مثال برای هر دو تگ <table> و <td> حاشیه تعیین کرده ایم.
خاصیت border-collapse در CSS
در مثال قبل مشاهده کردید که هم دور سلول های جدول و هم دور کل جدول حاشیه دار شده اند، که شکل جالبی ندارد. برای اینکه بتوانیم جدولمان را به صورت جدول های استاندارد در بیاوریم از خاصیت Border-collapse که یک خاصیت از نوع CSS می باشد، استفاده می کنیم. Collapse مقداری است که این خاصیت برای انجام این کار می گیرد. مانند
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
مثال
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style=”width:100%”>
<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>
خروجی
همانطور که مشاهده می کنید ، توانستیم با استفاده از collapse خطوط حاشیه سلول ها را با حاشیه ی بیرونی جدول ترکیب کرده و یک خط را تشکیل دهیم.
خاصیت padding در CSS
با استفاده از این خاصیت که به آن Cell padding نیز گفته می شود می توان فاصله ی بین محتوای سلول ها با حاشیه ی آن ها را تنظیم کرد. این فاصله بر حسب پیکسل(px) می باشد.
td {
padding: 15px;
}
مثال
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 30px;
}
</style>
</head>
<body>
<table style=”width:100%”>
<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>
خروجی
برای اینکه این خاصیت را بیشتر متوجه شوید مقدار padding را به 5px تغییر دهید و خروجی راببینید.
تگ عنوان یا <th> در جدول های HTML
برای قرار دادن عنوان در جدول ها از تگ <th> استفاده می کنیم. th مخفف table heading می باشد. محتوای این تگ به صورت 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:100%”>
<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>
خروجی
خاصیت text-align در CSS
با استفاده از این خاصیت می توان متن ها را از جمله متن های داخل جدول را ترازبندی کرد.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th, p {
text-align: right;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a Paragraph</p>
<table style=”width:100%”>
<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>
</table>
</body>
</html>
خروجی
همانطور که مشاهده می کنید با استفاده از خاصیت text-align توانستیم محتوای تگ های <th> و <p> را به صورت راست چین و محتوای تگ <h1> را به صورت وسط چین در آوریم. خاصیت text-align می تواند یکی مقادیر left ، center و right را به خود بگیرد.
خاصیت border-spacing در CSS
با استفاده از این خاصیت می توان فاصله ی بین سلول ها و همچنین فاصله ی سلول ها از حاشیه را تعیین کرد.
نکته : اگر از در جدولتان از خاصیت collapsed که در همین مطلب توضیح داده شده، استفاده کرده باشید، border-spacing کار نخواهد کرد.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 30px;
}
</style>
</head>
<body>
<table style=”width:100%”>
<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>
خروجی
با قرار دادن مقدار border-spacing از 30px به 5px ، تغییرات را مشاهده کنید تا درک بهتری از این خاصیت پیدا کنید.
صفت colspan در جدول های HTML
گاهی اوقات می خواهید جدول هایی به شکل زیر بسازید :
همانطورکه مشاهده می کند سلول Telephone ، به اندازه 2 سلول زیرش گسترش یافته است. اگر بخواهیم اندازه ی یک سلول را به اندازه ی دو یا چند سلول گسترش دهیم که مانند شکل بالا شود از صفت colspan استفاده می کنیم. مقدار colspan نیز ، تعداد خانه هایی است که می خواهیم سلول به اندازه ی آن تعداد گسترش پیدا کند. در یک جمله : colspan دو یا چند ستون را باهم ادقام می کند.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style=”width:100%”>
<tr>
<th>Name</th>
<th colspan=”2″>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
خروجی
همانطور که در خروجی مشاهده می کنید در سطر اول و سلول دوم که از نوع th یا همان تگ عنوان برای جدول، می باشد، مقدار colspan برابر با 2 است که باعث شده این سلول به اندازه ی 2 سلول جا اشغال کند.
دقت کنید که در این مثال حداکثر مقداری که colspan می توانست بگیرد 3 می باشد . ولی چون یک سلول ، قبل از سلول Telephone قرار داشت ، حداکثر مقدار colspan ، 2 می تواند باشد. اگر سلول اولی را درج نمی کردیم ، می توانستیم با قرار دادن مقدار 3 برای colspan ، در اولین سطر فقط یک سلول داشته باشیم .
صفت rowspan در جدول های HTML
گاهی اوقات نیز می خواهید جدول هایی به این شکل بسازید :
اگر بخواهیم 1 سلول را در 2 یا چند سطر گسترش دهیم از صفت rowspan استفاده می کنیم. این صفت دقیقا شبیه به صفت colspan است با این تفاوت که برای گسترش سلول ها به شکل سطری استفاده می شود. به مثال زیر توجه کنید :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style=”width:100%”>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan=”2″>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
خروجی
دقت کنید که در سطر دوم و ستون اول ، که تگ <th> قرار دارد مقدار rowspan برابر با 2 شده است که به همین دلیل در سطر سوم (تگ <tr> آخر) فقط یک سلول قرار داده شده است. چراکه سلول اول از سطر سوم ، توسط rowspan اشغال شده است.
قرار دادن یک موضوع (Caption) برای جدول در HTML
با استفاده از تگ <caption> می توان برای جدول خود موضوعی در نظر گرفت. تگ <caption> بعد از تگ باز <table> قرار می گیرد.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style=”width:100%”>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
خروجی
همانطور که مشاهده می کنید محتوای تگ <caption> یعنی (Monthly savings) در بالای جدول قرار گرفته است.
پایان جلسه ی دهم