گروه مقاله : CSS
تاريخ انتشار : 1394/02/02 - 11:10
كد :219
با استفاده از css می توان ساختار جدول ها را تا حدود زیادی بهبود بخشید.
Table border :
برای اختصاص دادن کادر به جدول از این خاصیت استفاده می شود.
در مثال زیر کادری با ضخامت 1px و به رنگ سیاه به table, th ,td داده شده است.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
توجه : در مثال بالا همانطور که مشاهده میکنید دو کادر کشیده شده است، دلیل آن هم این است که هم به جدول و هم به td th, کادر داده شده است.
Borders- Collaps :
با استفاده از این خاصیت می توانید کادرها را با یکدیگر ادغام نمایید و به یک کادر تبدیل کنید.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
عرض و ارتفاع جدول :
عرض و ارتفاع جدول با استفاده از width, height تعیین می شوند.
به مثال زیر توجه نمایید :
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
width: 100%;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
چینش افقی متن در جدول :
با استفاده از align شما می توانید تعیین کنید متن از چه سمتی مرتب شود . مقادیر مربوطه left, center, right می باشند.
نکته : به صورت پیش فرض متن در th از وسط و در td از چپ مرتب می شود.
تنظیم فاصله عمودی متن در داخل سلول های جدول :
با استفاده از vertical-alignment شما می توانید مقادیر top, middle, bottom را به متن موجود در سلول جدول بدهید و آن را در جهت عمودی تراز نمایید.
نکته : به صورت پیش فرض فاصله ی عمودی متن در جدول middle در نظر گرفته می شود. (هم متن داخل th و هم متن داخل td)
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
width: 100%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
table padding :
برای کنترل فاصله بین متن داخل سلول جدول از دیواره های جدول از padding برای th, td استفاده می شود.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
td {
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
استفاده از رنگ در جدول :
با استفاده از این خاصیت شما میتوانید به کادر ، متن و پس ضمینه جدول رنگ بدهید.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid green;
}
th {
background-color: green;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>