جداول HTML

جداول HTML


جدول ها برای ارائه داده های جدولی استفاده می شوند. در اینجا یک نمای کلی از عناصر مختلف جدول در زبان HTML را بررسی می کنیم.

جداول «Tables» به شما این امکان را می دهند که داده های جدولی را با روش خوب و ساختاری ارائه دهید. جداول داده ها را در یک شبکه ارائه می دهند با ردیف ها و ستون ها.

عناصر مقدماتی جدول

شما در HTML با استفاده از عنصر <table> همراه با عناصر <tr> و <td> جداول را ایجاد می کنید.

هر تگ <tr>…</tr> یک ردیف درون جدول را تعریف می کند و همچنین هر تگ <td>…</td> یک ستون را مشخص می کند. که البته طبق قانون جدول ها هر ستون باید در یک ردیف قرار بگیرد، یا به عبارت دیگر <td> باید در <tr> واقع شود.

یک ویژگی دیگر در بخش جدول ها وجود دارد که بسیاری کاربردی است و آن هم استفاده از عنوان ها در جداول می باشد. در جلسات قبل گفتیم که تیترها با تگ <h> تعریف می شوند. بنابراین هرگاه بخواهیم در جداول از تیتر یا عنوان استفاده کنیم از تگ <th> کمک می گیریم.

<!DOCTYPE html>

<html>

<head>

<body>

<table>

<tr>

<th>نام</th>

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

</tr>

<tr>

<td>علی</td>

<td>باکری</td>

</tr>

<tr>

<td>حسین</td>

<td>باکری</td>

</tr>

</table>

</body>

</html>

برای مشاهده نتیجه اینجا کلیک کنید.

حاشیه جدول

شما می توانید با استفاده از زبان CSS یک حاشیه را به کل جدول یا سلول های جدول به صورت جداگانه ها هردو باهم اضافه کنید. اضافه کردن حاشیه به جدول باعث می شود که در اطراف جدول شما یک حاشیه ایجاد می شود و در اطراف هر سلول نه!

در اکثر موارد شما حاشیه را به تمام جدول اضافه می کنید.

شما می توانید از استایل های درون خطی استفاده کنید، امّا در هر صورت برای ایجاد حاشیه نیاز به کدهای CSS برای هر عنصر <td> خواهید داشت.

در عوض، با استفاده از استایل های جاساز شده یا خارجی (در جلسات قبل توضیح داده شد) می توانید کارآیی بیشتری برای تعریف حاشیه در اختیار داشته باشید.

برای انجام این عمل، می توانید استایل های حاشیه را در عنصر <style> قرار دهید.

مثل این:

<style>

table, th, td {

border: 1px solid orange;

}

</style>

بنابراین پس از اضافه کردن این استایل ها، سند شما ممکن است چیزی شبیه به این باشد:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid orange;

}

</style>

</head>

<body>

<table>

<tr>

<th>نام</th>

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

</tr>

<tr>

<td>علی </td>

<td>باکری </td>

</tr>

<tr>

<td>حسین</td>

<td>باکری</td>

</tr>

</table>

</body>

</html>

برای مشاهده نتیجه اینجا کلیک کنید.

نکته ی قابل توجه این است که اکثر توسعه دهندگان وب از CSS برای اضافه کردن حاشیه به جداول استفاده می کنند. در زبان CSS با محدودیت های بسیار کمتری نسبت به HTML برای تعیین حاشیه ها رو به رو هستید.

لایه بندی سلول

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

برای مثال، برای اعمال 12پیکسل padding می توانید کد زیر را به جدول خود اضافه کنید:

Padding: 12px;

در زیر نمونه ای کامل از استفاده padding در لایه بندی سلول ها را مشاهده می کنید:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid orange;

padding: 12px;

}

</style>

</head>

<body>

<table>

<tr>

<th>نام</th>

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

</tr>

<tr>

<td>علی </td>

<td>باکری </td>

</tr>

<tr>

<td>حسین</td>

<td>باکری</td>

</tr>

</table>

</body>

</html>

برای مشاهده نتیجه اینجا کلیک کنید.

یکسان سازی حاشیه

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

اگر بخواهید می توانید این حالت پیشفرض را استفاده کنید. با این وجود، اکثر توسعه دهنگان وب ترجیح می دهند مرزها را به یک مرز مشترک تبدیل کنند.

برای یکسان سازی حاشیه، جدول استایل زیر را اضافه کنید:

Table {

Border-collapse: collapse;

}

حال در مثال زیر متوجه می شوید که مرزها یا حاشیه های سلول ها با یکدیگر مشترک می شود:

<!DOCTYPE html>

<html>

<head>

<style>

Table {

Border-collapse: collapse;

}

table, th, td {

border: 1px solid orange;

padding: 12px;

}

</style>

</head>

<body>

<table>

<tr>

<th>نام</th>

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

</tr>

<tr>

<td>علی </td>

<td>باکری </td>

</tr>

<tr>

<td>حسین</td>

<td>باکری</td>

</tr>

</table>

</body>

</html>

برای مشاهده نتیجه اینجا کلیک کنید.

عرض جدول

عرض را می توان با استفاده از ویژگی whidth زبان CSS مشخص کرد، با مقدارهای پیکسل یا درصدی. با استفاده از پیکس (px) شما می توانید یک مقدار دقیق را وارد کنید. و کاربر با هردستگاهی که به صفحه وب شما بیاید (مانند لپ تاپ، دسکتاپ، موبایل یا تبلت) جدول را در همان اندازه مشاهده می کند. امّا با استفاده از درصد اندازه جدول نسبت به صفحه نمایش دستگاه (یا مرورگر کاربر) تغییر می کند.

به عنوان مثال با اضافه کردن ویژگی عرض زیر کاربر با هردستگاهی که وارد صفحه وب شود عرض جدول در حالت 100% باقی می ماند.

توجه داشته باشید که اضافه کردن این ویژگی به عنصر <table> باعث می شود عرض کلی جدول تغییر پیدا کند و نه سلول ها.

Table {

Width: 100%;

}

حال این مثال را در جدولمان استفاده می کنیم و نتیجه را مشاهده نمایید.

<!DOCTYPE html>

<html>

<head>

<style>

Table {

Border-collapse: collapse;

Width: 100%;

}

table, th, td {

border: 1px solid orange;

padding: 12px;

}

</style>

</head>

<body>

<table>

<tr>

<th>نام</th>

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

</tr>

<tr>

<td>علی </td>

<td>باکری </td>

</tr>

<tr>

<td>حسین</td>

<td>باکری</td>

</tr>

</table>

</body>

</html>

برای مشاهده نتیجه اینجا کلیک کنید.

رنگ پس زمینه متناوب

همانطور که قبلا توضیح دادیم، رنگ پس زمینه را می توان به عناصر HTML با استفاده از ویژگی background در زبان CSS استفاده کرد.

شما می توانید یک رنگ پس زمینه را به کل جدول اعمال کنید یا فقط بخشی از آن، مانند سلول های جدول یا ردیف های خاص، و غیره.

حالا اجازه دهید کمی از یک ترفند CSS استفاده کنیم تا رنگ های متناوب را به ردیف جدولمان اعمال کنیم. خب، ردیف اول رنگ (الف)، دوم رنگ (ب)، سوم رنگ (پ) و غیره است.

برای انجام اینکار از nth-child­ استفاده می کنیم. همچنین odd و even را نیز می توان به آن اضافه کرد. به کدهای زیر دقّت کنید.

Table.alt tr:nth-child(even) {

Background-color: #ffae89;

}

Table.alt tr:nth-child(odd) {

Background-color: #fff;

}

توجه داشته باشید که در این مثال، من همچنین یک کلاس به نام alt ایجاد کردم و آن را به جدول اعمال کردم، سپس از آن کلاس به عنوان بخشی از انتخاب خود در صفحه استایل استفاده می کنم.

بنابراین اگر در سند بیش از یک جدول وجود داشته باشد، تنها جداول با آن کلاس، این سبک ها را به آنها اعمال می کند.

مثال زیر توجه کنید:

<!DOCTYPE html>

<html>

<head>

<style>

Table {

Border-collapse: collapse;

}

th, td {

border: 1px solid orange;

padding: 12px;

}

Table.alt tr:nth-child(even) {

Background-color: #ffae89;

}

Table.alt tr:nth-child(odd) {

Background-color: #fff;

}

</style>

</head>

<body>

<table class=”alt”>

<tr>

<th>نام</th>

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

</tr>

<tr>

<td>علی </td>

<td>باکری </td>

</tr>

<tr>

<td>حسین</td>

<td>باکری</td>

</tr>

<tr>

<td>حمید</td>

<td>آشتیانی</td>

</tr>

</table>

</body>

</html>

برای مشاهده نتیجه اینجا کلیک کنید.

Colspan

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

برای استفاده از آن فقط تعداد ستون هایی را که سلول باید در آن قرار داشته باشد مشخص کنید.

در مثال زیر ما در تیتر جدول خود مشخص می کنیم دو ستون را در بر بگیرد.

<!DOCTYPE html>

<html>

<head>

<style>

Table {

Border-collapse: collapse;

}

th, td {

border: 1px solid orange;

padding: 12px;

}

Table.alt tr:nth-child(even) {

Background-color: #ffae89;

}

Table.alt tr:nth-child(odd) {

Background-color: #fff;

}

</style>

</head>

<body>

<table class="alt">

<tr>

<th colspan="2">نام</th>

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

</tr>

<tr>

<td>سلول جدول</td>

<td>سلول جدول</td>

<td>سلول جدول</td>

</tr>

<tr>

<td>سلول جدول</td>

<td>سلول جدول</td>

<td>سلول جدول</td>

</tr>

<tr>

<td>سلول جدول</td>

<td>سلول جدول</td>

<td>سلول جدول</td>

</tr>

</table>

</body>

</html>

برای مشاهده نتیجه اینجا کلیک کنید.

Rowspan

Rowspan برخلاف کلسپان برای ردیف استفاده می شود و نه ستون ها در مثال زیر کاربرد آن را متوجه خواهید شد.

<!DOCTYPE html>

<html>

<head>

<style>

Table {

Border-collapse: collapse;

}

th, td {

border: 1px solid orange;

padding: 12px;

}

Table.alt tr:nth-child(even) {

Background-color: #ffae89;

}

Table.alt tr:nth-child(odd) {

Background-color: #fff;

}

</style>

</head>

<body>

<table class="alt">

<tr>

<th rowspan="4">عنوان جدول</th>

</tr>

<tr>

<td>سلول جدول</td>

<td>سلول جدول</td>

</tr>

<tr>

<td>سلول جدول</td>

<td>سلول جدول</td>

</tr>

<tr>

<td>سلول جدول</td>

<td>سلول جدول</td>

</tr>

</table>

</body>

</html>

برای مشاهده نتیجه اینجا کلیک کنید.

توجه: کاربران عزیز در هرکجای این آموزش به مشکلی برخوردید از طریق بخش نظرات سؤال خود را بپرسید.

جلسه قبل | جلسه بعد

تبلیغات در پایین ادامه ی مطلب

نظرات شما


    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی