این قطعه کد HTML برای نمایش دادن داده‌ها به صورت ساختار یافته با ردیف‌ها و ستون‌ها استفاده می‌شود. جدول با استفاده از تگ <table> در HTML ایجاد می‌شود و می‌توان با استفاده از ویژگی‌های CSS آن را استایل داد.
در این بخش، مشخص می‌شود که چگونه می‌توان ویژگی‌های مخلتف یک جدول HTML را با استفاده از CSS تنظیم کرد.
در زیر یک مثال آورده شده است که یک جدول HTML ساده را نشان می‌دهد:
<html>
<head>
<style>
</style>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</body>
</html>جدول در مثال بالا یک نمایش ساده از داده‌ها است و می‌توان با استفاده از CSS آن را استایل کرد. می‌توانید ویژگی‌های CSS زیر را برای یک جدول تنظیم کنید:
border-collapse: مشخص می‌کند که مرورگر باید ظاهر حاشیه‌های مجاور که با یکدیگر تماس دارند را کنترل کند یا هر سلول باید سبک خود را حفظ کند.border-spacing: عرضی که باید بین سلول‌های جدول نشان داده شود را مشخص می‌کند.caption-side: مشخص می‌کند که عنوان جدول باید در کجا نمایش داده شود (بالا یا پایین).empty-cells: مشخص می‌کند که حاشیه باید نشان داده شود یا خیر اگر یک سلول خالی باشد.table-layout: به مرورگرها اجازه می‌دهد تا طراحی جدول را با استفاده از اولین خواص عرضی که با آن مواجه می‌شوند برای بقیه ستون‌ها به جای بارگذاری کامل جدول انجام دهند.widthوheight: ارتفاع و عرض یک جدول را تنظیم می‌کنند.text-align: موقعیت افقی محتوای متنی در سلول‌های جدول را تنظیم می‌کند.border: برای تنظیم حاشیه به جدول و سلول‌های آن استفاده می‌شود.background-color: می‌توان به جدول خود، سلول‌های جدول یا ردیف‌های جدول رنگ زمینه اعمال کرد.font-size،font-family،font-weight،font-colorو غیره: قلم جدول را استایل می‌کنند.
به طور خلاصه، می‌توان با استفاده از ویژگی‌های CSS مختلف، جدول‌های HTML را با استایل دلخواه خود تنظیم کرد.
انبارش حاشیه (Border Collapse)
ویژگی border-collapse در CSS مطمئن می‌شود که حاشیه‌ها بین سلول‌های جدول به یک حاشیه تلفیق شوند و یک حاشیه تکراری ایجاد نشود که باعث ظاهری تمیزتر می‌شود. ویژگی border-collapse می‌تواند مقادیر collapse یا separate (پیش‌فرض) داشته باشد.
در مثال زیر، فقط حاشیه به سلول‌ها و بدنه جدول اضافه می‌شود:
<html>
<head>
<style>
table {
border: 3px solid purple;
}
th, td {
border: 1px solid black;
}
</style>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</body>
</html>
حالا بیایید border-collapse: collapse را اضافه کنیم و ببینیم که این چگونه باعث حذف فضای بین سلول‌های جدول می‌شود و باعث همپوشانی حاشیه‌ها می‌شود.
<html>
<head>
<style>
table {
border-collapse: collapse;
border: 3px solid purple;
}
th, td {
border: 1px solid black;
}
</style>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</body>
</html>
فاصلهٔ حاشیه (Border Spacing)
ویژگی border-spacing مشخص می‌کند که چه فاصله‌ای بین حاشیه‌های سلول‌های مجاور در یک جدول قرار می‌گیرد. این ویژگی می‌تواند با یک یا دو مقدار مشخص شود.
-
border-spacing: 2px;: اگر یک مقدار ارسال شود، فضای بین حاشیه‌های عمودی و افقی به همگان اعمال می‌شود. -
border-spacing: 1cm 2em;: اگر دو مقدار ارسال شود، مقدار اول فاصله افقی بین سلول‌ها را مشخص می‌کند (به عبارت دیگر، فضای بین سلول‌ها در ستون‌های مجاور) و مقدار دوم فاصله عمودی بین سلول‌ها را مشخص می‌کند (به عبارت دیگر، فضای بین سلول‌ها در ردیف‌های مجاور).
حالا بیایید مثال قبلی را تغییر داده و تأثیر آن را ببینیم.
<html>
<head>
<style>
table {
border-collapse: separate;
border-spacing: 1em 0.5em;
padding: 0 2em 1em 0;
border: 3px solid purple;
}
td {
width: 1.5em;
height: 1.5em;
background: #d2d2d2;
text-align: center;
vertical-align: middle;
}
</style>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</body>
</html>
توجه: ویژگی border-spacing فقط زمانی کار می‌کند که border-collapse به مقدار separate تنظیم شده باشد. اگر border-collapse به مقدار collapse تنظیم شود، ویژگی border-spacing هیچ تأثیری نخواهد داشت و حاشیه‌ها به یک خط تلفیق می‌شوند.
سمت عنوان (Caption Side)
ویژگی caption-side در CSS برای کنترل قرارگیری یا تراز بندی عنوان جدول نسبت به جدول استفاده می‌شود.
این ویژگی می‌تواند یکی از مقادیر زیر را داشته باشد:
top: عنوان بالای جدول قرار می‌گیرد.bottom: عنوان پایین جدول قرار می‌گیرد.block-start: جعبه عنوان در لبه شروع بلوک جدول قرار می‌گیرد.block-end: جعبه عنوان در لبه پایان بلوک جدول قرار می‌گیرد.inline-start: جعبه عنوان در لبه شروع شده عنصر تو خط جدول قرار می‌گیرد.inline-end: جعبه عنوان در لبه پایان شده عنصر تو خط جدول قرار می‌گیرد.inherit: مقدار از ویژگیcaption-sideالمان والد به ارث می‌برد.
حالا بیایید یک مثال ببینیم:
<html>
<head>
<style>
.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table {
border: 1px solid red;
}
td {
border: 1px solid blue;
}
</style>
<body>
<table class="top">
<caption>
Caption ABOVE the table
</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
<br />
<table class="bottom">
<caption>
Caption BELOW the table
</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</body>
</html>
توجه: ویژگی caption-side فقط برای جدول‌هایی که دارای عنصر <caption> در داخل آنها هستند اعمال می‌شود. عنصر <caption> برای ارائه عنوان یا توضیحات برای جدول استفاده می‌شود. اگر جدول دارای عنوان نباشد، ویژگی caption-side هیچ تأثیری نخواهد داشت.
سلول‌های خالی (Empty Cells)
ویژگی empty-cells در CSS برای کنترل نحوه نمایش سلول‌های جدول که محتوایی ندارند یا به عنوان “خالی” در نظر گرفته می‌شوند، استفاده می‌شود. این ویژگی فقط برای جدول‌ها و سلول‌های جدول اعمال می‌شود.
این ویژگی می‌تواند یکی از دو مقدار زیر را داشته باشد:
show: نشان می‌دهد که سلول‌های خالی با حاشیه و فضایی مانند آنچه که محتوا دارند، نمایش داده شوند. این مقدار پیش‌فرض است.hide: نشان می‌دهد که سلول‌های خالی باید مخفی شوند و هیچ فضایی را اشغال نکنند. حاشیه و فضایی برای سلول‌های خالی نمایش داده نمی‌شود که منجر به یک طرح بیشتر جمع و جور می‌شود.
در مثال زیر، ویژگی empty-cells برای مخفی کردن حاشیه‌های سلول‌های خالی در عنصر <table> استفاده شده است.
<html>
<head>
<style>
table {
width: 350px;
border-collapse: separate;
empty-cells: hide;
}
td,th {
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #999999;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
در مثال زیر، ویژگی empty-cells: show برای نشان دادن حاشیه‌های سلول‌های خالی در عنصر <table> استفاده شده است.
<html>
<head>
<style>
table {
width: 350px;
border-collapse: separate;
empty-cells: show;
}
td,th {
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #999999;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
توجه: ویژگی empty-cells فقط برای جدول‌هایی که دارای عنصر <caption> در داخل آنها هستند اعمال می‌شود. عنصر <caption> برای ارائه عنوان یا توضیحات برای جدول استفاده می‌شود. اگر جدول دارای عنوان نباشد، ویژگی empty-cells هیچ تأثیری نخواهد داشت.
طرح جدول (Table Layout)
ویژگی table-layout برای کنترل نحوه رندر یا چیدمان یک جدول در مرورگر استفاده می‌شود.
این ویژگی می‌تواند یکی از مقادیر زیر را داشته باشد:
auto: هنگامی کهtable-layoutبهautoتنظیم شود، مرورگر عرض ستون‌ها و سلول‌ها را بر اساس محتوای آنها محاسبه می‌کند.fixed: هنگامی کهtable-layoutبهfixedتنظیم شود، مرورگر عرض ثابتی را به هر ستون اختصاص می‌دهد بر اساس ردیف اول جدول. این بدان معناست که تمام ردیف‌های بعدی به همان عرض ستون‌ها پایبند خواهند بود، بدون توجه به محتوای آنها.
توجه: استفاده از table-layout: fixed می‌تواند مفید باشد زمانی که می‌خواهید جداولی با عرض ستون‌هایی ثابت ایجاد کنید، به ویژه زمانی که با حجم بزرگی از داده‌ها سر و کار دارید یا زمانی که می‌خواهید یک طراحی خاص را حفظ کنید.
table-layout: fixed استفاده می‌شود تا چیدمان ثابت جدول ایجاد شود.<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* Using fixed layout */
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>
</body>
</html>در این مثال، یک جدول ایجاد شده است که عرض آن به صورت 100 درصد از عرض پنجره مرورگر است. ویژگی border-collapse به collapse تنظیم شده است تا حاشیه‌ها بین سلول‌های جدول را کم کند.
با اعمال table-layout: fixed، عرض ستون‌های جدول به صورت ثابت مشخص می‌شود و مرورگر دیگر از محتوای درون سلول‌ها برای محاسبه عرض استفاده نمی‌کند.
تگ‌های <th> و <td> همگی دارای حاشیه ۱ پیکسل و فاصله داخلی ۸ پیکسل است. همچنین متن درون این سلول‌ها به وسیله‌ی text-align: center در مرکز چیده شده است.
این مثال نشان می‌دهد که چگونه از ویژگی table-layout: auto استفاده می‌شود تا چیدمان جدول به صورت خودکار تنظیم شود.
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
table-layout: auto; /* Using auto layout */
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>This is some longer content in Column 1</td>
<td>Short content</td>
<td>Even longer content that might wrap in Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>
</body>
</html>در این مثال، یک جدول ایجاد شده است که عرض آن به صورت 100 درصد از عرض پنجره مرورگر است. ویژگی border-collapse به collapse تنظیم شده است تا حاشیه‌ها بین سلول‌های جدول را کم کند.
با اعمال table-layout: auto، عرض ستون‌ها بر اساس محتوای داخلی سلول‌ها تنظیم می‌شود. این بدان معنی است که مرورگر از محتوای داخل سلول‌ها برای محاسبه عرض ستون‌ها استفاده می‌کند. در نتیجه، ستون‌ها با توجه به محتوای داخلی خود به اندازه‌ی لازم گسترش یا انقباض می‌یابند.
تگ‌های <th> و <td> همگی دارای حاشیه ۱ پیکسل و فاصله داخلی ۸ پیکسل است. همچنین متن درون این سلول‌ها به وسیله‌ی text-align: center در مرکز چیده شده است.
ارتفاع و عرض (Height and Width)
این مثال نشان می‌دهد که چگونه از ویژگی‌های width و height برای تنظیم عرض و ارتفاع یک جدول استفاده می‌شود.
<html>
<head>
<style>
#myTable {
width: 500px; /* Set the width of the table */
height: 300px; /* Set the height of the table */
border-collapse: collapse;
}
#myTable th, #myTable td {
border: 5px solid black;
}
</style>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</body>
</html>در این مثال، یک جدول با شناسه myTable ایجاد شده است. با تنظیم width: 500px، عرض جدول به ۵۰۰ پیکسل تنظیم شده است و با height: 300px، ارتفاع جدول به ۳۰۰ پیکسل تنظیم شده است.
علاوه بر این، ویژگی border-collapse به collapse تنظیم شده است تا حاشیه‌ها بین سلول‌های جدول کم شود.
تگ‌های <th> و <td> درون جدول دارای حاشیه با ضخامت ۵ پیکسل و مرزهای سیاه هستند.
هم‌ترازی جدول (Table Alignment)
در CSS، ویژگی‌های مختلفی برای تنظیم‌های افقی و عمودی جداول وجود دارند. در اینجا به بررسی دو ویژگی text-align و vertical-align می‌پردازیم:
text-align
این ویژگی ترتیب افقی محتوای متنی در سلول‌های جدول (<th> یا <td>) را تعیین می‌کند. این ویژگی می‌تواند مقادیر زیر را داشته باشد:
left: ترتیب از چپ به راستright: ترتیب از راست به چپcenter: ترتیب در وسطjustify: ترتیب به گونه‌ای که متن هم در سمت چپ و هم در سمت راست سلول تراز شود
به عنوان مثال، می‌توانیم از text-align: center برای متن‌های جدول استفاده کنیم تا آنها در وسط هر سلول قرار بگیرند.
<html>
<head>
<style>
table, td, th {
border: 2px solid black;
}
table {
border-collapse: collapse;
width: 50%;
}
td {
text-align: center;
}
</style>
</head>
<body>
<h2>Text-align Property</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>vertical-align
این ویژگی ترتیب عمودی محتوای سلول‌های جدول را تعیین می‌کند. این ویژگی می‌تواند مقادیر زیر را داشته باشد:
top: ترتیب از بالاmiddle: ترتیب در وسطbottom: ترتیب از پایین
به عنوان مثال، می‌توانیم از vertical-align: top برای تنظیم ترتیب عمودی محتوای سلول‌ها به بالا استفاده کنیم.
در مثال زیر، استفاده از این دو ویژگی با نمونه‌هایی از جداول نشان داده شده است.
<html>
<head>
<style>
table, td, th {
border: 2px solid black;
}
table {
border-collapse: collapse;
width: 50%;
}
td {
height: 50px;
vertical-align: top;
}
</style>
</head>
<body>
<h2>Vertical-align Property</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>حاشیه (Border)
در CSS، چندین ویژگی مربوط به حاشیه (border) وجود دارد که می‌توان آنها را بر روی یک جدول اعمال کرد. این ویژگی‌ها عبارتند از:
border:
این ویژگی عرض، سبک و رنگ تمامی چهار لبه حاشیه جدول را تنظیم می‌کند. به عنوان مثال، border: 1px solid black; به این معنی است که عرض حاشیه 1 پیکسل، سبک آن خطی و رنگ آن سیاه است.
border-collapse:
این ویژگی تنظیم می‌کند که آیا حاشیه‌ها باید به یک حاشیه ترکیب شوند یا بین سلول‌ها جدا شوند.
border-width:
این ویژگی عرض حاشیه را تعیین می‌کند. می‌توانید از مقادیر thin، medium، thick یا مقادیری مانند px استفاده کنید.
border-style:
این ویژگی سبک حاشیه را تنظیم می‌کند. می‌توانید از سبک‌های مختلفی مانند dotted، dashed، solid، double و غیره استفاده کنید.
border-color:
این ویژگی رنگ حاشیه را تعیین می‌کند. می‌توانید از یک رنگ مشخص یا رنگ‌هایی مانند red، green، blue و غیره استفاده کنید.
border-radius:
این ویژگی اطراف‌های حاشیه جدول را گرد می‌کند. به عنوان مثال، border-radius: 5px; به این معنی است که اطراف حاشیه با شعاع 5 پیکسل گرد شوند.
در مثال زیر، نمونه‌ای از استفاده از این ویژگی‌ها بر روی یک جدول نشان داده شده است.
<html>
<head>
<style>
table {
border-collapse: collapse;
border-radius: 50%;
border-style: inset;
border-color: blue;
width: 100%;
}
td {
border: 2px dashed red;
height: 50px;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<h2>Border property</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>رنگ پس‌زمینه (Background color)
ویژگی background-color به شما امکان می‌دهد رنگ پس زمینه جدول، سلول‌های جدول یا ردیف‌های جدول را تنظیم کنید.
برای تنظیم رنگ پس زمینه از کد زیر استفاده کنید:
/* برای تنظیم رنگ پس زمینه جدول */
table {
background-color: #f2f2f2;
}
/* برای تنظیم رنگ پس زمینه یک سلول یا یک ردیف */
td {
background-color: #f2f2f2;
}
tr {
background-color: #ffffff;
}
حال مثال زیر را بررسی کنید:
<html>
<head>
<style>
table {
border: 2px solid black;
background-color: rgb(237, 181, 237); /* تنظیم رنگ پس زمینه جدول */
width: 100%;
border-collapse: collapse;
}
td {
height: 50px;
vertical-align: middle;
text-align: center;
background-color: #f2f2f2; /* تنظیم رنگ پس زمینه سلول‌ها */
}
</style>
</head>
<body>
<h2>Background color property</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
در این مثال، رنگ پس‌زمینه جدول به rgb(237، 181، 237) (یا به طور معادل #edb5ed) تنظیم شده است و برای سلول‌ها، رنگ پس‌زمینه به #f2f2f2 تغییر یافته است.
فونت در جدول‌ها (Font styles)
این بخش از CSS به شما امکان می‌دهد تا قلم متن جدول را با استفاده از ویژگی‌های مربوط به قلم مانند font-size، font-family، font-weight و غیره بر روی عناصر <th> و <td> استایل کنید.
در مثال زیر، قلم متن برای محتوای جدول با استفاده از ویژگی‌های مربوط به قلم، مانند font-size و font-family، تنظیم شده است:
<html>
<head>
<style>
table.one {
border-collapse: collapse;
width: 400px;
}
th {
font-size: large; /* اندازه قلم برای سرستون‌ها */
font-family: 'Lucida Sans', sans-serif; /* نوع قلم برای سرستون‌ها */
}
td {
font-size: small; /* اندازه قلم برای سلول‌ها */
font-family: Verdana, Geneva, Tahoma, sans-serif; /* نوع قلم برای سلول‌ها */
}
</style>
</head>
<body>
<h2>font styles</h2>
<div>
<table class="one" border="1">
<thead> <!-- سرستون‌ها -->
<th>Heading</th>
</thead>
<tbody> <!-- بدنه جدول -->
<tr>
<td>Cell value</td>
</tr>
<tr>
<td>Cell value</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
در این مثال، قلم متن برای سرستون‌ها با اندازه بزرگ (large) و نوع قلم “Lucida Sans” یا یک فونت سانس-سریف استایل شده است. همچنین برای سلول‌ها، قلم متن با اندازه کوچک (small) و نوع قلم “Verdana”، “Geneva”، “Tahoma” یا یک فونت سانس-سریف دیگر استفاده شده است.
ویژگی های دیگر
در این بخش از CSS، می‌توانید با استفاده از ویژگی‌های مختلف، طراحی جدول را بیشتر سفارشی کنید. به عنوان مثال، می‌توانید padding، margin، دیدارهای و دیگر ویژگی‌ها را به جدول اضافه کنید.
یکی از ویژگی‌هایی که در این بخش معرفی می‌شود، padding است. با استفاده از این ویژگی، می‌توانید فضای پر کردن (padding) را به جدول یا سلول‌های آن اضافه کنید. در زیر مثالی از استفاده از این ویژگی آورده شده است:
<html>
<head>
<style>
table {
border: 2px solid black;
background-color: rgb(175, 239, 194);
border-collapse: collapse;
}
td, th {
border: 2px solid black;
padding: 30px; /* افزودن فضای پر کردن به سلول‌ها */
vertical-align: middle;
height: 50px;
}
</style>
</head>
<body>
<h2>Padding property</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
در این مثال، با استفاده از ویژگی padding، فضای پر کردن 30 پیکسل به سلول‌های جدول اضافه شده است. این باعث می‌شود که محتوای داخل سلول‌ها از حواشی دورتر و بهتر قابل مشاهده باشد و جدول به طراحی بیشتری دست یابد.
حاشیه (Margin)
در این بخش، می‌خواهیم با استفاده از ویژگی margin، حاشیه را به جدول یا سلول‌های آن اضافه کنیم.
<html>
<head>
<style>
table {
border: 2px solid black;
background-color: rgba(237, 181, 237);
border-collapse: collapse;
margin-top: 50px; /* اضافه کردن حاشیه به بالای جدول */
}
td, th {
border: 2px solid black;
vertical-align: middle;
height: 50px;
}
</style>
</head>
<body>
<h2>Margin property</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
در این مثال، با استفاده از ویژگی margin-top، یک حاشیه به بالای جدول اضافه شده است که باعث افزایش فاصله بین جدول و عنوان “Margin property” شده است. توجه داشته باشید که مقدار margin-top می‌تواند به طور دلخواه تنظیم شود تا فاصله مطلوبی بین جدول و بقیه عناصر صفحه ایجاد شود.
تقسیم‌کننده‌های جدول (عمودی / افقی) (Table Dividers (vertical / horizontal))
در این بخش، می‌خواهیم دیواره‌های افقی و عمودی را به جدول اضافه کنیم. برای این کار می‌توانیم از ویژگی‌های border-right و border-bottom برای عناصر <th> و <td> استفاده کنیم.
<html>
<head>
<style>
table {
border: 2px solid black;
background-color: rgb(175, 239, 194);
border-collapse: collapse;
margin-top: 50px;
}
th {
border-bottom: 2px solid black; /* اضافه کردن دیواره افقی به زیر هر سرستون */
}
td {
border-right: 2px solid black; /* اضافه کردن دیواره عمودی به سمت راست هر سلول */
vertical-align: middle;
height: 50px;
}
</style>
</head>
<body>
<h2>horizontal & vertical divider</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
در این مثال، با استفاده از ویژگی border-bottom، یک دیواره افقی به زیر هر سرستون اضافه شده است. همچنین با استفاده از ویژگی border-right، یک دیواره عمودی به سمت راست هر سلول اضافه شده است. این ویژگی‌ها باعث ایجاد تقسیم‌بندی و جداکنندگی مناسب بین ستون‌ها و ردیف‌های جدول می‌شوند.
جدول راه‌راه (Striped Table)
در این بخش، می‌خواهیم جدول را به صورت نواره‌ای (striped) نمایش دهیم، به این معنی که ردیف‌های جدول به صورت متناوب رنگ‌آمیزی شوند. برای این کار، از انتخاب‌کننده nth-child() استفاده می‌کنیم و به ردیف‌های فرد یا زوج جدول، یک رنگ پس‌زمینه اختصاص می‌دهیم.
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(odd) {
background-color: rgb(230,125,111); /* رنگ پس‌زمینه برای ردیف‌های فرد */
}
</style>
</head>
<body>
<h2>Striped table</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
در این مثال، با استفاده از انتخاب‌کننده nth-child(odd)، به ردیف‌های فرد جدول رنگ پس‌زمینه مشخصی (رنگ سرخابی در اینجا) اختصاص داده‌ایم. این کار باعث می‌شود ردیف‌های جدول به صورت نواره‌ای مشخص شوند و راحت‌تر برای کاربر قابل تمیز شوند.
جدول ریسپانسیو (Responsive Table)
در این بخش، می‌خواهیم یک جدول واکنش‌گرا (responsive) ایجاد کنیم، به این معنی که ظاهر و قالب جدول براساس اندازه‌ها و رزولوشن‌های مختلف صفحه تنظیم و سازگار شود. این اطمینان را می‌دهد که جدول به راحتی قابل خواندن و دسترسی بر روی دستگاه‌های مختلف باشد.
برای ایجاد یک جدول واکنش‌گرا، می‌توانیم از ویژگی overflow-x: auto استفاده کنیم تا نوار افقی اسکرول به جدول اضافه شود، زمانی که صفحه در اندازه کوچک است و محتوای کامل دیده نمی‌شود.
توجه: برای ایجاد جدول واکنش‌گرا، نیاز است که یک عنصر حاوی مانند <div> با ویژگی overflow-x: auto را دور از عنصر <table> اضافه کنید.
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(odd) {background-color: rgb(230,125,111);}
</style>
</head>
<body>
<h2>Responsive table</h2>
<div style="overflow-x: auto;">
<table>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
</tr>
</table>
</div>
</body>
</html>
در این مثال، با استفاده از ویژگی overflow-x: auto در یک عنصر <div>، نوار افقی اسکرول به جدول اضافه شده است، به طوری که محتوای جدول در صفحات با اندازه‌ها کوچک می‌تواند به صورت افقی اسکرول شود تا کاربر بتواند به راحتی اطلاعات را مشاهده کند. این اقدام باعث می‌شود جدول بر روی دستگاه‌های مختلف با اندازه‌ها و رزولوشن‌های مختلف قابل دسترس باشد و تجربه کاربری بهتری را فراهم کند.
در زیر فهرستی از ویژگی‌های CSS برای استایل دهی به جداول و توضیح هر یک ارائه شده است:
-
border-collapse: این ویژگی الگوریتم رندر کردن حاشیه جدول را تنظیم می‌کند. زمانی که این ویژگی به مقدار
collapseتنظیم شود، حاشیه‌های جدول با هم ترکیب می‌شوند و یک حاشیه یکپارچه ایجاد می‌شود. -
border-spacing: این ویژگی فاصله بین حاشیه‌های جدول را تعیین می‌کند. در صورتی که حاشیه‌ها جداگانه تنظیم شده باشند، یک مقدار تعیین می‌کند (با مقدار عددی) که فاصله عمودی و افقی را مشخص می‌کند. و هر دو مقدار می‌تواند فاصله عمودی و افقی را به ترتیب مشخص کند.
-
caption-side: این ویژگی موقعیت عنوان جدول را تعیین می‌کند. عنوان جدول می‌تواند در بالا یا پایین جدول قرار گیرد.
-
empty-cells: این ویژگی در صورتی که حاشیه‌ها جداگانه تنظیم شده باشند، سلول‌های خالی در جدول را مخفی می‌کند و فقط حاشیه‌هایی ایجاد می‌کند که دارای محتوا هستند.
-
table-layout: این ویژگی الگوریتم نمایش جدول را تعیین می‌کند. زمانی که به مقدار
autoتنظیم شود، عرض ستون‌ها و سلول‌ها بر اساس محتوای آنها محاسبه می‌شود. اما زمانی که به مقدارfixedتنظیم شود، عرض ثابتی به هر ستون اختصاص داده می‌شود که بر اساس عرض ستون اول محاسبه می‌شود، و این باعث می‌شود که عرض ستون‌ها در تمام ردیف‌ها یکسان باشد.
این ویژگی‌ها کمک می‌کنند تا استایل دهی به جداول به طور دقیق‌تر و موثرتری صورت گیرد و جداول به شکل دلخواهی نمایش داده شوند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام