آموزش برنامه نویسی و مجله تخصصی فناوری
آموزش CSS - جداول
با استفاده از CSS ویژگی‌های مختلف یک جدول HTML را می توانید تنظیم کنید.می‌توانید ویژگی‌های زیر را برای جدول تنظیم کنید:
-
ویژگی border-collapse که در جدول ها مورد استفاده قرار میگیرد به این صورت است که مشخص میکند که خط دور لبه ی جدول تک خطی باشد یا بصورت ۲ خطی .
-
ویژگی border-spacing می تواند یک فضای خالی ( فاصله ) را در اطراف سلول های یک جدول بصورت افقی و عمودی ایجاد کند.
-
ویژگی caption-side می توانید محل یا موقعیت قرار گیری کَپشِن ( Caption ) در جدول را مشخص کنید.
-
ویژگی empty-cells مشخص می کند که آیا سلول های خالی موجود در یک جدول ، در مرورگر نمایش داده شود یا نمایش داده نشود. اگه از مقدار hide استفاده نمایید، سلول از جدول که خالی از محتوا می باشد بطور کامل مخفی میشود وویژگی هایی همچون Border یا Padding و.. نمایش داده نمی شود.
-
ویژگی table-layout نحوه نمایش ستون ها و سطرهای یک جدول را مشخص می کند.
حالا، با مثال‌هایی خواهیم دید که چگونه از این ویژگی‌ها استفاده شده است.
ویژگی border-collapse
این ویژگی می‌تواند دو مقدار (collapse) و (separate) داشته باشد.
<html>
<head>
<style type = "text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>
<body>
<table class = "one">
<caption>Collapse Border مثالی از</caption>
<tr><td class = "a"> نمونه Collapse سلول A</td></tr>
<tr><td class = "b">نمونه Collapse سلول B</td></tr>
</table>
<br />
<table class = "two">
<caption>Separate مثالی از</caption>
<tr><td class = "a"> نمونه Separate سلول A</td></tr>
<tr><td class = "b">نمونه Separate سلول B</td></tr>
</table>
</body>
</html>
ویژگی border-spacing
توجه داشته باشید که برای استفاده از ویژگی border-spacing باید حتما مقدار ویژگی border-collapse برابر باشد با separate ، در غیراینصورت ویژگی border-spacing بی تاثیر خواهند شد.
توجه : این ویژگی در مرورگرهای Netscape 7 و IE 6 کار نمی‌کند.
<style type="text/css">
/* اگر یک مقدار ارائه کنید */
table.example {border-spacing:10px;}
/* چگونه می توانید دو مقدار ارائه دهید */
table.example {border-spacing:10px; 15px;}
</style>
حال، مثال قبلی را اصلاح کرده و تأثیر آن را مشاهده می‌کنیم :
<html>
<head>
<style type = "text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</style>
</head>
<body>
<table class = "one" border = "1">
<caption>نمونه Separate با border-spacing</caption>
<tr><td> Aسلول</td></tr>
<tr><td> Bسلول</td></tr>
</table>
<br />
<table class = "two" border = "1">
<caption>نمونه Separate با border-spacing</caption>
<tr><td> Aسلول </td></tr>
<tr><td> Bسلول</td></tr>
</table>
</body>
</html>
ویژگی caption-side
این ویژگی می تواند یکی از چهار مقدار بالا(top)، پایین(bottom)، چپ(left) یا راست(right) را داشته باشد.
توجه: این ویژگی ها ممکن است با مرورگر IE شما کار نکنند.
<html>
<head>
<style type = "text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style = "width:400px; border:1px solid black;">
<caption class = "top">این عنوان در بالا ظاهر می شود</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "bottom">
این عنوان در پایین ظاهر خواهد شد </caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "left">این عنوان در سمت چپ ظاهر می شود </caption>
<tr><td > Aسلول </td></tr>
<tr><td >Bسلول</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "right">
این عنوان در سمت راست ظاهر می شود </caption>
<tr><td >Aسلول</td></tr>
<tr><td >Bسلول</td></tr>
</table>
</body>
</html>
ویژگی empty-cells
این ویژگی می‌تواند یکی از سه مقدار - نمایش (show)، مخفی (hide) یا ارث بری (inherit) را داشته باشد.
در اینجا، ویژگی empty-cells برای مخفی کردن حاشیه‌های سلول‌های خالی در عنصر <table> استفاده شده است.
<html>
<head>
<style type = "text/css">
table.empty {
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
</head>
<body>
<table class = "empty">
<tr>
<th></th>
<th>عنوان یک</th>
<th>عنوان دو</th>
</tr>
<tr>
<th>عنوان ردیف</th>
<td class = "empty">مقدار</td>
<td class = "empty">مقدار</td>
</tr>
<tr>
<th>عنوان ردیف</th>
<td class = "empty">مقدار</td>
<td class = "empty"></td>
</tr>
</table>
</body>
</html>
ویژگی table-layout
این ویژگی می تواند یکی از سه مقدار fixed، auto یا innerit را داشته باشد.
مثال زیر تفاوت بین این ویژگی ها را نشان می دهد.
توجه : این ویژگی توسط بسیاری از مرورگرها پشتیبانی نمی شود.
<html>
<head>
<style type = "text/css">
table.auto {
table-layout: auto
}
table.fixed {
table-layout: fixed
}
</style>
</head>
<body>
<table class = "auto" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
<br />
<table class = "fixed" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
</body>
</html>